Ext.ux.form.SuperBoxSelect

SuperBoxSelect is an extension of the ComboBox component which displays selected items as labelled boxes within the form field.

Example 1

This example demonstrates the base functionality of auto-completion and multi-select capabilities.

We're using a data store containing US States and have configured the displayFieldTpl config to show the state and abbreviation in selected items.

Notice that the selected items can be navigated (and deleted) with the keyboard - the DOWN arrow will display the select list.

The buttons below the form show an example of interacting with the component programmatically (see the browser console for output).

The following code was used to create this example:

      
        new Ext.ux.form.SuperBoxSelect({
            id:'selector1',
            fieldLabel: 'US States',
            emptyText: 'Select some US States',
            resizable: true,
            name: 'states',
            anchor:'100%',
            store: states,
            mode: 'local',
            displayField: 'state',
            displayFieldTpl: '{state} ({abbr})',
            valueField: 'abbr',
            value: 'CA,NY',
            forceSelection : true
        })
      
    

Example 2

This example demonstrates the allowNewData config, which allows new item values to be added - type a new tag and hit ENTER.

The developer has full control over new items as values are first sent to a callback function via the newitem event (as shown in the source code) - in this example we use the callback to capitalize the first letter of the tag value.

The extraItemCls config property is also used in this example, and enables additional styling of the selected items - in this instance, it applies the tag icon to selected items and colours the item text green.

The following code was used to create this example:

      
        new Ext.ux.form.SuperBoxSelect({
            msgTarget: 'under',
            allowAddNewData: true,
            id:'selector2',
            fieldLabel: 'Tags',
            emptyText: 'Enter or select the category tags',
            resizable: true,
            name: 'tags',
            anchor:'100%',
            store: tagStore,
            mode: 'local',
            displayField: 'name',
            valueField: 'id',
            extraItemCls: 'x-tag',
            listeners: {
              newitem: function(comp,v){
                v = v+'';
                v = v.slice(0,1).toUpperCase() + v.slice(1).toLowerCase();
                var newObj = {
                  id: v,
                  name: v
                };
                comp.addItem(newObj);
              }
            }
        })
      
      
        .x-tag {
            color: #693;
            background-image: url(tag_green.gif);
            background-repeat: no-repeat;
            background-position:  2px center;
            padding-left: 17px !important;
            *text-indent: 17px !important;
        }
      
    

Example 3

This example demonstrates the stackItems config, which forces the selected items to be rendered as vertically stacked items.

The per item styling capabilities are demonstrated by the use of the classField and styleField config properties.

This demonstration hides the in-field ‘clear’ and ‘expand’ buttons by setting the renderFieldBtns config to false.

Try setting the value to Canada, Italy, Austria, France or New Zealand

The following code was used to create this example:

      
        var countryData = [
          ['AU', 'Australia','x-flag-au','font-style:italic'],
          ['AT', 'Austria', 'x-flag-at',''],
          ['CA', 'Canada', 'x-flag-ca',''],
          ['FR', 'France', 'x-flag-fr',''],
          ['IT', 'Italy', 'x-flag-it',''],
          ['JP', 'Japan', 'x-flag-jp',''],
          ['NZ', 'New Zealand', 'x-flag-nz',''],
          ['US', 'USA', 'x-flag-us','']
        ];

        var countryStore = new Ext.data.SimpleStore({
          fields: ['code', 'name', 'cls', 'style'],
          data: countryData,
          sortInfo: {field: 'name', direction: 'ASC'}
        });

        new Ext.ux.form.SuperBoxSelect({
            allowBlank:false,
            msgTarget: 'side',
            renderFieldBtns: false,
            id:'selector3',
            fieldLabel: 'Countries',
            resizable: true,
            name: 'countries',
            anchor:'100%',
            store: countryStore,
            mode: 'local',
            displayField: 'name',
            valueField: 'code',
            classField: 'cls',
            styleField: 'style',
            extraItemCls: 'x-flag',
            extraItemStyle: 'border-width:2px',
            stackItems: true,
            value: 'AU'
        })
      
      
        .x-flag{
            background-image: url(https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/images/default/s.gif);
            background-repeat: no-repeat;
            background-position:  2px center;
            text-indent: 17px !important;
        }

        .x-flag-au{
            background-image: url("flags/Australia.png");

        }
        .x-flag-at{
            background-image: url("flags/Austria.png");
        }
        .x-flag-ca{
            background-image: url("flags/Canada.png");
        }
        .x-flag-fr{
            background-image: url("flags/France.png");
        }
        .x-flag-it{
            background-image: url("flags/Italy.png");
        }
        .x-flag-jp{
            background-image: url("flags/Japan.png");
        }
        .x-flag-nz{
            background-image: url("flags/New Zealand.png");
        }
        .x-flag-us{
            background-image: url("flags/USA.png");
        }