How to give two indentical combo one on grid headr and one as grid column widget for store filter

Question

I have one widget column header by which I am selecting the value and filtering the grid store. I want exact the same on grid header as well. There for I am giving one combo with same values.

Here is my code for column header

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

I am creating widget type in column

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

I want if I select in header combo, it will directly select in widget combo as well. Can anyone explain how to get this. Thanks in advance

score 0 · Answer 1 · answered Feb 25 '17 at 14:23

So you basically need a combo box in your header, that changes record values - the fact that you have a widget column displaying a combo within the grid cells doesn't really matter here.

I think you were fairly close - but you were trying to define a "header" config and add the combo to its items - instead you just define items directly on the column:

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

        }
    }],
},

The actual setting of values happens in the select listener as you were trying - the key is to loop through the records and call set on each one:

//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();

I have created a fiddle to show this working: https://fiddle.sencha.com/#view/editor&fiddle/1r01

How to give two indentical combo one on grid headr and one as grid column widget for store filter

1 Answers1