We Keep Coding

vbox layout is not working in border layout

I have a requirment where i need to put one item inside vbox layout. my item is having a border layout and west and center reason having some vbox layout componet. below I am putting the code of item. In this main panel is border layout and reason having vbox but this is not working.
my Code :
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
layout : 'fit',
split: true,// enable resizing
margin: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margin: '5 0 0 5',
width: 100,
layout: 'vbox',
height: 200,
items:[{
title: 'South Region is resizable',
xtype: 'panel',
height: 100
},{
title: 'ss Region is resizable2',
xtype: 'panel',
height: 100
}],
collapsible: true, // make collapsible
id: 'west-region-container',
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
width : 300,
layout: 'vbox',
margin: '5 5 0 0',
items:[{
title: 'South Region is resizable',
xtype: 'panel',
height: 50,
},
{
title: 'ss Region is resizable',
xtype: 'panel',
height: 10
}]
}],
renderTo: Ext.getBody()
});
Below is my Actual code where I am using vboxLayout and then border layout is one of the item of this. I am getting Layout run failed error
Ext.define('myApp.myData.myApp', {
extend: 'Ext.container.Container',
alias: 'widget.myApp',
controller: 'myAppController',
items: [{
xtype: 'label',
margin: '5 10 0 0',
height: 28
},
{
xtype: 'panel',
itemId: 'mainPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
margin: '3 10 2 5'
},
items: [
{
xtype: 'myPanel'
},{
xtype : 'panel',
height: 500,
width : 300,
layout: 'border',
items :[{
xtype : 'panel',
layout: {
type: 'vbox',
align: "stretch"
},
items :[{
xtype: 'myPanel1'
},{
xtype : 'myPanel2'
}]
},{
xtype : 'panel',
layout: {
type: "vbox",
align: "stretch"
},
items :[{
xtype: 'myGrid'
}]
}]
}
]
}]
});
Any help will appriciate.

Change your layout to:
layout: {
type: "vbox",
align: "stretch"
}
And put flex on child items:
flex: 1

Flow layout with nested container

