PDA

View Full Version : Override (Ext.define) handled differently in Firefox versus Chrome



kaendsle
12 Jan 2012, 8:29 AM
When using Ext.define() to define an override, I get the expected result in at least one browser but a fatal error in others. Errors are read from either Firebug or the Chrome Developer console.

Interestingly, the override works in Firefox 3.6 on Ubuntu Linux.

Tested with Firefox 3.6.24 on Ubuntu Linux: Application displays properly with anticipated result
Tested with Firefox 9.0.1 on Windows: c is not a constructor
Tested with Chrome 16.0.912.63 on Ubuntu Linux: Uncaught TypeError: object is not a function
Tested with Chrome 16.0.912.75m on Windows: Uncaught TypeError: object is not a function

I've tried to produce as small a test case as possible:


Ext.application({
name: 'App',
launch: function() {
Ext.define('App.ui.ComboBox', {
override: 'Ext.form.field.ComboBox',
initialize: function() {
this.callOverridden(arguments);
},
labelWidth: 120
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'panel',
title: 'My Panel',
html: 'My App',
tbar: [
{
xtype: 'combobox',
fieldLabel: 'Area-of-Interest (AOI)',
emptyText: '(None Selected)'
}
]
}
});
}
});


I would love to know what's wrong with this and how to properly override Ext.form.field.ComboBox so that it has a larger labelWidth (and any other properties I may wish to modify). Thanks!

mitchellsimoens
12 Jan 2012, 10:59 AM
You shouldn't use Ext.define within Ext.onReady or Ext.Application.launch.


Ext.require([
'Ext.form.field.ComboBox'
]);

Ext.define('Override.form.field.ComboBox', {
override: 'Ext.form.field.ComboBox',

labelWidth: 120
});

Ext.onReady(function() {

console.log(Ext.form.field.ComboBox.prototype.labelWidth); //is the labelWidth from the override

});

kaendsle
12 Jan 2012, 11:26 AM
Great! I can see now that's absolutely correct. Thank you.