View Full Version : Extending Panels for Composition

6 Apr 2010, 3:16 AM
Let me mention that I had browsed for quite some time in the docs, Saki's examples, and forum posts before creating this thread.

I want to extend Panel to create a new reusable class which has pre-configured compnents inside the Panel. My question is which is the best place to add the child items to the new class being created:

in the constructor itself (after the call the base class's constructor)
in initComponent
in onRender
somewhere else

A short example of adding components to a new Panel derived class would be useful.

6 Apr 2010, 3:21 AM
See: http://www.extjs.com/forum/showthread.php?p=259901#post259901

6 Apr 2010, 3:31 AM
Thanks for the pointer fay. I studied that post, but it does not clearly mention which place should I add items to the derived class? There is no example adding items in the derived class also!!

6 Apr 2010, 3:38 AM
I would always use the constructor to set up a cloned config object containing the configuration you need, and then pass that to the superclass constructor.

More info here: http://www.extjs.com/learn/Tutorial:Creating_new_UI_controls

Specifically: http://www.extjs.com/learn/Tutorial:Creating_new_UI_controls#A_Factory_method

6 Apr 2010, 3:44 AM
Hi Animal, I have read every word of all those docs, but could not find a live example demonstrating the best practice for derived composite class.

So, you mean this is the best approach:

Ext.ux.MyPanel = Ext.extend(Ext.Panel, {
constructor: function(config) {
Ext.apply(config, {
layout: 'fit',
items: [{ xtype:......
tbar: {.....

Ext.ux.MyPanel.superclass.constructor.call(this, config);

Would you suggest any changes or better practice to the above sample??

6 Apr 2010, 4:43 AM
If you are sure you need a subclass as opposed to merely a factory function which creates a preconfigured Panel, then what do you see wrong with it?