PDA

View Full Version : Problem in using panel.layout.splitters



jksnu
9 Oct 2012, 1:45 AM
I am trying to use panel.layout.splitters to change the width and height of north and west splitter and also to change their background color on mouse over. But I am getting error like: panel.layout.splitters is undefined. I am using ExtJs 4.1.1. I am giving my code as follows:


Ext.require('*');
Ext.onReady(function(){

var screenHeight = Ext.getBody().getViewSize().height;
var screenWidth = Ext.getBody().getViewSize().width;

var panel2= Ext.create('Ext.panel.Panel',{
layout:'border',
id: 'layoutPanel',
defaults: {
bodyStyle: 'padding:15px',
collapseMode : "mini"
},
height: screenHeight,
width: screenWidth,

items: [
{
xtype: 'panel',
collapsible: false,
region: 'center'
},
{
xtype: 'panel',
title: 'Top Panel',
region: 'north',
collapsible: true,
split: true,
flex: 0.10
},
{
xtype: 'panel',
title: 'DSF Panel',
region: 'west',
collapsible: true,
collapsed: false,
id: 'westPanel',
split: true,
flex: 0.25
},
{
xtype: 'panel',
preventHeader: true,
region: 'east',
style : "z-index:40;",
collapsible: true,
collapsed: false,
floatable: false,
id: 'eastPanel',
flex: 0.25
}
],

listeners: {
afterrender: function(panel){
panel.layout.splitters.north.setHeight(15); // south, using height
panel.doLayout();
}
}
});

var p = Ext.create('Ext.container.Viewport', {
title:'test',
height: screenHeight,
width: screenWidth,
layout: 'card',
items: [
panel2
],
renderTo: Ext.getBody()
});
p.getLayout().setActiveItem(1);

});

bulletsoul
10 Oct 2012, 2:14 AM
It's undefined because panel does not exist. It's panel2 that you created.

jksnu
10 Oct 2012, 2:30 AM
Hi bulletsoul ,

Thanks for your reply. I have tested your suggestion but no luck. its not working. I am using panel.layout.splitters as I have passed the term 'panel' in the handler function and after debugging this on chrome, I found that it is giving the same object as panel2 with id 'layoutPanel' . So, I think problem is something else. I have also tried 'this' in place of panel in the handler function but again with no luck.

scottmartin
10 Oct 2012, 4:56 AM
hint: Were you using this in 4.07 and upgraded to 4.1.1?

Scott.

jksnu
10 Oct 2012, 7:19 PM
No. we are using ExtJS 4.1.1 from starting.