PDA

View Full Version : Extended panel doesn't work?



SyRenity
13 May 2008, 3:30 PM
Hi.

I've created the following panel (pre-configuration class):

app.loginPanel = Ext.extend(Ext.Panel, {
title: 'Fit Layout',
layout:'fit',
items: {
title: 'Inner Panel',
html: '<p>This is the inner panel content</p>',
border: false
}
});

Ext.reg('lPanel', app.loginPanel);

Problem is, the panel can't be used by viewport:

var vPort = new Ext.Viewport({items: [{xtype:'lPanel'}]}); // Doesn't work

Or

var vPort = new Ext.Viewport();
var lPanel = new app.loginPanel();
vPort.add (lPanel);

Both constructs return the following error in Firebug:
"this.items.add is not a function"

When I construct the panel directly (via ExtJS default class) it works - but not via the pre-configured class.

The panel is pretty basic, any idea why it doesn't work with viewport?

Thanks.

evant
13 May 2008, 4:05 PM
You can't add items in the constructor like this when you're extending the class.

You need to do it during initComponent. There's a lot of threads on this in the forum.

13 May 2008, 6:14 PM
i am not too sure why folks extend objects like that.

try using Ext.apply, see if that fixes your issue.

rudytheng
13 May 2008, 8:20 PM
Hi.

I've created the following panel (pre-configuration class):

app.loginPanel = Ext.extend(Ext.Panel, {
title: 'Fit Layout',
layout:'fit',
items: {
title: 'Inner Panel',
html: '<p>This is the inner panel content</p>',
border: false
}
});

Ext.reg('lPanel', app.loginPanel);

Problem is, the panel can't be used by viewport:

var vPort = new Ext.Viewport({items: [{xtype:'lPanel'}]}); // Doesn't work

Or

var vPort = new Ext.Viewport();
var lPanel = new app.loginPanel();
vPort.add (lPanel);

Both constructs return the following error in Firebug:
"this.items.add is not a function"

When I construct the panel directly (via ExtJS default class) it works - but not via the pre-configured class.

The panel is pretty basic, any idea why it doesn't work with viewport?

Thanks.

i dont know if it is right, but it think it should be like this


items: [{
title: 'Inner Panel',
html: '<p>This is the inner panel content</p>',
border: false
}]

SyRenity
13 May 2008, 11:16 PM
Hi.

Thanks for all the answers, but I'm a bit confused.

I've followed this great tutorial from Saki about developing large apps:
http://extjs.com/learn/Tutorial:Writing_a_Big_Application_in_Ext

Part of it says preparing pre-configured classes, for later re-usage. So this exactly what I did, created a panel, then added it to the viewport.

Is there any other working method, allowing to achieve said modularity?

Thanks.

Animal
13 May 2008, 11:28 PM
The problem is assigning items as a prototype property.

During initialization, a MixedCollection is instantiated and placed into the items property only if "this.items" is undefined (ie has not been created yet).

Well benig a prorotype property, it will be defined, to the MixedCollection never gets instantiated.

So this.items remains an Array, and the add() call in it fails.

You need to be careful.

IMHO, there is no point extending a Panel like this. All you are doing is configuring a Panel. Just configure a Panel!

angbob
14 May 2008, 12:50 AM
app.loginPanel = Ext.extend(Ext.Panel, {
title: 'Fit Layout',
layout:'fit',
//Animal: never put the array here, otherwise the MixedCollection will never be initialized, an the arry remains
//items: [{
//title: 'Inner Panel',
//html: '<p>This is the inner panel content</p>',
//border: false
//}]
initComponent: function(){
// Called during component initialization

// Config object has already been applied to 'this' so properties can
// be overriden here or new properties (e.g. items, tools, buttons)
// can be added, eg:
Ext.apply(this, {
items: [{
title: 'Inner Panel',
html: '<p>This is the inner panel content</p>',
border: false
}]
});

// Before parent code

// Call parent (required)
app.loginPanel.superclass.initComponent.apply(this, arguments);

// After parent code
// e.g. install event handlers on rendered component
}
});

SyRenity
14 May 2008, 5:54 AM
Hi.

Thanks for the replies and code sample - it works:).

So just to make sure I got it right - initializing items together with configuration in extended object is no-go because on initComponent stage they would be overwritten by parent.

The right way is to do so on during initComponent stage with apply(), and pass the configured object back to parent via apply as well.

Am I correct?