HTML::FormFu::ExtJS::Element::Select
version 0.090
Creates a select box.
The default ExtJS setup is:
"mode" : "local", "editable" : false, "displayField" : "text", "valueField" : "value", "hiddenId" : $self->name . '_hidden', "hiddenName" : $self->name, "autoWidth" : false, "forceSelection" : true, "triggerAction" : "all", "store" : new Ext.data.SimpleStore( ... ), "xtype" : "combo"
This acts like a standard html select box. If you want a more ajaxish select box (e.g. editable) you can override these values with /attrs.
The value of store will always be unquoted. You can either provide a variable name which points to an instance of an Ext.data.Store class or create the instance right away.
store
Ext.data.Store
- type: Select multiple: 1 attrs: xtype: multiselect
Requires the MultiSelect user extension.
If you want to load the values of the combo box from an URL you can either create your own Ext.data.Store instance or let this class handle this.
- type: Select name: combo id: unique_identifier attrs: url: /get_data
This will create a remote store instance which will fetch the data from url. Make sure you give the select field an unique id. Otherwise the store will not be attached and a warning is thrown.
url
You can customize the text which is shown while the store is being loaded. It defaults to Loading... and can be changed by setting the loading attribute:
Loading...
loading
- type: Select name: combo id: unique_identifier attrs: url: /get_data loading: Wird geladen...
var dataStore = new Ext.data.JsonStore({ url: '/get_data', root: 'rows', fields: ["text", "id"] });
/get_data has to return a data structure like this:
/get_data
{ "rows" : [ { "text" : "Item #1", "value" : "1234" } ] }
To add that store to your Select field, the configuration has to look like this:
- type: Select name: combo attrs: store: dataStore
You can also overwrite the field names for valueField and displayField by adding them to the attrs:
valueField
displayField
attrs
- type: Select name: combo attrs: store: dataStore valueField: title displayField: id
Make sure that the store is loaded before you call form.load() on that form. Otherwise the combo box field cannot resolve the value to the corresponding label.
form.load()
HTML::FormFu::ExtJS::Element::Select - Select box
HTML::FormFu::Element::Text
Moritz Onken (mo)
Alexander Hartmaier (abraxxa)
Copyright 2009 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.
Moritz Onken <onken@netcubed.de>
This software is Copyright (c) 2011 by Moritz Onken.
This is free software, licensed under:
The (three-clause) BSD License
1 POD Error
The following errors were encountered while parsing the POD:
alternative text '/attrs' contains non-escaped | or /
To install HTML::FormFu::ExtJS, copy and paste the appropriate command in to your terminal.
cpanm
cpanm HTML::FormFu::ExtJS
CPAN shell
perl -MCPAN -e shell install HTML::FormFu::ExtJS
For more information on module installation, please visit the detailed CPAN module installation guide.