In my Ext JS 6 app, I'm trying to create a flow layout with 3 containers, with the middle container having nested items that need to continue with the flow layout. I can get this working if I add the middle container's items directly, but I don't want to do that... I want them to be separate.
Here's an example:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
height: 300,
width: 300,
scrollable: true,
renderTo: Ext.getBody(),
title: 'Not properly working',
bodyPadding: 10,
layout: {
type: 'column'
},
items: [{
xtype: 'panel',
title: 'start',
width: 100,
height: 50
}, {
xtype: 'container',
defaults: {
xtype: 'panel',
title: '1',
width: 50,
height: 50,
style: 'float: left;'
},
items: [{}, {}, {}, {}, {}, {}]
}, {
xtype: 'panel',
title: 'end',
width: 100,
height: 50
}]
});
Ext.create('Ext.panel.Panel', {
height: 300,
width: 300,
scrollable: true,
renderTo: Ext.getBody(),
bodyPadding: 10,
title: 'This is how it should look',
layout: {
type: 'column'
},
items: [{
xtype: 'panel',
title: 'start',
width: 100,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: '1',
width: 50,
height: 50
}, {
xtype: 'panel',
title: 'end',
width: 100,
height: 50
}]
});
}
});
So my flow layout should look like this (depicted in the example's 2nd panel):
start 1 1 1 (newline)
1 1 1 end
I got the idea from this thread, but that doesn't have a nested item like in my example. Also tried to use this thread's advice, but still no dice.
I think the issue is with the auto layout for the middle container, as it sets the width to 100% for its child div, but I'm not sure how to fix this... any advice?

How to switch content of a center panel in by check and uncheck checkbox

I have buttons in west region and by clicking on buttons I am getting different charts in center region(using border layout). In last button click, I created a window with checkbox. When I check the box I want to destroy the the chart in center and create a new chart with controllpanel : true. If it is unchecked then it should be controllpanel:false.
My code for regions is
Ext.define('MyApp.view.main.Main', {
requires: ['Mgo.*', 'MyApp.view.main.MainModel', 'Ext.plugin.Viewport'],
extend: 'Ext.container.Container',
ui: 'navigation',
height: '100%',
width: '100%',
layout: 'border',
floating: true,
controller: 'MainController',
items: [{
xtype: 'toolbar',
height: 50,
region: 'north',
split: true, // enable resizing
//margin: '0 5 5 5',
items: [{
xtype: 'image',
width: 160,
src: 'resources/images/newpowered.gif',
style: "height: 30px; left: auto; right: 1066px; top: 20px; margin: 0px;"
}, '->', {
xtype: 'image',
height: 30,
width: 30,
tooltip: 'About',
position: 'right',
margin: '0 4 0 0',
hidden: false,
src: 'resources/images/a.png'
}]
}, {
title: 'Charts',
region: 'west',
xtype: 'panel',
width: 230,
split: true,
items: [{
xtype: 'button',
height: 50,
width: 220,
text: 'Line Chart',
name: 'linechart',
icon: 'resources/images/line.png',
iconAlign: 'left',
textAlign: 'left',
scale: 'large',
margin: '5 0 0 5',
handler: 'onLineChartClick'
}, {
xtype: 'button',
height: 50,
width: 220,
text: 'Bar Chart',
textAlign: 'left',
name: 'barchart',
icon: 'resources/images/bar.png',
iconAlign: 'left',
scale: 'large',
margin: '5 0 0 5',
handler: 'onBarChartClick'
}, {
xtype: 'button',
height: 50,
width: 220,
text: 'Settings',
textAlign: 'left',
name: 'settings',
icon: 'resources/images/settings.png',
iconAlign: 'left',
scale: 'large',
margin: '5 0 0 5'
}]
}, {
xtype: 'panel',
region: 'center',
id: 'abc',
layout: 'card',
border: true,
items: [{
xtype: 'mgoPanel', // My own xtype
itemId: 'igp1',
showZoom: false,
showLegends: true,
showSlider: false,
showDataGrid: true,
chartType: 'groupedBoxPlot',
controlPanel:false, // this should be true when checkbox is checked
orientation: 'x'
}, {
xtype: 'mgoPanel',
itemId: 'igp4',
showZoom: false,
showLegends: true,
showSlider: false,
showDataGrid: true,
chartType: 'line',
controlPanel:false, // this should be true when checkbox is checked
orientation: 'x'
}]
}]});
Handler for Checkbox is
Ext.define('MyApp.view.main.CheckBox', {
extend: 'Ext.form.Panel',
alias: 'widget.checkboxPanel',
height: 300,
width: 400,
layout: 'fit',
bodyPadding: 10,
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Select Panels',
defaultType: 'checkboxfield',
items: [{
boxLabel: 'Control Panel',
name: 'ctrlPanel',
inputValue: '1',
id: 'checkbox1',
handler: function(field, value) {
debugger;
if (this.checked == true) {
var xyz = Ext.getCmp('abc').items.items;
for (i = 0; i <= xyz.length-1; i++) {
xyz[i].destroy(); // destroying center element. Need to true controllpanel
}
}
}
}]
}],
renderTo: Ext.getBody()});
Any help will apreciated.

To remove elements and replace with new ones:
handler: function(field, checked) {
var centerContainer = Ext.getCmp('abc');
Ext.suspendLayouts();
centerContainer.removeAll();
centerContainer.add([{
xtype: 'mgoPanel', // My own xtype
itemId: 'igp1',
showZoom: false,
showLegends: true,
showSlider: false,
showDataGrid: true,
chartType: 'groupedBoxPlot',
controlPanel: checked,
orientation: 'x'
}, {
xtype: 'mgoPanel',
itemId: 'igp4',
showZoom: false,
showLegends: true,
showSlider: false,
showDataGrid: true,
chartType: 'line',
controlPanel: checked,
orientation: 'x'
}]);
Ext.resumeLayouts(true);
}

ExtJS viewport one item accessing another item

