Extjs Grid Filter Row Field Selection

[bekir.kaplan]

I use Grid header filters on http://www.sencha.com/forum/showthre...header-filters but unfortunately I couldn't select textfield or any other type of sort input area without clicking right button and then escape button.

For example I want to filter a column by textfield and I have a textfield under grid column header text when I click the textfield the column header sort asc and desc to whole column and I didn't select textfield area to write something to search. But if I click first right click to select textfield then click esc button I can write somethings to search in textfield area.

plugins: [new Ext.ux.grid.GridHeaderFilters()],

and html created on browser is:

<td id="ext-gen1119" class="x-grid3-hd x-grid3-cell x-grid3-td-1 sort-desc"    style="width: 71px; -moz-user-select: text; vertical-align: top;">
    <div class="x-grid3-hd-inner x-grid3-hd-1" style="" unselectable="on">
    <div id="ext-comp-1571" class=" x-ghf-filter-container" style="width: 70px;">
    </td>

because of x-ghf-filter-container under the id="ext-gen1119" so I can't click without clicking id="ext-gen1119"
Thanks

[scottmartin]

Have you contacted the author? (posted in the mentioned thread) .. You will need to provide more code concerning your grid setup. Perhaps you are over nesting or something simple.

Do you have the UX included in your uses?

Scott.

[bekir.kaplan]

Example Code is Here, grid created dynamically

Creating elements for grid.

/* array data */
    var k = 0;
    var splitArr = new Array();
    var gridElements = new Array();
    var showElements = new Array();
    
    for(var i=0; i<records.length; i++)
    {    
        splitArr[i] = records[i].split(";");
        
        /* Create Grid Fields */
        var grEl = new Object();
        if(splitArr[i][0]){
            grEl.name = clsString(splitArr[i][0]);
        
            if(splitArr[i][2]){
                grEl.type = clsString(splitArr[i][2]);
            }
            gridElements[i] = grEl;
            
            
            /* Create Fields Display */
            if(splitArr[i][1]){
                var shEl = new Object();
                shEl.dataIndex = clsString(splitArr[i][0]);
                shEl.header = splitArr[i][1];
                
                if(splitArr[i][3]){
                    var filType = clsString(splitArr[i][3]);
                    var filName = clsString(splitArr[i][4]);
                    shEl.filter  = {xtype: filType, filterName: filName};
                }
                
                showElements[k++]=shEl;
            }
            
        }
    }

gridUi= Ext.extend(Ext.grid.GridPanel, {
        title : gridTitle,
    //    bodyStyle : "height: 100%",
        height : gridHeight,
        frame : true,
        iconCls: iconClsData,
        loadMask : {
            msg : language.UY011
        },
        viewConfig : {
            forceFit : false    
        },
        stripeRows : false,
        plugins: [new Ext.ux.grid.GridHeaderFilters()],

        initComponent : function() {
            
            /* Load Grid Elements */
            var recgridName = new Ext.data.Record.create(gridElements);
    
            var storegridName = new Ext.data.JsonStore({
                autoDestroy : true,
                url : ajaxRequest,
                root : 'data',
                totalProperty: 'totalCount',
                fields : recgridName,
                pruneModifiedRecords : true,
                autoLoad : false
            });
            this.store = storegridName;
    
//            var filterRow = new Ext.ux.grid.FilterRow();
//            this.plugins = [filterRow];
        
            this.bbar = loadPaging(storegridName, 20);
            
            if(tbarRightElements && !tbarLeftElements){
                this.tbar = ['','->',tbarRightElements];
            }
            if(!tbarRightElements && tbarLeftElements){
                this.tbar = [tbarLeftElements,'->',''];
            }
            if(tbarRightElements && tbarLeftElements){
                this.tbar = [tbarLeftElements,'->',tbarRightElements];
            }
        
            this.cm = new Ext.grid.ColumnModel({
                defaults : {
                    sortable : true
                },
                
                /* Load Showed Elements */
                columns :     showElements
            });
            this.selModel = new Ext.grid.RowSelectionModel({
                singleSelect : true
            });
            this.view = new Ext.grid.GridView({
                forceFit : true
            });
            
            gridUi.superclass.initComponent.call(this);
        },
        getSelected : function() {
            return this.selModel.getSelected();
        },
        getSelectedData : function() {
            return this.getSelected().data;
        },
        removeRecord     : function(rec) {
            this.store.remove(rec);
        },
        loadStore     : function() {
            this.store.load.defer(500, this.store);
        },
        insertNewRecord     : function() {
            this.store.insert(0, new this.store.recordType());
        },
        stopEditing: function () {
            if(this.editor){this.editor.stopEditing();}
        },
        startEditing: function (index) {
            if(this.editor){this.editor.startEditing(index);}
        },
        hasSelected : function() {
            if (this.selModel.getSelected() == null) {
                return false;
            } else {
                return true;
            }
        }
    });
    
    gr = Ext.extend(gridUi, {
        initComponent : function() {
            gr.superclass.initComponent.call(this);
        }
    });
    
Ext.reg("'"+gridName+"'", gr);

[scottmartin]

Can you try hard coding the columns (for testing) and creating/populating your store before the grid? It may be a timing issue.

Scott.

[bekir.kaplan]

Yes I did that, we already use hard coding but they have the same problem.
hata.PNG
when I hold my mouse on polyclinic header the sorting button appears and I didn't click properly with my left mouse click.