PDA

View Full Version : Infinite Scroll Grid



sandy52
20 Aug 2014, 7:51 PM
I tried to use buffered but my store not loading data. My code is :


Ext.define('HO.menu.view.MenuItemList', {
extend: 'LIB.DinerwareGrid',
alias: 'widget.menuItemList',
store: 'MenuItemData',
id: 'MenuItemListGridId',
//stateful: true,
//stateId: 'StateMenuItemData',
cellEditing: null,
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false
},
features: [{
ftype: 'grouping',
hideGroupedHeader: false
}],
initComponent: function () {
this.cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
this.store = Ext.create('HO.menu.store.MenuItemData', {
buffered: true,
leadingBufferZone: 300,


//trailingBufferZone: 5,
//leadingBufferZone: 5,
//purgePageCount: 0,
//scrollToLoadBuffer: 10,
//autoLoad:true
}).load();
Ext.apply(this, {
columns: [
{ header: LocaleMgr.i18n("item_name"), dataIndex: 'LongName', id: 'clm_menuitem_LongName', flex: 1, },
{ header: LocaleMgr.i18n("kitchen_print_name"), dataIndex: 'Description', id: 'clm_menuitem_Description', flex: 1 },
{ header: LocaleMgr.i18n("item_group"), dataIndex: 'PriceCategory', id: 'clm_menuitem_PriceCategory', flex: 1 },
{ header: LocaleMgr.i18n("revenue_class"), dataIndex: 'RevenueClassName', id: 'clm_menuitem_RevenueClassName', flex: 1 },
{
header: LocaleMgr.i18n("price"), dataIndex: 'DisplayPrice', id: 'clm_menuitem_DisplayPrice', flex: 1, renderer: this.priceCellChange,
editor: {
xtype: 'numberfield',
allowBlank: false,
name:'PriceDisplay',
height:30,
enableKeyEvents: true,
}
},
{ header: LocaleMgr.i18n("cost"), dataIndex: 'Cost', id: 'clm_menuitem_Cost', flex: 1, renderer: Ext.util.Format.usMoney },
{ header: LocaleMgr.i18n("entry_date"), dataIndex: 'EntryDate', id: 'clm_menuitem_EntryDate', flex: 1, hidden: true, renderer: Ext.util.Format.dateRenderer(DateUtils.LocalShortDateTimePattern) },
{
header: LocaleMgr.i18n("Active"), dataIndex: 'Active', id: 'clm_menuitem_Active', xtype: 'checkcolumn', formBind: true,
listeners: {
checkchange: function (thisRow, rowIndex, checked, eOpts) {
Ext.getCmp('MenuItemListGridId').getStore().sync();
}
}
},
{
xtype: 'actioncolumn', width: 45, items: [{ iconCls: 'lstScreenCat', tooltip: LocaleMgr.i18n("screen_categories") }]
}
],
//selModel: {
// selType: 'cellmodel'
//},
plugins: this.cellEditing,



});
this.callParent(arguments);
//this.getStore().load();
},

onAddClick: function () {
var rec = new LIB.data.model.dinerware.MenuItem();


this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
},
priceCellChange: function (value, metaData,r) {
var IsCheck = r.data['UseSetPrice'];
if (!IsCheck)
{ metaData.style = 'background-color:gray !important;'; }


return '$' + value;
}
});






Please tell what i am missing to enable infinite scrolling grid.

Thanks,
sandy

Gary Schlosberg
22 Aug 2014, 6:34 AM
Does it load if you make the store unbuffered?

sandy52
25 Aug 2014, 8:46 PM
Yeah, it load the data without buffered as I given pageSize 15