I am having an issue where my search filter in tbar works correctly for all of my columns except for the tree column. When I enter something in the search filter for the tree column I do not get any results, except for the data already displayed in the view. However, when I scroll down the grid and view the full list (paging not yet implemented), then my search works!? So, my store is returning the filtered data...but only after I display it in the view...? I'm am still new to ExtJS just as FYI...
Here is what I have in my Store:
Code:
Ext.define('Dashboard.store.PositionExceptionStore', {
extend: 'Ext.data.TreeStore',
model: 'Dashboard.store.PositionExceptionModel',
//pageSize: 2,
defaultRootProperty: 'boxContents',
alias: 'store.positionstore',
remoteFilter: true,
remoteSort: true,
filters: [{
//TREE COLUMN FILTER
property: 'clientName',
operator: 'like',
value: '{clientName}',
disableOnEmpty:true
},
{
property: 'issueType',
operator: 'like',
value: '{issueType}',
disableOnEmpty:true
},
],
autoLoad: false,
root: {expanded: true, text: "", "data": [], loaded: true},
proxy: {
timeout: 60 * 1000,
type: 'ajax' ,
lazyFill: true,
reader: {
type: 'json',
root: 'boxContents'
}
}
});
In my view panel:
Code:
Ext.define('Dashboard.view.PositionExceptionPanel', {
extend: 'Ext.tree.Panel',
alias: 'widget.positionexceptionpanel',
id: 'positionException',
token: 'positions',
height: 500,
cls:'card',
stateful : true,
stateId : 'positionSummary',
bind: {
store: '{positionstore}'
},
...
tbar: [ {
//TREE COLUMN SEARCH FILTER
xtype: 'textfield',
bind: '{clientName}',
emptyText: 'Search',
fieldLabel: 'Client Name',
enableKeyEvents :true,
listeners: {
'keyup':function(obj,e,eOpts){
Ext.getCmp('positionException').getStore().filter('clientName',obj.value);
}
}
},' ',
{
xtype: 'textfield',
bind: '{issueType}',
emptyText: 'Search',
fieldLabel: 'Issue Type',
enableKeyEvents :true,
listeners: {
'keyup':function(obj,e,eOpts){
Ext.getCmp('positionException').getStore().filter('issueType',obj.value);
}
}
},' ',
...
getColumns: function() {
var columns = [
{
//TREE COLUMN
text: 'Client Name',
//groupable: true,
dataIndex: 'displayName',
stateId: 'displayName',
flex: 1,
xtype: 'treecolumn',
renderer: function(value, metaData) {
metaData.tdAttr = "data-qtip='"+metaData.record.data.client.name+"'";
metaData.record.data.clientName = metaData.record.data.client.name;
return metaData.record.data.client.name;
}
},
{
text: 'Issue Type',
renderer: this.stringRenderer,
dataIndex: 'issueType',
stateId: 'issueType'
},
...
}