NAME
HTML::FormFu::ExtJS - Render and validate ExtJS forms using HTML::FormFu
DESCRIPTION
This module allows you to render ExtJS forms without changing your HTML::FormFu config file.
use HTML::FormFu::ExtJS;
my $form = new HTML::FormFu::ExtJS;
$form->load_config_file('forms/config.yml');
print $form->render;HTML::FormFu::ExtJS subclasses HTML::FormFu therefore you can access all of its methods via $form.
If you want to generate grid data and data records for ExtJS have a look at HTML::FormFu::ExtJS::Grid.
This module requires ExtJS 2.2 or greater. Most of the elements work with ExtJS 2.0 or greater too.
EXAMPLES
Check out the examples in examples/html (or try http://search.cpan.org/src/PERLER/HTML-FormFu-ExtJS-0.01/examples/html).
METHODS
A HTML::FormFu::ExtJS object inherits all methods of a HTML::FormFu object. There are some additional methods avaiable:
render
Returns a full ExtJS form panel. Usually you'll use this like this (TT example):
var form = [% form.render %];form is now a JavaScript object of type Ext.FormPanel. You might want to put a handler on the button so they will trigger a function when clicked.
Ext.getCmp("id-of-your-button").setHandler(function() { alert('clicked') } );Or you can add the handler directly to your element:
- type: Button
value: Handler
attrs:
handler: function() { alert("click") }render_items
This method returns all form elements in the JavaScript Object Notation (JSON). You can put this string right into the items attribute of your ExtJS form panel.
_render_items
Acts like "render_items" but returns a perl object instead.
render_buttons
render_buttons returns all buttons specified in $form as a JSON string. Put it right into the buttons attribute of your ExtJS form panel.
_render_buttons
Acts like "render_buttons" but returns a perl object instead.
validation_response
Returns the validation response ExtJS expects as a perl Object. If the submitted values have errors the error strings are formatted returned as well. Send this object as JSON string back to the user if you want ExtJS to mark the invalid fields or to report a success.
If the submission was successful the response contains a data property which contains all submitted values.
Examples:
{ "success" => 0,
"errors" => [
{ "msg" => "This field is required",
"id" => "field" }
]
}
{ "success" => 1,
"data" => { field: "value" }
}CAVEATS
Multi
The Multi element is rendered using the ExtJS column layout. It seems like this layout doesn't allow a label next to it. This module adds a new column as first element which has a field label specified and a hidden text box. I couldn't find a setup where this hack failed. But there might be some cases where it does.
Select
Optgroups are partially supported. They render as a normal element of the select box and are therefore selectable.
File
With ExtJS 2.2 comes an option of the form panel which allows file uploads. Make sure you set fileUpload at the form panel to true.
See http://extjs.com/deploy/dev/docs/?class=Ext.form.BasicForm / fileUpload.
Buttons
Buttons cannot be placed in-line as ExtJS expects them to be in a different attribute. A button next to a text box is therefore (not yet) possible. Buttons are always rendered at the bottom of a form panel.
Comments
There is no support for comments yet. A work-around is to create a Multi element, add the element you want to comment in the first column and the comment as a Src element in the second column.
Block
Each element in a Block element is rendered normally. The tag config option has no influence. If the Block element contains a content it is rendered like a Src element.
SUBVERSION REPOSITORY
Latest development version is avaiable from http://html-formfu.googlecode.com/svn/trunk/HTML-FormFu-ExtJS/.
TODO
SEE ALSO
HTML::FormFu, JavaScript::Dumper
COPYRIGHT & LICENSE
Copyright 2008 Moritz Onken, all rights reserved.
This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.