[B3] BufferStore and Filtering
I've hooked up a Grid panel to a BufferStore with the vertical paging scroller, and generally speaking, things work. However, when I filter the grid using the filter grid UI feature in examples, which also works, if the number of filtered rows exceeds the grid height, the scroll bar doesn't appear unless I invoke invalidateScroller() on the Grid panel.
My workaround for this, since I already have an event hooked to the store's load event, is to invalidate the scroller on load, and the scrollbar appears consistently.
PHP Code:
// Not all methods are included here - this is really intended to show how my Grid panel is wired.
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', './ext-4.0-beta3/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
app.getRoot = function(_dataURL) { return "Grid."; }
// Register data Model (unique name based on DisplayItem) with ModelManager
// Customize JSON field mappings here
// If mapping property is not defined for a field, it is assumed that
// the field points to a JSON element with the same name as the field
if (!Ext.ModelManager.getModel('Contacts')) {
Ext.ModelManager.registerType('Contacts', { fields: [
{ name: "RecordNumber" , mapping: "RecordNumber" , type: "string" }
, { name: "TypeDescr" , mapping: "TypeDescr" , type: "string" }
, { name: "Number" , mapping: "Number" , type: "string" }
, { name: "FullName" , mapping: "FullName" , type: "string" }
, { name: "CompanyName" , mapping: "CompanyName" , type: "string" }
, { name: "UserName" , mapping: "UserName" , type: "string" }
, { name: "JobTitle" , mapping: "JobTitle" , type: "string" }
, { name: "FullAddress" , mapping: "FullAddress" , type: "string" }
, { name: "PhoneNumber" , mapping: "PhoneNumber" , type: "string" }
, { name: "StatusDescr" , mapping: "StatusDescr" , type: "string" }
, { name: "Children" , mapping: "Children" , type: "string" }
, { name: "ContactID" , mapping: "ContactID" , type: "string" }
, { name: "DataID" , mapping: "DataID" , type: "string" }
]});
}
// Define Columns to be displayed in the Grid
// Customize visibility, renderers, sortable, filterable, header text
// Add/Remove a column definition when a new field is added/removed to/from the Model
var columns = [
new Ext.grid.RowNumberer()
, { dataIndex: "TypeDescr" , text: "Type" , hidden: false, sortable: true }
, { dataIndex: "Number" , text: "Number" , hidden: false, sortable: true
, renderer: app.renderCellContextMenu }
, { dataIndex: "FullName" , text: "Name" , hidden: false, sortable: true }
, { dataIndex: "CompanyName" , text: "Company" , hidden: false, sortable: true }
, { dataIndex: "UserName" , text: "User Name" , hidden: false, sortable: true }
, { dataIndex: "JobTitle" , text: "Job Title" , hidden: false, sortable: true }
, { dataIndex: "FullAddress" , text: "Address" , hidden: false, sortable: true }
, { dataIndex: "PhoneNumber" , text: "Phone" , hidden: false, sortable: true }
, { dataIndex: "StatusDescr" , text: "Status" , hidden: false, sortable: true }
, { dataIndex: "Children" , text: "" , hidden: true , sortable: false
, renderer: app.renderCellContextMenu }
];
// Define filters against the column set / data Model
var filters = {
ftype: 'filters'
, encode: false
, local: false
, filters: [
{ dataIndex: "TypeDescr" , type: "string" }
, { dataIndex: "Number" , type: "string" }
, { dataIndex: "FullName" , type: "string" }
, { dataIndex: "CompanyName" , type: "string" }
, { dataIndex: "UserName" , type: "string" }
, { dataIndex: "JobTitle" , type: "string" }
, { dataIndex: "FullAddress" , type: "string" }
, { dataIndex: "PhoneNumber" , type: "string" }
, { dataIndex: "StatusDescr" , type: "string" }
]
};
// Define Store object for the Grid
var store = new Ext.data.BufferStore({
, model: 'Contacts'
, sorters: []
, autoLoad: false
, remoteSort: true
, pageSize: 100
, proxy: {
type: 'ajax'
, url: _dataUrl
, extraParams: { format: 'JSON' }
, encodeSorters: app.encodeSorters
, reader: {
root: getRoot( _dataUrl ) + 'data'
, totalProperty: getRoot( _dataUrl ) + 'total'
}
}
});
// Define the Grid itself
var grid = new ONEWARE.GridPanel(Ext.apply({
store: store
, columns: columns
, features: [filters]
, verticalScrollerType: 'paginggridscroller'
, disableSelection: true
, invalidateScrollerOnRefresh: true
, viewConfig: { trackOver: false }
, getRoot: getRoot
}, params));
store.guaranteeRange(0, 99);
stevil
