Как установить легенду в элементе управления Ext JS ItemSelector / Multiselect? - PullRequest
Новая
       66

Как установить легенду в элементе управления Ext JS ItemSelector / Multiselect?

0 голосов
/ 10 марта 2011

У меня есть следующий мультиселектный элемент управления в форме Ext JS, который выглядит следующим образом:

enter image description here

Как изменить две легенды "Доступно"и "Выбрано"?

Я вижу в файле ItemSelect.js, где я мог бы установить их один раз внутри страны:

enter image description here

Но как я могу установитьэти метки легенды из кода вызова, так что каждый раз, когда я вызываю этот элемент управления, я могу присвоить ему новые имена легенды , например, что-то вроде: 

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

Ответы [ 2 ]

2 голосов
/ 10 марта 2011

Ну, это настраивается через конфиг, когда вы создаете свой выбор элемента в панели форм. Вот как я изменяю, чтобы получить желаемый результат: 

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

Используя свойство legend, вы сможете изменить заголовок fieldset. Теперь, если вы планируете установить их после начального рендеринга компонента. Вот как будет выглядеть результат: enter image description here

1 голос
/ 10 марта 2011

Глядя на код Ext.ux.form.ItemSelector.onRender, я заметил комментарий "//ICON HELL!!", который не сулит ничего хорошего для Ext.override, который вызывает метод onRender для itemSelectors, фактически не копируя все ICON HELL более.

Лучший способ, которым вы могли бы пойти, это добавить прослушиватель событий render или afterrender к вашему ItemSelector и при этом попытаться получить доступ к экземпляру набора полей в компонентах MultiSelect вашего ItemSelector и изменить заголовок.

Но подумайте об этом ... этот компонент ItemSelector нуждается в некотором срочном рефакторинге, и его следует настроить через конфигурацию по умолчанию.

В любом случае, попробуйте это ... вы можете запустить это, поместив его в примеры множественного выбора по умолчанию, которые поставляются с загрузкой ExtJS3. Обратите внимание, что слушатель рендеринга и опция конфигурации заголовка i добавлены в мультиселекторы. 

/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
Ext.onReady(function(){

    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    var ds = new Ext.data.ArrayStore({
        data: [[123,'One Hundred Twenty Three'],
            ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
            ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
        fields: ['value','text'],
        sortInfo: {
            field: 'value',
            direction: 'ASC'
        }
    });

    /*
     * Ext.ux.form.ItemSelector Example Code
     */
    var isForm = new Ext.form.FormPanel({
        title: 'ItemSelector Test',
        width:700,
        bodyStyle: 'padding:10px;',
        renderTo: 'itemselector',
        items:[{
            xtype: 'itemselector',
            name: 'itemselector',
            fieldLabel: 'ItemSelector',
            imagePath: '../ux/images/',
            multiselects: [{
                width: 250,
                height: 200,
                store: ds,
                displayField: 'text',
                valueField: 'value',
                title: 'Left'
            },{
                width: 250,
                height: 200,
                store: [['10','Ten']],
                tbar:[{
                    text: 'clear',
                    handler:function(){
                        isForm.getForm().findField('itemselector').reset();
                    }
                }],
                title: 'Right'
            }],
            listeners: {
                render: function(iSelector){
                    iSelector.fromMultiselect.fs.header.update(this.initialConfig.multiselects[0].title);
                    iSelector.toMultiselect.fs.header.update(this.initialConfig.multiselects[1].title);
                }
            }
        }],

        buttons: [{
            text: 'Save',
            handler: function(){
                if(isForm.getForm().isValid()){
                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                        isForm.getForm().getValues(true));
                }
            }
        }]
    });

});
...