PDA

View Full Version : Ext js grid panel Filters not showing up in the menu



funnyfox
19 Feb 2015, 3:58 AM
When I apply grid filters, I don't see them popping up in the column headers menu. I am not sure what went wrong. I even don't see any errors in the console. Can someone throw some pointers

My ext js version 4.2.1



Ext.define('tz.ui.CGridPanel', {
extend: 'Ext.grid.Panel',
id : 'cGridPanel',
frame:true,
anchor:'100%',
width :'100%',
listeners: {
edit: function(editor, event){
}
},
initComponent: function() {
var me = this;
me.store = ds.cStore;
me.modifiedIds = new Array();

me.filters= {
ftype: 'filters',
encode: true,
local: true
};

me.features= [me.filters];

me.columns = [
{
xtype: 'actioncolumn',
width :40,
items : [{
icon : 'images/icon_edit.gif',
padding: 50,
scope: this,
handler : function(grid, rowIndex, colIndex) {
app.cMgmtPanel.showCli(rowIndex);
}
}]
},{
text : 'Unique Id',
dataIndex : 'id',
width : 70,
renderer: clientRender,
filterable: true
},{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name',
renderer: clientRender,
editor: {
xtype: 'textfield',
maxLength:50,
enforceMaxLength:true,
},
//When I open column header, I don't see any filters in the dropdown. Only Columns and sortings are seen
filter: {
"type": "string"
}
},{
xtype: 'gridcolumn',
dataIndex: 'comments',
text: 'Comments',
width:140,
renderer: clientRender,
editor: {
xtype: 'textarea',
height : 60,
maxLength:250,
enforceMaxLength:true,
}
},{
xtype: 'datecolumn',
dataIndex: 'created',
text: 'Created',
format: "m/d/Y H:i:s A",
width:150,
}
];
me.viewConfig = {
stripeRows: true
};

me.showCount = new Ext.form.field.Display({
fieldLabel: '',
});


me.dockedItems = [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add New',
iconCls : 'btn-add',
tabIndex:11,
handler: function(){
me.addClient();
}
},'-',{
xtype: 'button',
text: 'Save',
iconCls : 'btn-save',
tabIndex:11,
handler: function(){
me.saveClients();
}
},me.showCount
]
}
];

me.on('scrollershow', function(scroller) {
if (scroller && scroller.scrollEl) {
scroller.clearManagedListeners();
scroller.mon(scroller.scrollEl, 'scroll', scroller.onElScroll, scroller);
}
});

me.callParent(arguments);
},

plugins: [{
ptype : 'cellediting',
clicksToEdit: 2
}],

Gary Schlosberg
5 Mar 2015, 10:02 AM
You might have a look at the example from the docs and compare to see what might be missing or misconfigured:
http://docs.sencha.com/extjs/4.2.1/#!/example/grid-filtering/grid-filter-local.html