Как дать две идентичные комбинации: одну в заголовке сетки и одну в виде виджета столбца сетки для фильтра магазина

У меня есть один заголовок столбца виджета, по которому я выбираю значение и фильтрую хранилище сетки. Я хочу точно так же и в заголовке сетки. Для этого я даю одну комбинацию с одинаковыми значениями.

Вот мой код для заголовка столбца

header: {
    items: [{
            xtype: 'combo',
            displayField: "displayName",
            fieldLabel: 'Some Label',
            valueField: 'title',
            displayField: 'title',
            hidden : true,
            queryMode: 'local',
            value : 1,
            autoSelect : true,
            //dataindex:"MUTST",
            store: {
            fields: ["id", "displayName"],
            data: [
                    { "id": "1", "title": "Test1" },
                    { "id": "2", "title": "Test2" },
                    { "id": "3", "title": "Test3" }
                ]
            },
            listeners : {
                select : function(combo , record , eOpts){
                    debugger;
                    var sg = this.up("MyGrid");
                    var col = sg.getColumns()[0]; // Getting Header column
                    var flit =sg.getColumns()[0].filter // Here I am getting object instead of constructor
                    //this.focus = sg.onComboFilterFocus(combo);
                }
            },
        }]
},

Я создаю тип виджета в столбце

MyColumn: function(headersXmlDoc) {
    var me = this,
        gridConfig = {};

    gridConfig.columns = [];
    Ext.each(headersXmlDoc.getElementsByTagName("HEADER"), function(header) {
        var column = {
            text: header.getAttribute("L"),
            dataIndex: header.getAttribute("DATAINDEX"),
            sortable: (header.getAttribute("ISSORTABLE").toLowerCase()=="true"), 
            widgetType: header.getAttribute("WIDGET"),
            filterType: Ext.isEmpty(header.getAttribute("FILTER"))? undefined: header.getAttribute("FILTER"),
        };
        switch (header.getAttribute("WIDGET")) {
            case 'textbox':
                if(column.filterType){
                    if(column.filterType == 'TagData'){
                        column.filter = {
                            xtype: 'tagfield',
                            growMax  : 10,
                            valueField: 'title',
                            displayField: 'title',
                            parentGrid : me,
                            dataIndex:header.getAttribute("DATAINDEX"),
                            queryMode: 'local',
                            multiSelect: true,
                            isFilterDataLoaded: false,
                            disabled: true,
                            listeners:{
                                focus: me.SomeMethod, //
                            }
                        };                         
                    } 
                }
                break;

        }
        this.columns.push(column);
    }, gridConfig);

    return gridConfig.columns;
},

Я хочу, чтобы, если я выберу комбинацию заголовков, она также напрямую выбирала комбинацию виджетов. Кто-нибудь может объяснить, как это получить. заранее спасибо


javascript widget extjs extjs6-classic
person David    schedule 24.02.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Таким образом, вам в основном нужно поле со списком в вашем заголовке, которое изменяет значения записи - тот факт, что у вас есть столбец виджета, отображающий комбинацию в ячейках сетки, здесь не имеет большого значения.

Я думаю, вы были довольно близки, но вы пытались определить конфигурацию «заголовка» и добавить комбо к его элементам — вместо этого вы просто определяете элементы непосредственно в столбце:

columns: [{
    text: 'Combo Test',
    dataIndex: 'title',
    items: [{
        xtype: 'combobox',
        width: '100%',
        editable: false,
        valueField: 'title',
        displayField: 'title',
        queryMode: 'local',
        autoSelect: true,
        store: {
            data: [{
                "id": "1",
                "title": "Test1"
            }, {
                "id": "2",
                "title": "Test2"
            }, {
                "id": "3",
                "title": "Test3"
            }]
        },
        listeners: {
            select: function (combo, selectedRecord) {
                //we could just get the value from the combo
                var value = combo.getValue();
                //or we could use the selectedRecord
                //var value = selectedRecord.get('id');

                //find the grid and get its store
                var store = combo.up('grid').getStore();

                //we are going to change many records, we dont want to fire off events for each one
                store.beginUpdate();
                store.each(function (rec) {
                    rec.set('title', value);
                });
                //finish "mass update" - this will now trigger any listeners for saving etc.
                store.endUpdate();

                //reset the combobox
                combo.setValue('');
            }

        }
    }],
},

Фактическая установка значений происходит в прослушивателе выбора, как вы пытались - ключ в том, чтобы перебирать записи и вызывать набор для каждой из них:

//find the grid and get its store
var store = combo.up('grid').getStore();

//we are going to change many records, we dont want to fire off events for each one
store.beginUpdate();
store.each(function (rec) {
    rec.set('title', value);
});
//finish "mass update" - this will now trigger any listeners for saving etc.
store.endUpdate();

Я создал скрипт, чтобы показать, как это работает: https://fiddle.sencha.com/#view/editor&fiddle/1r01

person Theo    schedule 25.02.2017