javascript - 如何在 Ext JS ItemSelector/Multiselect 控件中设置图例？

Question

我有以下multiselect control在 Ext JS 表单中，如下所示:

如何更改“可用”和“选定”这两个图例？

我在文件 ItemSelect.js 中看到我可以在内部设置这些内容:

但是如何从调用代码中设置这些图例标签，以便每次调用此控件时，我都可以为其指定新的图例名称，例如像这样:

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

调用代码:

}, {
    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

嗯，当您在表单面板中创建项目选择器时，可以通过配置对其进行配置。以下是我修改以获得所需结果的方法:

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

通过使用图例属性，您将能够修改字段集的标题。现在，如果您计划在组件初始渲染后设置这些。结果如下: