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

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:

name: 'App',
launch: function() {
Ext.define('App.ui.ComboBox', {
override: 'Ext.form.field.ComboBox',
initialize: function() {
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!

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


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


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