ExtJS 4 hbox (toolbars) 2
Trying to get a window with vbox/hbox layout to automatically compute a reasonable size.
by kzoon
HTML
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css">
CSS
/* tabPanel header*/
.simple-selector .x-tab-bar-top{
margin-right:60px!important;
}
/* */
.simple-selector .x-panel-body{border-top:0px!important;}
.simple-selector .selected-panel{
margin-top:12px!important;
/*border-width:1px!important;
border-style:solid!important;*/
}
.icon-selector-add {
background-image:url('../resources/themes/images/default/form/trigger.gif') !important;
}
JavaScript
Ext.onReady(function() {
var treestore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
text: "World",
expanded: true,
children: [
{
text: "North America",
leaf: false},
{
text: "Asia",
leaf: false},
{
text: "South America",
leaf: false},
{
text: "Europe",
leaf: false}
]}
]
}
});
new Ext.window.Window({
resizable: true,
height: 450,
width: 700,
cls: 'simple-selector',
layout: {
type: 'vbox'
//,align:'stretch'
},
buttons: [{
text: "Ok"},
{
text: "Apply"},
{
text: "Cancel"}],
bodyStyle: 'padding:10px;',
items: [
{
xtype: 'combobox',
fieldLabel: 'Dimension'},
{
xtype: 'combobox',
fieldLabel: 'Stored Selection'},
{
xtype: 'combobox',
fieldLabel: 'Hierarchy'},
{
xtype: 'combobox',
fieldLabel: 'Label'},
{
xtype: 'tbspacer',
height: 15},
{
id: 'detailsContainer',
xtype: 'container',
width: '100%',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
id: 'mytabpanel',
xtype: 'tabpanel',
title: false,
border: 0,
plain: true,
flex: 5,
items: [
{
xtype: 'panel',
...