如何在网格头上给出两个缩进组合,一个作为商店过滤器的网格列小部件

时间:2017-02-24 08:09:46

标签: javascript extjs widget extjs6-classic

我有一个窗口小部件列标题,我通过它选择值并过滤网格存储。我想要在网格标题上完全相同。因为我给了一个具有相同值的组合。

这是我的列标题

的代码
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;
},

我想如果我在标题组合中选择,它也将直接在小部件组合中选择。任何人都可以解释如何得到这个。提前致谢

1 个答案:

答案 0 :(得分:0)

所以你基本上需要一个组合框来改变记录值 - 你在网格单元格中显示一个组合框的事实并不重要。

我认为你相当接近 - 但你试图定义一个“标题”配置并将组合添加到其项目中 - 而只是直接在列上定义项目:

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