Dynamic component instatiation via xtype

[Philippe_Fery]

Hi!

I created a new class. This class has 3 subclasses. Each of them is registered using

Ext.reg(xtype, cls)

I have a tree in the left pane of my ViewPort (border layout). This tree contains nodes. Depending on the node type the user clicked on, I must display the node data in a specific grid (i.e. in a grid which will be placed in an Ext.Panel with card layout).

The xtype of the three subclasses xtype are: "datagrid_P", "datagrid_D", "datagrid_DT".

When I click on a node, I get the xtype suffix (let's say "_P") and I can build the xtype to be used to instantiate the right datagrid (i.e.: "datagrid_P").

How can I dynamically instantiate the right datagrid using the xtype?

I tried things like:

  function activateDatagrid(nodeType){
    xtypeValue = 'datagrid_'+nodeType;
    activeDatagrid = {xtype: xtypeValue};
    ...
  }

But it doesn't work...


Any idea?

[Animal]

Ext.ComponentMgr.create(config) will examine the xtype and use the registered constructor.

It's commented as private, but I really cannot see a reason for that. I'll add doc comments to it to make it public. I use this method all the time!

[Philippe_Fery]

Thank you for your help!

I try it so far!

;-)

[Philippe_Fery]

Great!

It works fine!

Thank you again.

[JamesC]

Really useful thing to know, cheers again Animal. Very useful for my dynamic form generation using database configuration!

[altanmur]

Please example.
I have a same problem little different.

[CODE]
for(i in name){...
.....
var module = 'CarOrder.view.module.' + name[i];
/* 1st // me.addDocked(
// Ext.create(module,{
// id: me.id,
// selectedCompObj: sco
// })
// );
*/
/* 2nd
// var toolbarObj = Ext.create('CarOrder.view.module.ToolbarEvents',{
// id: me.id,
// selectedCompObj: sco
// });
// this.dockedItems.push(toolbarObj);
*/
/* 3rd
// me.dockedItems.push(
// Ext.create(module,{
// selectedCompObj: sco
// })
// );
*/
/* 4th
//var toolbarObj = { // xtype: name,
// id: me.id,
// selectedCompObj: sco
//};

// me.dockedItems.push(toolbarObj);
*/
/* 5th
//var toolbarObj = Ext.create('CarOrder.view.module.ToolbarEvents',{
// id: me.id,
// selectedCompObj: sco
//};

// me.dockedItems[i] = toolbarObj;
*/