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.

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

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

    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.

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