Develop Reference

ExtJS 5.1 - Implementing the Center Layout example in the Kitchen Sink?

I'm creating a web application and I want a panel to be perfectly in the center of it's parent panel. I was going through ExtJS5's Kitchen Sink to find layout examples and I found this one.
It places the panel perfectly in the middle, it doesn't cheat using hbox or vbox then setting the pack and align properties to center and middle.
Here is the code he used:
Ext.define('KitchenSink.view.layout.Center', {
extend: 'Ext.container.Container',
requires: [
'Ext.layout.container.Center'
],
xtype: 'layout-center',
width: 500,
height: 400,
layout: 'center',
items: {
title: 'Centered Panel: 75% of container width and 95% height',
border: true,
layout: 'center',
scrollable: true,
width: '75%',
height: '95%',
bodyPadding: '20 0',
items: [
{
title: 'Inner Centered Panel',
html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
width: 300,
height: '100%',
frame: true,
bodyPadding: '10 20'
}
]
}
});
And here is how it looks like:
The reason I prefer this is because the width and height of one the first inner panel is purely percent based. If I tried this using hbox or vbox, I would need to set the width or height to a fixed number.
I'm using Sencha Architect and for some reason, I can't find the layout type center for my panel, container, and viewport elements. I've also included the Ext.layout.container.Center in my requires but still no dice.
Does anyone know how to implement this Kitchen Sink example in Sencha Architect?

This is a bug https://www.sencha.com/forum/showthread.php?293050
But you can easily overcome any such problems using process config function in SA.
Select your class where you want to edit special configs and click on add processCofnig
Next in the generated function you can edit the configs in any way you need.
processMyContainer: function(config) {
config.layout = "center";
}
The only disadvantage of using process config is that you will not see the settings set by it in the SA design view - but when you preview the app you will see it.
This is my final code for the class:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.container.Container',
alias: 'widget.mycontainer',
requires: [
'MyApp.view.MyContainerViewModel',
'Ext.panel.Panel'
],
viewModel: {
type: 'mycontainer'
},
height: 800,
width: 600,
initConfig: function(instanceConfig) {
var me = this,
config = {
items: [
me.processMainPAnel({
xtype: 'panel',
height: '95%',
width: '75%',
bodyPadding: '20 0',
title: 'Centered Panel: 75% of container width and 95% height',
items: [
{
xtype: 'panel',
height: '100%',
html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
width: 300,
bodyPadding: '10 20',
title: 'Inner Centered Panel'
}
]
})
]
};
me.processMyContainer(config);
if (instanceConfig) {
me.getConfigurator().merge(me, config, instanceConfig);
}
return me.callParent([config]);
},
processMainPAnel: function(config) {
config.layout = "center";
return config;
},
processMyContainer: function(config) {
config.layout = "center";
}
});
This is the result in the browser:

Charting inside an Accordion

Am new to Extjs and have a chart that I place in an accordion but when i resize the accordion,the chart doesn't resize.Please help
Here is my code
var chart1 = Ext.create('Ext.chart.Chart',{
animate: true,
store: store,
height:500,
width:340,
layout:'fit',
legend:{
visible:true,
position:'right',
labelFont:'10px Comic Sans MS'
},
margin:'30 0 0 0',
//autoHeight:true,
//insetPadding: 30,
//other code here.......................
});
Here is the code for the panel
var chartPanel = new Ext.Panel({
title:'Visualization Charts',
//cls:'empty',
items:[chart1]
});
code for accordion
var myaccordionwest = new Ext.Panel({
title:'Data Visualization',
region:'west',
//margin:'5 0 5 5',
split:true,
width:'27%',
layout:'accordion',
collapsible:true,
items:[chartPanel]
});

You have hardcoded width and height for the chart. Layout fit should be used on a container with one child item. So layout fit on chart doesn't mean anything, you should move that to the chartPanel.
So this should work:
var chart1 = Ext.create('Ext.chart.Chart',{
animate: true,
store: store,
legend:{
visible:true,
position:'right',
labelFont:'10px Comic Sans MS'
},
margin:'30 0 0 0',
//autoHeight:true,
//insetPadding: 30,
//other code here.......................
});
var chartPanel = new Ext.Panel({
title:'Visualization Charts',
//cls:'empty',
items:[chart1]
});
var myaccordionwest = new Ext.Panel({
title:'Data Visualization',
region:'west',
layout:'fit',
//margin:'5 0 5 5',
split:true,
width:'27%',
layout:'accordion',
collapsible:true,
items:[chartPanel]
});

how to create a panel in jsfiddle?

