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:

How to set height to ExtJs Grid?

I have follow structure:
TabPanel->FormPanel->Grid
And i want to set grid's height to all free space on formpanle. If i says layout:fit` in FormPanle first textfield get all space of formpanel. How to do what i want?
FormPanel:
var search = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Поиск',
//layout:'fit',
viewConfig:{ forceFit: true },
//bodyStyle:'padding:5px 5px 0',
GridPanel:
var searchTab = new Ext.grid.GridPanel({
store: searchStore,
region: 'center',
cm: searchCm,
layout:'fit',
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
height: 390,
autoExpandColumn:'expColumn',
loadMask: true,
id: 'searchTab',
title:'Найденные объекты',
autoScroll: true,

User borderLayout and devide in 2 Region.North and center. Add your top panel content in north region and grid in center region.
layout: 'border',
items: [{
title: 'North Region is resizable',
region: 'north', // position for region
xtype: 'panel',
height: 100
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
items: {
new Ext.grid.GridPanel({
store: searchStore,
region: 'center',
cm: searchCm,
layout:'fit',
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
height: 390,
autoExpandColumn:'expColumn',
loadMask: true,
id: 'searchTab',
title:'????????? ???????',
autoScroll: true
})
}
}]

Fix the height for textfield and Try height:'100%' for gridpanel. Sushant Jain's solution is good but in that too go for height:'100%' if you want grid to occupy leftover area. region: 'center' helps to occupy leftover area by north region but if you fix height or width than even if center region expand to occupy left over area grid panel will remain on fixed height.

Changing the height or adding padding to an EXTjs ext.tab.Tab component

I've got a a Tab panel with a few tabs inside. I'm using the iconCls property in the tabs to give each tab an image along with its title. I'm using the fam fam fam 16x16 icons and the default tab space is cutting the images off at the top/bottom.
I tried messing around with the icon's class by changing the margins but it's not helping. According to the documentation the ext.tab.Tab component has padding and height properties, but setting those is not having an effect on the tab at runtime.
Ext.define('AM.view.Tab.Standard', {
extend: 'Ext.tab.Panel',
alias: 'widget.TabStandard',
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
initComponent: function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function(){
var items =
[
{
padding: 10, // nope :(
title: 'Gantt',
autoScroll: true,
iconCls: 'gantt icon',
},
{
height: 10, // nope :(
title: 'Logs',
autoScroll: true,
iconCls: 'logs icon',
},
{
title: 'Help',
autoScroll: true,
iconCls: 'help icon',
}
];
return items
},
});
Perhaps I'm misunderstanding how those properties work, but the everything on the page looks the same.
EDIT: It appears I'm having the same problem with the "Headings" (the bar with the +/-) when used as an accordion panel.

You can customize tabs in a tab panel by using the tabBar property on tabPanel:
var tabpanel = new Ext.tab.Panel({
plain: true,
region: 'center',
tabBar: {
defaults: {
flex: 1, // if you want them to stretch all the way
height: 20, // set the height
padding: 6 // set the padding
},
dock: 'top'
}
});

EXT border layout: error when adding panels

(EXT 3) I have moved from an hbox layout to a border layout. All my components worked fine in the hbox layout (two grids). I've been attempting to add these same items to a border layout and I keep getting an error "comp is undefined". Am I missing something in my panel setup?
var skedPanel = new Ext.Panel({
id : 'skedPanel',
layout : 'border',
defaults: {
frame:true,
split:true
},
height:650,
width: 1200,
items : [
{
region:"east",
width:300
},
{
region:"center",
width: 800,
}
]
});
skedPanel.add('center',this.scheduler) < ---- error triggered here
skedPanel.add('east',this.dList1)
skedPanel.render('root');
EDIT: Here is the solution to what I wanted to do. First create the regions, then add content. The issue was that the regions were not completely created. Molecule's tip sent me in the right direction.
var skedPanel = new Ext.Panel({
id : 'skedPanel',
layout : 'border',
defaults: {
frame:false,
split:true
},
height:650,
width: 1200,
items : [
{
region:"center",
id: 'skedCenter',
width: 850
},
{
region: "east",
id: 'skedEast',
width:300
}
]
});
Ext.getCmp('skedCenter').add(this.scheduler)
Ext.getCmp('skedEast').add(this.dList1)
skedPanel.render('root');

You can have only one 'center' region

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