I have create a viewport in ExtJS with several layouts (west, center, north). One of these is a grid to which I've added a click handler. This click is supposed to open an HTML or PHP file in one of the layout, but I am not sure how to access the item in the center from the click handler in the west.
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
border:false,
collapsible: false,
resizable:false,
title: 'North',
split: true,
height: 30,
html: 'north'
},{
region: 'west',
collapsible: true,
title: 'Navigation',
split: true,
width: '10%',
xtype: 'gridpanel',
itemid:'projectgrid',
hideHeaders: true,
columns: [{header: 'NID', dataIndex: 'NavName', flex: 1}],
store: navStore,
listeners: {
itemclick: function(dv, record, item, index, e) {
alert(record.get('NavPage'));
}
}
},{
region: 'center',
layout: 'border',
border: false,
id: 'renderArea',
items: [{
region: 'center',
html: 'center center',
title: 'Center',
items: [cw = Ext.create('Ext.Window', {
xtype: 'window',
closable: false,
minimizable: true,
title: 'Constrained Window',
height: 200,
width: 400,
constrain: true,
html: 'I am in a Container',
itemId: 'center-window',
minimize: function() {
this.floatParent.down('button#toggleCw').toggle();
}
})]
}]
}]
});

If you give the component you want to access an itemId of foo, you can do something like this, navigate up to the viewport, then down to find the appropriate viewport child.
dv.up('viewport').down('#foo')

How to make an ExtJS table layout have percentage instead of absolute values for height and width?

Using Ext.Panel and the table layout, I was able to create a layout just the way I want. However, how do I change this code so that I can define the widths and heights proportionally?
e.g. the table should not be 800 pixels but 100% of the screen width, and each box not 200 pixels but 25%.
here is the code:
<script type="text/javascript">
clearExtjsComponent(targetRegion);
var table_wrapper2 = new Ext.Panel({
id: 'table_wrapper2',
baseCls: 'x-plain',
renderTo: Ext.getBody(),
layout:'table',
layoutConfig: {columns:2},
defaults: {
frame:true,
width:200,
height: 200,
style: 'margin: 0 10px 10px 0'
},
items:[{
title:'Shopping Cart',
width: 400,
height: 290,
colspan: 2
},{
title:'Invoice Address',
width: 190,
height: 100
},{
title:'Delivery Address',
width: 200,
height: 100
}
]
})
var table_wrapper = new Ext.Panel({
id:'table_wrapper',
baseCls:'x-plain',
renderTo: Ext.getBody(),
layout:'table',
layoutConfig: {columns:4},
defaults: {
frame:true,
width:200,
height: 200,
style: 'margin: 10px 0 0 10px'
},
items:[{
title:'Orders',
width: 810,
colspan: 4
},{
title:'Customer Information',
width: 400,
height: 400,
colspan: 2
},{
//title:'Shopping Cart',
frame: false,
border: false,
width: 400,
height: 400,
colspan: 2,
items: [ table_wrapper2 ]
}
]
});
replaceComponentContent(targetRegion, table_wrapper);
hideComponent(regionHelp);
</script>

Instead of :
layout:'table',
layoutConfig: {columns:2},
try this :
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
width: '100%',
height: '100%'
}
}
},

Like I said in the reply to your other thread using vbox and hbox layouts might be a little easier for you if you want to do relative positioning. Also, if you want to stretch things to your window, put it in a Viewport, that automatically uses you entire window.
You might want to change the layout a bit (borders, frames), but with vbox and hbox layouts it would be something like this:
new Ext.Viewport({
layout: 'vbox',
layoutConfig: {
align : 'stretch',
pack : 'start'
},
defaults: {
style: 'margin: 10px 0 0 10px'
},
items:[{
title:'Orders',
height: 200
},{
layout: 'hbox',
flex: 1,
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [{
title:'Customer Information',
flex: 1
},{
layout: 'vbox',
flex: 1,
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [{
title: 'Shopping cart',
height: 200
},{
layout: 'hbox',
flex: 1,
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [{
title: 'Invoice address',
flex: 1
},{
title: 'Delivery address',
flex: 1
}]
}]
}]
}
]
});

try this one fiddle example :
https://fiddle.sencha.com/#fiddle/2dm
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
height: 200, //Fixed height for this panel
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%' // To make the cell width 100%
}
}
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
//scrollable: true,
//autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});

Consider using ColumnLayout instead. This gives you a choice between pixels and percentages for widths.