PDA

View Full Version : Splitter doesn't work on vbox with 3 panels inside middle panel never resizes itself



sunita_shukla
21 Jan 2013, 2:05 AM
<!DOCTYPE html>
<html>
<!--
Created using /
Source can be edited via /owofez/5/edit
-->
<head>
<meta charset=utf-8 />
<title>Test VBOX</title>
<script src="http://toolkits.ms.com/webaurora/core.js"></script (http://toolkits.ms.com/webaurora/core.js%22%3E%3C/script)>
<script>
var Module = new WebAuroraEnvironment('dev');
Module.load('ria', 'ext', '4.1.1');
Module.getLoader('ria', 'ms-branding', 'ext-4.1.1').load('mslight');
</script>
</head>
<body>
<script>

Ext.application({
name: 'Resizeable Grids',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: {
// Stack panels verically
type: 'vbox',
// Give them 100% width
align: 'stretch',
},
items: [{
xtype: 'panel',
title: 'panel 1',
// Make panels of equal size
flex: 1,
//collapsible: true,
html : 'List of items will go here'
},{
// Insert split between panels
xtype: 'splitter', height: 5
},{
xtype: 'panel',
flex: 1,
//collapsible: true,
title: 'panel 2',
html : 'List of items will go here'
},{
xtype: 'splitter', height: 5
},{
xtype: 'panel',
flex: 1,
//collapsible: true,
title: 'panel 3',
html : 'List of items will go here'
}]
});
}
});

</script>
</body>
</html>

Here is the code that I am trying, any help will be appreciated

mitchellsimoens
23 Jan 2013, 10:13 AM
It's only really supported in a border layout. Anything else you would have to handle.