PDA

View Full Version : Odd issue with xtypes



ebaliatico
9 Jul 2010, 7:49 AM
I've extended Ext.grid.GridPanel and run into issues when using the following within a viewport:

new Ext.Panel({xtype:'pgrid', region:'west'});However, the following works:

new App.pGrid({region:'west'});

When using new App.pGrid(), the grid renders and any attempts to load it go as planned. However, when using new Ext.Panel(....), it does not render and any attempts to load it result in "NS_ERROR_ILLEGAL_VALUE"

I can't seem to figure this one out.

The above is minified. The full code is in the following post.

ebaliatico
9 Jul 2010, 7:54 AM
AppBase.js:

Ext.ns("App");

App.AppBase = function() {
var viewport, tabPanel, pGridPanel, headerPanel, loginWindow,
cookieUtil = Ext.util.Cookies,
supportedActions = [];

return {
init : function() {
// ........
// some login functionality here
this.buildViewport();
},

buildViewport : function() {
tabPanel = new Ext.TabPanel({
activeItem : 0,
defaults : { AppBase : this },
region : 'center',
frame : false,
margins : '5 5 5 0',
items : [
{
xtype : 'panel',
title : 'Welcome',
html : '<h1>Welcome</h1>'
}
]
});

pGridPanel = new Ext.Panel({
xtype : 'pgrid',
region : 'west',
width : 340,
margins : '5 5 5 5',
title : 'pgrid'
});

headerPanel = new Ext.Panel({
region : 'north',
height : 58,
contentEl : 'header',
border : false
});

viewport = new Ext.Viewport({
layout : 'border',
items : [
tabPanel,
headerPanel,
pulsePanel
]
});

Ext.getBody().unmask();
},

destroy : function() {
viewport.destroy();
viewport = null;
this.init();
}
};
}();


Ext.onReady(App.AppBase.init, App.AppBase);
pGrid.js:

Ext.ns("App");

App.pGrid = Ext.extend(Ext.grid.GridPanel, {

autoLoad: false,

viewConfig: {forceFit: true},

initComponent: function(){
this.store = this.buildStore();
this.columns = this.buildColumns();
App.pGrid.superclass.initComponent.call(this);
},

buildColumns: function() {
return [
{
header: 'Name',
dataIndex: 'name',
renderer: this.renderName,
width: 240,
sortable: true
},{
header: 'Date',
dataIndex: 'timestamp',
renderer: Ext.util.Format.dateRenderer('M d h:i'),
sortable: true
}
];
},

buildStore : function() {
return {
xtype : 'jsonstore',
autoLoad : this.autoLoad,
proxy : new Ext.data.HttpProxy({
method : 'POST',
url : 'http://localhost/app/index.php/test/getAll'
}),
fields : [
'pId',
'userId',
'name',
{name: 'timestamp', mapping: 'timestamp', type: 'date', dateFormat: 'Y-m-d H:i:s'},
'text'
],
sortInfo : {
field : 'name',
dir : 'ASC'
}
};
},

renderName : function(value, p, record) {
return String.format('<b>{0}</b><br />{1}', value, record.data.text);
},

load : function() {
this.getStore().load();
}

});

Ext.reg('pgrid', App.pGrid);

Animal
9 Jul 2010, 9:22 AM
calling new Ext.Panel results, obviously, in creation of an Ext.Panel.

ebaliatico
9 Jul 2010, 9:54 AM
Further thought revealed as much *facepalm*. Thanks for your response. Since this GridPanel is always going to be instantiated right away, is there any difference between the two following:


pGridPanel = new App.pGrid({
region : 'west',
width : 340,
margins : '5 5 5 5',
title : 'pgrid'
});

viewport = new Ext.Viewport({
layout : 'border',
items : [
tabPanel,
headerPanel,
pGridPanel
]
});VS


pGridPanel = {
xtype : 'pgrid',
region : 'west',
width : 340,
margins : '5 5 5 5',
title : 'pgrid'
};

viewport = new Ext.Viewport({
layout : 'border',
items : [
tabPanel,
headerPanel,
pGridPanel
]
});

Animal
9 Jul 2010, 9:59 AM
None except that in the first instance, you have a var pGridPanel which refers to an instantiated Panel, so you can use that to operate on it.

In the second instance that var will just refer to a raw config object.

A Container instantiates the final Component from a raw config as soon as the config is added, so I'd go for the first option.

Condor
9 Jul 2010, 11:35 PM
If you want to create a component from an xtype based config object then you would use:

var pgrid = Ext.ComponentMgr.create({xtype:'pgrid', region:'west'});