View Full Version : xtypes, layouts and classes...

25 Feb 2011, 6:40 AM

Before I get to my proper question perhaps a bit of overview of what I'm trying to achieve...

Ideally I want to try and get to a position where I can provide a framework for our web UI's where a lot of the complexity of the Ext stuff is hidden from those at the coal face.

The general thinking is to provide generic view classes that provide common page layouts that we use.
For example, all of our pages have a header, then a main content panel, so this indicates to me a common viewport that sorts out the header, and a takes a panel as the main content.

This content panel may then be a two pane layout, with a grid on top and a details pane below.
It could be a tree on the left, then a grid and detail pane on the right, again with a horizontal split. Sure you get the idea...

A developer then only has to say what page style then need, and provide the top & bottom panel implementation, say.
Obviously there's some thought still needed for handling events between panes, but sure that's solvable by making the content styles more focused...

Anyway, the question I have stems from the fact I'm not exactly sure how layouts work I think... I've always found the process of laying out components, and panels especially, to be a little hit and miss, a try it and see what happens type approach.

From what I can see from playing about with some ideas, if a panel class is actually created using Ext.create before it is displayed (i.e. for putting into a config object), then a fit layout essentially does nothing.
I'd want fit layout for the panel below the header you see.

This is before we even get to the real content...

Does this mean I cannot actually create panels at construction or initComponent time?
Do I have to define my panels as JSON with xtypes so they're created later (I think that's what that does at leaset)?
If supposed to use xtypes, where has Ext.register gone? Has it been replaced with something else, or is that no longer the approach to take?
Do I have to kick panels after creation somehow so that the layout works (have tried doLayout, but probably in the wrong place)? Perhap in a render event or something?

Sorry for the barrage of questions, I'd just like to understand how it works, and what the approach to take should be.

Apologies if I've not explained myself very well either. Feel free to ask questions if needed.

I look forward to any insights you may have.


25 Feb 2011, 8:17 AM
Ah, I see part of the answer wrt xtypes here (http://www.sencha.com/forum/showthread.php?124383-Something-easy&p=572353&viewfull=1#post572353):

alias : 'widget.myclass'
xtype : 'myclass'

25 Feb 2011, 8:36 AM
Ok, can now use xtypes to define my own classes, so that's good.

Layouts still not applying though, hmm... will keep tinkering...

25 Feb 2011, 2:13 PM
xtypes are all under 'widget.'

layouts are all under 'layout.'

plugins are all under 'plugin.'

stores are all under 'store.'

I'm uncertain as to what your question is with regard to layout

27 Feb 2011, 12:45 PM
Make sure that you've got a valid layout specified at each layer. If you're missing one somewhere you'll get into trouble. Also, some layouts require configuration options and some require specific item configurations too.

I rarely pay for software, but Illuminations was well worth the $30(?) as it makes stepping through the hierarchy much less painful.


28 Feb 2011, 1:30 AM
Good tip Michael, thanks!

I didn't realise you needed a 'fit' even when doing something like this in the panel class:

Ext.apply(this, {
layout: 'fit',
items: this.createView()


createView: function() {
this.view = //Ext.create('Ext.grid.GridPanel', {
xtype: 'gridpanel',
frame: true,
title: 'Title',
store: 'myStoreId',
layout: 'fit',
items: [{
headers: [
// ...

And this in the viewport class:

Ext.apply(this, {
items: [{
region: 'north',
items: this.createHeader()
region: 'center',
layout: 'fit',
items: [this.getContentPanel()]

Cheers, hopefully my woes with fit layouts should be a thing of the past now :)

And agree on Illuminations, must get a license sorted. Still running a trial here, but have approval to buy...