NAME

HTML::FormFu::ExtJS::Element::Select

VERSION

version 0.077

DESCRIPTION

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.

MultiSelect

- type: Select
  multiple: 1
  attrs:
    xtype: multiselect

Requires the MultiSelect user extension.

Remote Store

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.

Built-in remote store

- 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.

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:

- type: Select name: combo id: unique_identifier attrs: url: /get_data loading: Wird geladen...

Custom Ext.data.Store instance

var dataStore = new Ext.data.JsonStore({
    url: '/get_data',
    root: 'rows',
    fields: ["text", "id"]
});

/get_data has to return a data structure like this:

{
   "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:

- 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.

NAME

HTML::FormFu::ExtJS::Element::Select - Select box

SEE ALSO

HTML::FormFu::Element::Text

AUTHORS

Moritz Onken (mo)

Alexander Hartmaier (abraxxa)

COPYRIGHT & LICENSE

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.

AUTHOR

Moritz Onken <onken@netcubed.de>

COPYRIGHT AND LICENSE

This software is Copyright (c) 2010 by Moritz Onken.

This is free software, licensed under:

The (three-clause) BSD License

cpanm HTML::FormFu::ExtJS

perl -MCPAN -e shell
install HTML::FormFu::ExtJS