PDA

View Full Version : Need Primer on Layouts



Cliff
14 Sep 2010, 1:25 PM
Somewhat new to ExtJS. I do fine when my questions are handled by the API Doc, but get stuck when trying to use the search engines to find stuff.

My question is:
Does anyone have a link to a resource that can serve as a Primer on the Ext Layouts? I'd like an overview of how they work.

At this point, reading the API Doc is not helping. I can't even figure out how to make west show up to the left of center. Grrr.

michaelc
14 Sep 2010, 2:52 PM
This may be what your after
http://www.sencha.com/learn/Ext_2_Overview#Layouts

Cliff
15 Sep 2010, 7:48 AM
Thanks Michael. I had already looked at that doc. It does not contain the detail that I'm seeking. I'm looking for more of an overview on the fundamentals. Maybe one of the books handles this well, does anyone know? I checked chapter 7 of my "Learning Ext JS" (PACKT) book, but I still can't draw the line between the regions and what it displays in the containing panel.

This doc was is a little better for me:
http://www.sencha.com/learn/Tutorial:Using_Layouts_with_Ext_-_Part_1

Maybe someone else finds this subject in a search and the above link helps.

michaelc
15 Sep 2010, 8:13 AM
At this point, reading the API Doc is not helping. I can't even figure out how to make west show up to the left of center. Grrr.
Are you using a border layout ?
another big help is going into the download examples and play with them some.

Cliff
15 Sep 2010, 8:38 AM
The following represents the code I'm trying.

In the containing Panel (i.e. panelMyExampleContainer), the exclusion of the layout config item (i.e. border) causes the page to render. Unfortunately, the grid that belongs in east shows up in south - north/center/east render as vertically stacked. The hard-coded width:500 is reflected by the objects on the page. The call to doLayout() at the bottom makes no difference.

In the containing Panel (i.e. panelMyExampleContainer), the inclusion of the layout config item (i.e. border) causes nothing in its items array to render.

What am I missing? Need to get center and east to display next to each other, not stacked.


Ext.onReady(function(){
/*
This sample script omits items of indirect importance, such as the instantiation of the items for the Toolbar.
Note the region assignments. I use north, center, and east. The 2 grids assigned to east display one at a time (i.e. one
is hidden when the other is displayed). Everything is supposed to render in the Panel at the bottom as represented by
the variable, panelMyExampleContainer.
*/

var tbarMyExample = new Ext.Toolbar({
id: 'tbarMyExampleID',
items: [comboMyExampleFileSelect, btnToggleMyExample]
});

var northPanelHeight = 40;
var boxMyExampleSrcHdr = new Ext.BoxComponent({
id: 'boxMyExampleSrcHdrID',
border: false,
height: northPanelHeight,
layout: 'fit',
region: 'north'
});

var hdrDiv = $('hdrStaticInfoDivID');
var eastWestHeight = parseInt((getWinHt() - (hdrDiv.clientHeight + northPanelHeight)) * .94);

var colMyExample = new Ext.grid.ColumnModel({
defaults: {
editable: false,
menuDisabled: true,
resizable: true,
sortable: false
},
columns: [
{dataIndex:'lexAnalType', id:'lexAnalType', header:"Lexical Analysis"},
{dataIndex:'diaInfo', id:'diaInfo', header:"DIA LIST(%)"}
]
});

var gridMyExample = new Ext.grid.GridPanel({
id: 'gridMyExampleID',
autoExpandColumn: 'diaInfo',
border: false,
colModel: colMyExample,
columnLines: true,
enableColumnMove: false,
enableColumnResize: true,
height: eastWestHeight,
hidden: false,
layout: 'fit',
region: 'east',
store: new Ext.data.JsonStore({
id: 0,
fields: [
'lexAnalType',
'diaInfo'
]
}),
stripeRows: true,
width: 500
});

var colMyExampleMorph = new Ext.grid.ColumnModel({
defaults: {
editable: false,
menuDisabled: true,
resizable: true,
sortable: false
},
columns: [
{dataIndex:'plural', id:'plural', header:"Plural"},
{dataIndex:'feminine', id:'feminine', header:"Fem."},
{dataIndex:'masculine', id:'masculine', header:"Masc."},
{dataIndex:'person', id:'person', header:"Person"}
]
});
var gridMyExampleMorph = new Ext.grid.GridPanel({
id: 'gridMyExampleMorphID',
border: false,
colModel: colMyExampleMorph,
columnLines: true,
enableColumnMove: false,
enableColumnResize: true,
height: eastWestHeight,
hidden: true,
layout: 'fit',
region: 'east',
store: new Ext.data.JsonStore({
id: 0,
fields: [
'plural',
'feminine',
'masculine',
'person'
]
}),
stripeRows: true,
width: 500
});

var panelMyExampleArabText = new Ext.Panel({
id: 'panelMyExampleArabTextID',
border: false,
height: eastWestHeight,
layout: 'fit',
region: 'center',
width: 500
});

var panelMyExampleContainer = new Ext.Panel({
id: 'panelMyExampleContainerID',
border: false,
layout: 'border', // When this is commented, everything renders, albeit vertically stacked.
renderTo: 'diaMyExampleContentID', // This is an id of a <div> in the html page that will be rendered to an <iframe>.
tbar: tbarMyExample,
items: [boxMyExampleSrcHdr, panelMyExampleArabText, gridMyExample, gridMyExampleMorph]
});

panelMyExampleContainer.doLayout();// Whether or not this is commented seems to have no impact.
// ... more here is omitted ...
});

Animal
15 Sep 2010, 9:32 AM
Containers contain child Components.

Containers use layout managers to render and possibly, depending on layout type and configuration size and position those child Components.

That's all really!

Cliff
15 Sep 2010, 11:42 AM
I figured out the problem. The layout gets confused by the fact that the 2 grids share east. I configured their hidden states to be mutually exclusive, when one is visible the other is not. A toolbar button toggles which is visible. When one of these guys gets removed from the items array of the container panel, everything lays out.

Suggestions will be appreciated. If I figure out the solution, I'll post it.

Animal
15 Sep 2010, 12:00 PM
You want to switch two "Things" in the east?

Then make the east a CONTAINER!

And it's layout? "card".

This is what layouts ARE FOR.

Cliff
15 Sep 2010, 12:34 PM
Thanks Animal. That was the final cue. It's up and running.

I was right about one thing, I needed a primer ;-).