var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
width: 500,
height: 500,
//title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
xtype: 'gmappanel',
id : 'mygooglemap',
gmapType: 'map',
zoomLevel: 7,
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: 3.951941,
lng: 102.052002,
}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
I have renderto Body but still can't display anything?
This the link to my jsfiddle http://jsfiddle.net/anthor/Y4jP4/

baby steps Chin Ye, baby steps.
Modified your code to render the panel:
http://jsfiddle.net/dbrin/tayua/
You selected extjs library in the fiddle and then included the library again through the resources link. Instead you need to include the css resource.

How to put two Ext.Panels to the left and right of each other in another Ext.Panel?

I'm trying to create a layout in ExtJS which has a grid on top and on the bottom left and right sections, a basic parent/child, master/details layout:
wrapper_panel
panel_top
[grid]
panel_bottom
[left_area right_area]
However, the two areas in panel_bottom are on top of each other instead of to the left and right
var left_area = new Ext.Panel({
region: 'west',
layout: 'fit',
width: 100,
items: []
});
var right_area = new Ext.Panel({
region: 'center',
layout: 'fit',
width: 100,
items: []
});
var panel_bottom = new Ext.Panel({
//layout: 'border',
region: 'south',
items: [ left_area, right_area ]
})
It looks like this:
If I make the panel_bottom layout: border then the left and right areas disappear completely.
What do I need to change in the bottom area panels so that they line up left and right?
Addendum
#vimvds, if I add width: 200 or e.g. width: 300, I just get this:
Thanks for the answers, it led me to scrap this and use the table layout instead, which led me to another question how to define percentage instead of absolute values for height/width.

I'd use a Ext.layout.HBoxLayout:
var panel_bottom = new Ext.Panel({
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [ left_area, right_area ],
});
Alternatively you could also use a Ext.layout.TableLayout or a Ext.layout.ColumnLayout:
var panel_bottom = new Ext.Panel({
layout: 'column',
defaults: {
columnWidth: 0.5
},
items: [ left_area, right_area ],
});

And what happens if you use :
var panel_bottom = new Ext.Panel({
layout: 'border',
items: [ left_area, right_area ],
width: 200
});

ExtJs - Set a fixed width in a center layout in a Panel

Using ExtJs.
I'm trying to design a main which is divided into three sub panels (a tree list, a grid and a panel). The way it works is that you have a tree list (west) with elements, you click on an element which populates the grid (center), then you click on an element in the grid and that generates the panel (west).
My main panel containing the three other ones has been defined with a layout 'border'.
Now the problem I face is that the center layout (the grid) has been defined in the code with a fixed width and the west panel as an auto width. But when the interface gets generated, the grid width is suddenly taking all the space in the interface instead of the west panel.
The code looks like that:
var exploits_details_panel = new Ext.Panel({
region: 'east',
autoWidth: true,
autoScroll: true,
html: 'test'
});
var exploit_commands = new Ext.grid.GridPanel({
store: new Ext.data.Store({
autoDestroy: true
}),
sortable: true,
autoWidth: false,
region: 'center',
stripeRows: true,
autoScroll: true,
border: true,
width: 225,
columns: [
{header: 'command', width: 150, sortable: true},
{header: 'date', width: 70, sortable: true}
]
});
var exploits_tree = new Ext.tree.TreePanel({
border: true,
region: 'west',
width: 200,
useArrows: true,
autoScroll: true,
animate: true,
containerScroll: true,
rootVisible: false,
root: {nodeType: 'async'},
dataUrl: '/ui/modules/select/exploits/tree',
listeners: {
'click': function(node) {
}
}
});
var exploits = new Ext.Panel({
id: 'beef-configuration-exploits',
title: 'Auto-Exploit',
region: 'center',
split: true,
autoScroll: true,
layout: {
type: 'border',
padding: '5',
align: 'left'
},
items: [exploits_tree, exploit_commands, exploits_details_panel]
});
Here 'var exploits' is my main panel containing the three other sub panels.
The 'exploits_tree' is the tree list containing some elements. When you click on one of the elements the grid 'exploit_commands' gets populated and when you click in one of the populated elements, the 'exploits_details_panel' panel gets generated.
How can I set a fixed width on 'exploit_commands'?
Thanks for your time.

The center region cannot, according to the docs, have a fixed width (see the first bullet point under the Notes heading). Any other region (N, S, E or W) may define its size, and the center region simply takes up whatever space is left over. BTW, this is pretty much a standard approach for this style of layout in other GUI platforms too (or think of just about any graphical IDE you've used as an example).
Don't set auto width on your east panel, give it a defined starting width (otherwise it will not show, which is probably what you're seeing).