PDA

View Full Version : ExtJS 3.2.1 Registering Component for use with xtype



strimp099
12 Jun 2011, 6:27 PM
In one file, I am creating a tab panel with two tabs. I am trying to register the component for use in a separate file. Consider the following:


Ext.ns('DVI');

var backtestTab = {
xtype: 'groupingstore'
}

var intradayTab = {
xtype: 'groupingstore'
}

DVI.DviDashboard = new Ext.TabPanel({
activeTab: 0,
items: [backtestTab, intradayTab]
});

Ext.reg('dviDashboard', DVI.DviDashboard);
Assume that this page properly populates the tabs with the grouping stores. In the page that calls this script, the code is as follows:


var dashboard = {
xtype: 'tabpanel',
id: 'port_dash-panel',
activeTab: 0,
items:[{
title: 'Dashboard',
xtype: 'dviDashboard'
}]
};
Which returns the following error:



b[d.xtype || e] is not a constructor
Upon researching, the above error indicates the component cannot be found or is not defined.

Note however, the below code does work and render the tabpanel:



var dashboard = {
xtype: 'tabpanel',
id: 'port_dash-panel',
activeTab: 0,
items:[DVI.DviDashboard]
};
I'm only showing snipits. The dashboard tabpanel is rendered in a viewport.

I guess the first question is can I even register a component this way? And of course the second question is, why doesn't this work? :)

diegotdai
13 Jun 2011, 1:02 AM
No, you can't register a component that way.

the Idea is.



Ext.ns('DVI.example');

DVI.example = Ext.extend(Ext.TabPanel, {
initComponent: function() {
DVI.example.superclass.initComponent.call(this);
}
});

Ext.reg('dvi', DVI.example);

Ext.onReady(function(){
new DVI.example({
renderTo: document.body,
activeTab: 0,
items: [
{
title: 'Tab 1'
}
]
});

new Ext.Panel({
title: 'My Panel using my xtype',
renderTo: document.body,
width: 400,
height: 300,
items: [
{
xtype: 'dvi',
items: [
{
title: 'My Tab 1'
}, {
title: 'My Tab 2'
}
]
}
]
});
});
read more on http://www.sencha.com/learn/Tutorial:Extending_Ext_Class
also on http://www.sencha.com/blog/advanced-plugin-development-with-ext-js/

Uberdude
13 Jun 2011, 2:46 AM
The reason that

DVI.DviDashboard = new Ext.TabPanel({...});

Ext.reg('dviDashboard', DVI.DviDashboard);

didn't work is that DVI.DviDashboard is an instance of a tab panel rather than a class (constructor function). xtypes are for registering a class.