View Full Version : How to delay work done by component under tab, when tab not yet visible?

21 Mar 2011, 1:38 PM
I had the impression that component under tab will delay work, but I have a Grid under a tab not yet selected and its data store is loaded when the application start.

How can I delay as much work as possible, at least delaying loading the data from the data store?

var gridTab = new Ext.TabPanel({
region: 'center',
height: 275,
activeTab: 0,
frame: true,
items: [

xtype: 'employeegrid',
title: 'ExtJS BufferView Grid All Data In'


Ext.ux.EmployeeGrid = Ext.extend(Ext.grid.GridPanel, {
title: 'Employees',
pageSize: 5000,
frame: true,
stripeRows: true,

initComponent: function () {
viewConfig = {
autoFill: true
this.pager = null;
this.view = new Ext.ux.grid.BufferView({
scrollDelay: 30,
cleanDelay: 50000
this.store = new Ext.data.DirectStore({
directFn: Employees.Get,
paramsAsHash: false,
paramOrder: 'start|limit|sort|dir|filterName|filterSalary',
root: 'data',
idProperty: 'Id',
totalProperty: 'total',
sortInfo: {
field: 'Name',
direction: 'ASC'

21 Mar 2011, 1:48 PM
I found how to delay the store -> http://stackoverflow.com/questions/2235677/in-extjs-how-do-i-load-a-store-when-i-display-a-grid

So set autoLoad to false, then use
grid afterRender event to do
this.getStore().load({ ...

But I still think that calling the grid initComponent before the tab is selected is wrong.

22 Mar 2011, 4:21 AM
You can set your store reference in another template method like afterrender or onShow:

Ext.ux.EmployeeGrid = Ext.extend(Ext.grid.GridPanel, {
onShow : function(){
this.store = ....
Ext.ux.EmployeeGrid.superclass.onShow.apply(this, arguments);