PDA

View Full Version : Weird App load issue:types[config.xtype || defaultType] is not a constructor



Tumac
21 Sep 2010, 1:59 PM
I get this error when loading my application. I cannot see anything wrong (JSLint comes out clean) and my xtypes for the grid and forms are correct. The weird thing about this is that I can navigate forward to any website, then hit my "Back" button on the browser and my application loads and works fine.

In Firebug when i look at the Net tab and look at the load order of the pages they look OK.




Ext.ns("MaintApp");
Ext.BLANK_IMAGE_URL = 'assets/img/tp/s.gif';
Ext.ux.Loader.load(
[
'MaintCls/grid/CustomerGrid.js'
,'MaintCls/grid/CustomerShipTo.js'
,'MaintCls/form/CustomerForm.js'
]
,function() { // callback when finished loading
}
,this // scope
);

MaintApp.Customers = Ext.extend(Ext.Panel, {

layout :'border'
,border : false
,msgs : {
succSaveForm : '{0} was saved successfully.'
,errorSavingForm: 'There was an error saving {0}'
,detailSuccSave : 'Shipto: {0} was saved successfully'

}
,initComponent : function() {
this.items= [
this.buildMasterGrid()
this.buildForm()
];

MaintApp.Customers.superclass.initComponent.call(this);

}
,buildMasterGrid : function() {

return {
xtype : 'customergrid'
,itemId : 'custList'
,flex : 1
,split : true
,resizable : true
,region : 'west'
,width : 200
,border : false
,style : 'border-right: 1px solid #99BBE8;'
,listeners : {
scope : this
,click : this.onMasterListClick
}
,tbar : []
};
}

,buildForm : function() {
return {
xtype : 'customerform'
,itemId : 'custForm'
,region : 'center'
,border : false
,autoScroll: true
,height : 1000
,style : 'border-left: 1px solid #99BBE8;'
,listeners : {
scope : this
,save : this.onSaveForm
,newdetail : this.onNewDetail
,editDetail : this.onEditDetail
}
};
}

,onMasterListClick : function() {
var selectedRecord = this.getComponent('custList').getSelectionModel().getSelected();
this.getComponent('custForm').loadData(selectedRecord.data);
}

,onSaveForm : function(panel, vals) {
if (this.getComponent('custForm').getForm().isValid()) {
var msg = String.format(this.msgs.savingData, vals.cusShort);
Ext.getBody().mask(msg, 'x-mask-loading');

this.getComponent('custForm').getForm().submit({
url : 'index.php?c=maint_customer&m=saveCustomer',
scope : this,
success : this.onFormSaveSuccess,
failure : this.onFormSaveFailure
});
}
}

,onFormSaveSuccess : function(form, action) {
var selectedRecord = this.getComponent('custList').getSelected();
var resultData = action.result.data;

if (selectedRecord) {
for (var key in resultData) {
selectedRecord.set(key, resultData[key]);
}
selectedRecord.commit();
}
else {
this.getComponent('custList').store.load();
//this.getComponent('custList').createAndSelectRecord(resultData);
}

var Form = this.getComponent('custForm');
Form.loadData(resultData);
Form.enableDetailGridBtns();
Ext.getBody().unmask();

var msg = String.format(
this.msgs.succSaveForm
,resultData.cusShort
);
Ext.MessageBox.alert('Success', msg);
}

,onFormSaveFailure : function() {
var vals = this.getComponent('custForm').getForm().getValues();

var msg = String.format(this.msgs.errorSavingForm, vals.cusShort);
Ext.getBody().unmask();
Ext.MessageBox.alert('Error!', msg);
}

// ----------------------- DETAIL CRUD ROUTINES ------------------------//
,onEditDetail : function(custForm, grid, record) {
new MaintApp.ShiptoEditWindow({
record : record,
listeners : {
recordsaved : {
single : true,
scope : this,
fn : this.onDetailSaveSuccess
}
}
}).show();
}

,onNewDetail : function(custForm) {
var cusID = custForm.getValues().cusID;
new MaintApp.ShiptoEditWindow({
cusID : cusID
,listeners : {
recordSaved : {
single : true
,scope : this
,fn : this.onDetailSaveSuccess
}
}
}).show();
}

,onDetailSaveSuccess : function(formVals, action, record) {
var msg = String.format(
this.msgs.detailSuccSave,
formVals.shipName
);


if (record) {
if (formVals.cusID !== record.get('cusID')) {
record.store.remove(record);
}
else {
for (var val in formVals) {
record.set(val, formVals[val]);
}
record.commit();
}
}
else {
this.getComponent('custForm').addRecordsToDetailGrid(action.result.data);
}
Ext.MessageBox.alert('Success', msg);
}

,clearFormPanel : function() {
this.getComponent('custList').clearSelections();
this.getComponent('custForm').clearForm();
}

,spoolIdsFromRecords : function(records) {
var shipto = [];

Ext.each(records, function(record) {
shipto.push({
shipID : record.get('shipID')
});
});

return shipto;
}

,cleanSlate : function() {
this.clearFormPanel();
this.getComponent('custList').refreshView();
}




});

Ext.reg('cusmanager', MaintApp.Customers);

evant
21 Sep 2010, 7:36 PM
It means it can't find the xtype, usually
a) The file isn't included
b) You have a typo somewhere

Animal
21 Sep 2010, 11:29 PM
And you can debug it in one minute by (the horror!) setting a breakpoint and seeing what "config.xtype" IS!

Tumac
22 Sep 2010, 9:26 AM
I did set a breakpoint but the xtype was defined properly. The weird problem actually came from a different piece of code. The code that sets up this part of the application needed more than 1 cardpanel item to render. I created a second xtype/panel and it rendered.

This is more a problem for J.Garcia as it is a modification from his book codebase.

The weird problem arose from the 2nd xtype not being defined and thus not being seen in debug, (but thanks for the dig Animal! ;) ) I am not the best debugger, but I am learning to try to my best ability before posting.

My first inclination was one of the reasons Evan posted so I completely combed through my xtypes for typos.