Grid Header Filters

I applied this plug in .Every thing is workingfine except filter for "date field". I coded as follows
{xtype: 'datecolumn', text: "Note Date", dataIndex: 'NoteDate', align: 'center', sortable: true, filter:{
xtype:'datefield',emptyText : 'Filter for',format: 'Y-m-d', allowBlank: true},
renderer: Ext.util.Format.dateRenderer('Y-m-d')
}

Can u please suggest what needs to do for " date filter " functioanlity

I'm reading your code and you have a few references to CSS such as x-gridheaderfilters-filter-field. Can you paste the CSS somewhere? because it doesn't seem to be in ExtJS itself, at least, not that I can find.

Hi

I am using HedaerFilters plugin to get row inside the grid. I need Datepicker in yyyymmdd format . Can you please let me know how to get that one

filter: { xtype: 'datefield', format: 'Y-m-d'} is not filtering data for ext js 4.1 version. Please suggest what needs tp do

Please let me know whether this supports yyyy-mm-dd format for the date picker calender for date field. Also let me know remote filtering will supports or not

I think its a bug,

If my code has columns which are given width, instead of Flex, as i need Horizondal scroll bar to appear, also there is header filter assigned to each columns,

While Choosing a hidden column from "Select Column", the filters are not render properly,

but once i stretch the column, it gets rendered properly..

But than i tried changing the code grid filter plugin, since it handles only column.flex, previosuly, I tried adding a condition for column.width too and it worked fine

Code:

---

adjustFilterWidth: function()    {
            if(!this.containers) return;
                var columns = this.grid.headerCt.getGridColumns(true);       
                for(var c=0; c < columns.length; c++)
                {         
                        var column = columns[c];           
                        if (column.filter && column.flex)
                        { 
                                this.containers[column.id].setWidth(column.getWidth()-1);           
                        }
                        else if (column.filter && column.width)
                        { 
                                this.containers[column.id].setWidth(column.getWidth()-1);           
                        }
                  }
        }

---

i add dynamically columns in grid, follows:

PHP Code:

---

var column = Ext.create('Ext.grid.column.Column', {text: 'New Column'});gridView.headerCt.insert(gridView.columns.length, column);gridView.getView().refresh(); 


---

How dinamically add filters to headers column's, such code not work

PHP Code:

---

var column = Ext.create('Ext.grid.column.Column', {text: 'New Column', filter: {xtype: 'textfield'}});gridView.headerCt.insert(gridView.columns.length, column);gridView.getView().refresh(); 


---

Hi

i am trying to use the plugin to implement a multiselect combo header filter

PHP Code:

---


filter: {xtype: 'combo', multiSelect : true, store: ...} 


---

but i get 'TypeError: gs.data is undefined' on line 711

gs.snapshot = gs.data.clone();

Any idea?
Thanks!

i fixed it by adding

PHP Code:

---

remoteFilter: true 


---

to the grid store ...

Quote:

---

Originally Posted by l3chris

How do I implement/incorporate this and make it work?

Thanks

---

Add in your grid class the following rows:


- plugin for the grid:


plugins: [Ext.create('Ext.ux.grid.plugin.HeaderFilters')/*, ... other plugins here */]


- column configuration:


columns:[{ /*other configurations for your column:*/
header: 'Accepted', dataIndex: 'accepted', flex: 1,
/*filter plugin configuration:*/
filterable: true, filter:{xtype: 'textfield' /* i've used a simple textbox*/}}
/*, other columns here */]