since ExtJS 4.2 has an error in using filters on a buffered grid (infinite grid), I rewrote my code and now I just use a simple search field to allow the user to search the entire grid for data. as long as something is found, it works fine, but if nothing is found, then ext fails, the page map requested a range that it doesn’t have.
my javascript "includes"
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/BooleanFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/menu/ListMenu.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/menu/RangeMenu.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/FiltersFeature.js"></script>
<script type="text/javascript" src="/js/ext-4.2.0.663/examples/ux/grid/TransformGrid.js"></script>
<script type="text/javascript" src="/ASDB4/js/ext-4.2.0.663/examples/ux/form/SearchField.js"></script>
my shop:
this._store = Ext.create('Ext.data.Store', {
storeId: 'ActivityLogStore',
model: 'ActivityLogModel',
remoteGroup: true,
autoDestroy: true,
buffered: true,
remoteSort: true,
leadingBufferZone: 300,
pageSize: 100,
autoLoad: true,
proxy: {
type: 'ajax',
url: '~myurl~',
reader: {
root: 'data[0].sActivityLogsArr',
totalProperty: 'data[0].totalcount'
},
simpleSortMode: true,
simpleGroupMode: true,
groupParam: 'sort',
groupDirectionParam: 'dir',
filterParam: 'searchString',
encodeFilters: function (filters) {
return filters[0].value;
}
},
listeners: {
groupchange: function (store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
beforeload: function () {
Ext.getCmp('activityLogmanagergrid').getSelectionModel().clearSelections();
},
beforeprefetch: function (store, operation) {
if (operation.groupers && operation.groupers.length) {
delete operation.sorters;
}
},
load: function () {
Ext.getCmp('activityLogmanagergrid').verticalScroller.scrollTo(0);
}
}
});
my search box located on the toolbar:
this._moduleToolbar = {
xtype: 'toolbar',
itemId: 'activityLogmanagerToolbar',
items: [{
iconCls: 'icon-arrow_refresh',
text: '@menu_reload@',
itemId: 'btnReload',
scope: this,
handler: function () {
Ext.getCmp('activityLogmanagergrid').store.load();
}
}, {
iconCls: 'icon-cross',
text: '@menu_deleteAllActivityLog@',
itemId: 'btnDeleteAll',
scope: this,
handler: this.DeleteAllActivityLog
}, '->', {
width: 300,
fieldLabel: 'Search',
labelWidth: 50,
xtype: 'searchfield',
store: scope._store
}
]
};
please, help...