PDA

View Full Version : Extension question.



abcdef
19 May 2010, 10:55 PM
Hello so I am trying to learn to extend in Ext based on guidelines by Saki. I have a question about doing some manipulations while extending a class.

Here is the first extension:


Test.shell = Ext.extend(Ext.Viewport, {
id: 'Viewport',
initComponent:function() {
var config = {
layout: 'border',
items: [
{
region: 'north',
id: 'Header',
height: 50,
padding: 13,
border: false
},
{
region: 'center',
xtype: 'portal',
id: 'Center',
border: false,
bodyStyle: {
'padding-right': '19px',
'overflow-y': 'auto',
'overflow-x': 'hidden'
}
},
{
region: 'south',
id: 'Footer',
height: 30,
padding: 13,
border: false
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Test.shell.superclass.initComponent.apply(this, arguments);
},
onRender:function() {
Test.shell.superclass.onRender.apply(this, arguments);
}
});

Is it possible to extend Test.shell to create say, Test.portal, which adds 3 columns to the center region of Test.shell? Then maybe extend Test.shell to create other classes corresponding to different types of layouts (which would only be a matter of changing the columnWidths on the columns)?

I am not looking for code that does all the above, just a very brief note/example/link that might help me?

Thank you in advance.

Condor
19 May 2010, 11:18 PM
First of all: Don't extend components if you are only planning to create a single instance.

Assuming you actually want to create multiple instances (which you can't with a Viewport or a component with a unique id), then you would move the center config to a method that can be overridden separately:

Test.shell = Ext.extend(Ext.Viewport, {
id: 'Viewport',
initComponent:function() {
var config = {
layout: 'border',
items: [
{
region: 'north',
id: 'Header',
height: 50,
padding: 13,
border: false
},
this.getCenter(),
{
region: 'south',
id: 'Footer',
height: 30,
padding: 13,
border: false
}
]
};
Ext.apply(this.initialConfig, config);
Ext.apply(this, config);
Test.shell.superclass.initComponent.apply(this, arguments);
},
getCenter: function() {
return {
region: 'center',
xtype: 'portal',
id: 'Center',
border: false,
bodyStyle: {
'padding-right': '19px',
'overflow-y': 'auto',
'overflow-x': 'hidden'
}
};
}
});

abcdef
20 May 2010, 10:08 AM
exactly what i was looking for..thanks a lot!