PDA

View Full Version : Need Help



gajanan.borde
6 Dec 2010, 12:27 AM
In my application I used border layout,and I want to add two panels(A and B) in a container panel which is at the west region with card layout. In my case only one panel can be visible at a time.

Panel A is my default panel visible. But when I make panel B visible I want to increase width of that panel only.Though width of panel B is increasing, as panel B is included in a container, I can't actually see its width increased. How can I increase width of Panel B along with container panel making panel B as an overlay(Floating on center region).

Here is my Code.

var A= new Ext.Panel({
itemId: 'first',
//autoWidth: false,
bodyStyle:'background:url(../domainname/images/bar.png) no-repeat;',
width:50,
listeners: {
render: function(c){
c.body.on('click', function(){
document.getElementById('westRegionId').style.width='20px;';
Ext.getCmp('westRegionId').getLayout().setActiveItem('sec');
})
}
}
});

var B= new Ext.Panel({
id:'jxSecId',
itemId: 'sec',
//autoWidth: false,
width:200,
bodyStyle:'background:url(../domainname/images/drawer.png) no-repeat;z-index:2;',
listeners: {
render: function(c){
c.body.on('click', function(){
document.getElementById('westRegionId').style.width='200px;';
Ext.getCmp('westRegionId').getLayout().setActiveItem('first');
})
}
}
});

var westActionPane = new Ext.Panel({
id:'westRegionId',
region:'west',
width:20,
autoWidth: false,
layout:'card',
activeItem: 0,
items:[A,B]
});


Please do the needful.