ExtJS 4.0.7 ItemSelector change "titles" dynamically

0
votes

I use ItemSelector element of ExtJS 4.0.7. By default "titles" of ItemSelector are: "Available" and "Selected". Can I change it dynamically?

1
javascriptextjs

1 Answers

0
votes

Looking at the source code here: http://docs.sencha.com/extjs/4.2.2/source/ItemSelector.html#Ext-ux-form-ItemSelector-method-setupItems it seems that there are two configs that can be used to tell the item selector what titles to use for the lists: fromTitle and toTitle.

So I imagine that if you set up your itemselector with custom fromTitle (the title of your 'available' list on the left) and toTitle (the title of your 'selected' list on the right) properties it will achieve what you want. I haven't tried this myself though...

Update

Sorry, the above would only work on Ext 4.2.2. I had a look at Ext 4.0.7 and it appears that you need to use different configs. The config you need to use is called 'multiselects', where you can set the titles. See example below:

{
  xtype: 'itemselector',
  name: 'itemselector',
  id: 'itemselector-field',
  anchor: '100%',
  fieldLabel: 'ItemSelector',
  imagePath: '../ux/images/',
  store: myStore,
  displayField: 'text',
  valueField: 'value',
  value: ['3', '4', '6'],
  allowBlank: false,
  msgTarget: 'side',
  multiselects: [{listTitle: 'First title'},{listTitle: 'Second title'}]
}

Update 2

In order to dynamically set the titles, you need to configure the panels with ids using the multiselects property:

{
            xtype: 'itemselector',
            name: 'itemselector',
            id: 'itemselector-field',
            anchor: '100%',
            fieldLabel: 'ItemSelector',
            imagePath: '../ux/images/',
            store: ds,
            displayField: 'text',
            valueField: 'value',
            value: ['3', '4', '6'],
            allowBlank: false,
            msgTarget: 'side',
            multiselects: [{listTitle: 'First title', id: 'itemselector-from-panel'},{listTitle: 'Second title', id: 'itemselector-to-panel'}]
}

This will allow you to get a reference to them later. I created a button to dynamically set the titles below:

Ext.create('Ext.button.Button',{
    text: 'Change Titles',
    renderTo: Ext.getBody(),
    handler: function(){
        var fromField = Ext.getCmp('itemselector-from-panel'),
                toField = Ext.getCmp('itemselector-to-panel');
        fromField.panel.setTitle('my new title');
        toField.panel.setTitle('my newer title');
    }
});