PDA

View Full Version : How to use ExtJs with OOP pattern



dworrad
9 Nov 2009, 12:56 PM
Can someone tell me why the example below fails at the last doLayout?? I'm newish to ExtJs but I can't find answers to this within the forums.

If this is the wrong way to go about it then please can you tell me the best pattern to follow which is most similar

Thanks


var defaultview = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
xtype: 'panel'
}, {
region: 'west',
xtype: 'panel',
width: 200
}, {
region: 'center',
xtype: 'panel'
}, {
region: 'east',
xtype: 'panel',
split: true,
width: 200
}, {
region: 'south',
xtype: 'panel'
}]
});

var reg1 = {
border: false,
margins: '0 0 5 0',
height: 150,
xtype: 'panel',
id: 'northPanel',
html: 'Reg1!!'
};

var reg2 = {
border: false,
margins: '0 0 5 0',
height: 150,
xtype: 'panel',
id: 'westPanel',
html: 'Reg2!!'
};

var regionNorth = defaultview.items.itemAt(0);
var regionWest = defaultview.items.itemAt(1);
var regionCenter = defaultview.items.itemAt(2);
var regionEast = defaultview.items.itemAt(3);
var regionSouth = defaultview.items.itemAt(4);


regionWest.add(reg1);
regionCenter.add(reg2);

defaultview.doLayout(); //This works

reg1.html = "Now look at me";
defaultview.doLayout(); //This doesn't update the panels html

evanc
9 Nov 2009, 2:41 PM
The reg1 variable is still a primitive object, setting properties on it won't do anything. Furthermore I don't think the .html property is used after the initial creation of the component.

Do something like this instead:


var el1 = regionWest.add(reg1);
el1.body.update("Now look at me");


there's almost certainly a better way to do this, depending on where you're getting your data from... ie an Ext.DataView or Ext.Updater

dworrad
10 Nov 2009, 1:39 AM
Thanks for your helpful response.

I just want to try and avoid getting components with a get method i.e get('ElementId').

I was hoping that I could reference any component through global variables that are created in the way you mentioned.

So for example if I wanted a menu from the left to communicate with a grid which is sat within a Tab Panel.

Is there any Pattern which suits this type of programming. If there is I'd love to do a little reading on it.

Thanks

Animal
10 Nov 2009, 2:06 AM
And why are you adding Panels to no-layout Panels?