PDA

View Full Version : Problem in Adding/ Removing Grid dynamically in Table Layout



extjscrazy
10 Nov 2009, 2:10 PM
In my application, Grids can be added to the Table layout on Click of the "Add" button and can be removed. The problem is when I remove the grid, I am seeing a blank white space. I am unable to remove the TD. I want to confirm whether I am moving in the right direction ie using Table layout to add Grid. Is there any other layout in Extjs available to perform this functionality ie to add three grids in every row.

Please find my code below:


new Ext.Viewport({
layout :'border',
id :'viewport',
autoScroll:true,
defaults :{
height : 100,
width :100
},
items : [ {
xtype : 'container',
region : 'center',
id : 'centerRegion',
layout : 'anchor',
autoScroll:true,
layoutConfig: {
rows : 5
},
items :[{
xtype : 'container',
anchor : '100% 70%',
id : 'addGrid',
layout : 'table',
autoScroll:true,
layoutConfig:{
columns : 4,
autoWidth:true,
autoHeight:true
},
defaults :{
height : 150,
width : 250,
frame : true
}
},
{
anchor : '100% 10%',
items : [formCriteria]
}
]
}]
});
//Form Panel : Button : ADD,EXECUTE QUERY and RESET
var centerGrid;
var ct = 0;
var formCriteria = new Ext.FormPanel({
layout : 'hbox',
id : 'myFormPanel',
align : 'center',
buttons: [{
text: 'Add',
handler : function(){

centerGrid = Ext.getCmp('addGrid');
centerGrid.add({
id : ct+'grid',
xtype : 'grid',
layout : 'fit',
ddGroup : 'dd123',
isTarget : true,
enableDD : false,
closable : true,
store : {
xtype : 'arraystore',
autoLoad : true,
storeId : ct+'store',
fields : field
},
viewConfig : {
forceFit : true,
fitContainer : true,
fitToFrame : true
},
columns: [
{
id :'company',
width : 250,
sortable : true,
dataIndex : 'company'
}
],
stripeRows : true,
autoExpandColumn: 'company',
height :100,
width :250,
tbar : [

{
text :'X',
style :'align:right',
handler : function(but){
var grid = but.ownerCt.ownerCt;
//(Ext.getCmp('addGrid')).remove(grid);
grid.destroy();
}
}
]
});
ct++;
centerGrid.doLayout();
}