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);
});
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);
});