PDA

View Full Version : ExtJS Panel Inheritance/Base class



sraz786
25 Jun 2010, 10:17 AM
I am trying to create my own Date/Time field. I know there are a few that others have made, I'm making my own :).

My question is as follows. I want to create a new object, DateTime, which extends Ext.Panel. I specify some properties for width, height, etc but I also specify the values for the items property which will contain a date field and a time field. When I try to actually instantiate the created object, I get an error saying "Object or property not supported". When I go into the error, it seems that the items collection throws an error The code is as follows:


var dateField = new AppealDate(
{
id: 'dateField',
tabIndex: 0,
fieldLabel: '',
msgTarget: 'under'
}
);
var timeField = new Ext.form.TimeField(
{
id: 'timeField',
tabIndex: 0,
fieldLabel: '',
msgTarget: 'under'
}
);
var DateTime = Ext.extend(Ext.Panel, {
id: '',
xtype: 'panel',
fieldLabel: '',
layout: 'table',
layoutConfig: {
columns: 2
},
items:[dateField, timeField]
});

var dateTimeField = new DateTime(); //this throws an error

darthwes
25 Jun 2010, 3:08 PM
You switched the scope inside Ext.extend. You no longer see them?

Wrap with closure.

How about don't define the items until you need them? i.e. inside of initComponent? And then .add them, dynamically?

Because Ext.apply will overwrite any items configs passed to your Extended Class.

Animal
25 Jun 2010, 10:29 PM
You have to create a contructor, create the two subfields NEW in that constructor, and then add them to the items config.

You can't put an items in a prototype.