Question

I have the following multiselect control in a Ext JS form which looks like this:

How can I change the two legends “Available” and “Selected”?

I see in the file ItemSelect.js where I could set these once internally:

But how can I set these legend labels from the calling code so that every time I call this control, I can give it new legend names, e.g. something like:

msConfig[0].legend = 'verfügbar';
msConfig[1].legend = 'ausgewählt';

Calling code:

}, {
    xtype: 'itemselector',
    name: 'itemselector',
    fieldLabel: 'ItemSelector',
    width: 700,
    imagePath: 'images/multiselect/',
    multiselects: [{
            width: 250,
            height: 200,
            store: new Ext.data.ArrayStore({
                data: [[123,'One Hundred Twenty Three'],
                    ['1', 'Two'], ['2', 'One'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
                    ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
                fields: ['value','text'],
                sortInfo: {
                    field: 'value',
                    direction: 'ASC'
                }
            }),
            displayField: 'text',
            valueField: 'value'
        },{
            width: 250,
            height: 200,
            store: [['10','Ten'],['11','Eleven'],['12','Twelve']],
            tbar:[{
                    text: 'clear',
                    handler:function(){
                        simple_form.getForm().findField('itemselector').reset();
                    }
                }]
        }]
},

Answer 1

Well, it is configurable through the config when you create your itemselector in the form panel. Here is how I modify to get the desired result:

multiselects: [{
    legend: 'XYZ',
    width: 250,
    height: 200,
    store: ds,
    displayField: 'text',
    valueField: 'value'
},{
    legend: 'ABC',
    width: 250,
    height: 200,
    store: [['10','Ten']],
    tbar:[{
        text: 'clear',
        handler:function(){
            isForm.getForm().findField('itemselector').reset();
        }
    }]
}]

By using the legend property, you will be able to modify the fieldset’s title. Now, If you plan to set these after the inital rendering of the component. Here is how the result will look like: