Hi all, I have a gridpanel in a form panel in a window. I am able to render the window with the form ,but not the grid panel. the gridpanel is a child item of the form panel. I have been trying to figure out this problem since 4 days..driving me nuts.any kind helps is really appreciated. here is my window --------------------- MailShop: function(){ parent = this; //create widow to hold the grid this.desktop = this.app.getDesktop(); this.win = this.desktop.getWindow('ShopMail'); this.defaultType = '1'; if(!this.win){ this.win = this.desktop.createWindow({ id : 'ShopMail', title : Shop Mail List', border : false, currentPage : 1, items :[ { xtype: 'form', id : 'ShopMailfrm' , items: [ { xtype: 'textfield', name: 'mailFrom', width: 710, anchor: '100%', fieldLabel: 'Mail from', vtype : 'email', allowBlank : false, enableKeyEvents : true }, { xtype: 'textfield', width: 673, anchor: '100%', name : 'mailTo', fieldLabel: 'Mail To', vtype : 'email', allowBlank : false, enableKeyEvents : true },{ xtype: 'textfield', width: 673, anchor: '100%', name : 'subject', fieldLabel: 'Subject', allowBlank : false, enableKeyEvents : true }, { grid:this.showShopList } ]}, ] }); } this.win.show(); WinWait.show(); }, ------------------------------------------------------------- Here is function named "showShopList " that is called to build up the grid panel showShopList : function(){ var parent = this; // create a reference recordFields which is an array of fields that mapped to raw data points this.recordFields = [ { name: 'productType', mapping: 'type' },{ name: 'productName', mapping: 'name' },{ name: 'dateProduction', mapping: 'date_production' },{ name: 'expiryDate', mapping: 'date_expiry }]; //set configuration for your Jsonstore which will fetch data remotely this.remoteJsonStore = new Ext.data.JsonStore({ fields : this.recordFields, url : 'eshop/shop/getproduct.php', totalProperty : 'total', successProperty: 'success', root : 'rows', id : 'ShopRemoteStore', autoLoad : false, remoteSort : true, baseParams :{ product: id } }); this.selModel = new Ext.grid.CheckboxSelectionModel({ singleSelect :false, checkOnly :true }); //create columnmodel and map daraIndexes to column this.columnModel = new Ext.grid.ColumnModel( [ this.selModel,{ header: 'Type', dataIndex: 'productType', sortable: true, editable: false, id: 'cmType' },{ header: 'Name', dataIndex: 'productName', sortable: true, editable: false, id: 'cmName' },{ header: 'Production Date', dataIndex: 'dateProduction', sortable: true, editable: false, id: 'cmProdDate', width:150, align:'right' },{ header: 'expiry Date', dataIndex: 'expiryDate', sortable: true, editable: false, id: 'cmExpiryDate', width:100, align:'right' } ] ); this.pagingToolBar = new Ext.PagingToolbar({ id : 'pagingtoolbar', store : this.remoteJsonStore, pageSize : 50, displayInfo : true, listeners : { 'change' : function( el, pageData ) { parent.win.currentPage = pageData.activePage; } } }); this.gridView = new Ext.grid.GridView( {forceFit : true} ); this.gridlist= new Ext.grid.GridPanel({ id : 'ShopGridList', columns : this.columnModel , view : this.gridView, store : this.remoteJsonStore, loadMask : new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}), bbar : this.pagingToolBar, stripeRows : true }); Ext.StoreMgr.get('ShopRemoteStore').load({ params : { start : (this.win.currentPage-1)*10, limit : 10 } }); },