Search code examples
javascriptextjsmulti-selectitemselector

How can I set the legend in Ext JS ItemSelector/Multiselect control?


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

enter image description here

How can I change the two legends "Available" and "Selected"?

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

enter image description here

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();
                    }
                }]
        }]
},

Solution

  • 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: enter image description here