PDA

View Full Version : How to set width and height of a panel dynamically on click action



Ankit.Desai
18 Aug 2011, 7:24 AM
Hello,

I have following scenario. On my page there are two panels. On left panel, it has two 3 child panels and right panel is a gmap panel. Now, out of those 3 child panel one is a grid panel. I want to move right side gmap panel to left side as a 4th child panel of left panel and display a tab panel on right side.

So far I am able to display tab panel on right side

listeners: {
cellclick: function(grid, rowIndex, colIndex) {
Ext.getCmp('mainPanel').remove('mapPanel');
Ext.getCmp('mainPanel').add('tabPan');
Ext.getCmp('searchPanel').add('gSiteMap');
}
}

but unable to add gmap panel as a child panel of left side.
Ext.getCmp('searchPanel').add('gSiteMap');

Full code is as follow.


Ext.onReady(function(){
// tab pan
var googleMap = {
xtype: 'gmappanel',
id : 'gSiteMap',
width:624,
height:400,
zoomLevel: 14,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker:{ title: 'Central Park'}
},
markers:[{
lat: 42.339641,
lng: -71.094224,
marker: {title: 'Boston Museum of Fine Arts'}
},{
lat: 42.339419,
lng: -71.09077,
marker: {title: 'Northeastern University'}
}]
};
var infoPanel = new Ext.tab.Panel({
id:'tabPan',
title: 'Site Information',
height: 700,
width: '50%',
items:[{
//contentEl:'siteTabContentsDiv',
title:'Site'
},{
title: 'Pressure',
html: 'PRESSURE STUFF GOES HERE'
},{
title: 'Cluster',
html: 'CLUSTER STUFF GOES HERE'
}]
});


//tab pan end
//
var myData = [
{ siteId : "100", siteName : "Round Lake", address : "1000 Mateny Rd, Silver Spring, MD, 20904", county :"Montgomery"},
{ siteId : "101", siteName : "Virginia Beach", address : "1292 Middlebrook Rd, White Oak, MD, 20901", county :"College Park"}
];

// Generic fields array to use in both store defs.
var fields = [
{name: 'siteId', type: 'string'},
{name: 'siteName', type: 'string'},
{name: 'address', type: 'string'},
{name: 'county', type: 'string'}
];


// create the data store
var gridStore = new Ext.data.Store({
fields : fields,
data : myData
});




// Column Model shortcut array
var cols = [
{header: "Site ID", width: 90, sortable: true, dataIndex: 'siteId'},
{header: "Site Name", width: 120, sortable: true, dataIndex: 'siteName'},
{header: "Address", width: 250, sortable: true, dataIndex: 'address'},
{header: "County", width: 110, sortable: true, dataIndex: 'county'},
{
xtype:'actioncolumn',
width:50,
id:'actionCol',
items: [{
icon: '../imgs/edit.gif', // Use a URL in the icon config
tooltip: 'Edit'

}]
}
];


// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup : 'gridDDGroup',
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 600,
height : 325,
listeners: {
cellclick: function(grid, rowIndex, colIndex) {
Ext.getCmp('mainPanel').remove('mapPanel');
Ext.getCmp('mainPanel').add('tabPan');
var mPan = Ext.getCmp('mapPanel');
mPan.setWidth(624);
mPan.setHeight(200);
Ext.getCmp('searchPanel').add('gSiteMap');


}
}
});
var gPanel = Ext.create('Ext.panel.Panel',{
id:'mapPanel',
title: 'Site Map',
width:624,
height:400,
resizable: true,
closeAction: 'hide',
collapsible: true,
layout: 'fit',
collapsible: true,
draggable: true,
items: [googleMap]
});

Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
id:'mainPanel',
width: '100%',
height: 800,
title: 'NOAA Site Register',
layout: 'column',
items: [
{
xtype: 'panel',
title: '',
id:'searchPanel',
height: 700,
width: '50%',
items:[{xtype: 'panel',
title: 'Search Options',
id: 'win',
height: 100,
width: 624,
layout: 'fit',
collapsible: true,
draggable: true,
layout: 'fit',
contentEl: 'siteSearchOption'
},{
xtype: 'panel',
title: 'Filler Options',
height: 100,
width: 624,
layout: 'fit',
collapsible: true,
draggable: true,
contentEl:'siteFillerOption'
},{
xtype :'panel',
title: 'List Of Sites',
width : 624,
height : 100,
layout : 'fit',
collapsible: true,
draggable: true,
items : [grid]
}]
},gPanel
]
});

});


Hope to see some reply.

Ankit

Ankit.Desai
18 Aug 2011, 11:25 AM
alright, I got make it working by making some modification in listener code.


listeners: {
cellclick: function(grid, rowIndex, colIndex) {
var mPanel = Ext.getCmp('mapPanel');
mPanel.setHeight(200);
Ext.getCmp('searchPanel').add('mapPanel');
Ext.getCmp('mainPanel').remove('mapPanel');
Ext.getCmp('mainPanel').add('tabPan');
}
}


Above is the answer to my problem.

Now if I swap add and remove line of code (which logically seems right as remove and then add other place) as shown below , It would not solve my problem.


listeners: {
cellclick: function(grid, rowIndex, colIndex) {
var mPanel = Ext.getCmp('mapPanel');
mPanel.setHeight(200);
Ext.getCmp('mainPanel').remove('mapPanel');
Ext.getCmp('mainPanel').add('tabPan');
Ext.getCmp('searchPanel').add('mapPanel');
}
}


Any one know why ?

-Ankit