PDA

View Full Version : Concerns over Ext.override() being deprecated



estesbubba
10 Jan 2012, 8:41 AM
We have a base application which is customized for each client. When a client wants to change functionality for one of our components we use Ext.override() to do this and it works great. So we never change the "core" code - just add overrides to customize for the client. For example:



Ext.define('My.cool.Class', {
xtype: 'coolclass',
sayHi: function() {
alert('Hi!');
}
sayBye: function(),
buildUI: function(),
...
}


Ext.override('My.cool.Class', {
sayHi: function() {
// Client customization goes here
}
});


We create our views using both Ext.create() and xtype. Using Ext.override() works great because we don't have to change controllers, etc. for any clients. Ext.create() and xtype just works and override gets the new view for the client.

Now this is how I interpret the new way is supposed to work:



Ext.define('My.cool.Class', {
xtype: 'coolclass',
sayHi: function() {
alert('Hi!');
}
sayBye: function(),
buildUI: function(),
...
}


Ext.define('My.cool.ClassOverride', {
xtype: 'coolclassOverride,
override: 'My.cool.Class',
sayHi: function() {
// Client customization goes here
}
});


Now all of a sudden our controllers, etc. that did Ext.create('My.cool.Class') or xtype: 'coolclass' are broken. Do they now need to call Ext.create('My.cool.ClassOverride') and xtype: 'coolclassOverride'? Hopefully I'm just missing something here.

I also see it's deprecated in Ext JS 4.1 where we also use Ext.override().

mitchellsimoens
10 Jan 2012, 8:52 AM
If Ext.define has been executed, the override will be applied. Using Ext.define allows us to still override classes, use the callOverridden method (like callParent), and also dynamically load the override.

estesbubba
10 Jan 2012, 8:57 AM
So calling Ext.create() and xtype: on the base class will actually see the overriden items? If that's the case then we are fine.

mitchellsimoens
10 Jan 2012, 9:04 AM
Correct. As soon as the Ext.define is executed (classes are resolved), the override is in place.

mitchellsimoens
10 Jan 2012, 9:06 AM
One more note to touch a little more. If you wanted to create an override but still call the class that is being overridden's code, you can use callOverridden:


initialize : function() {
this.foo = 'bar';

this.callOverridden(arguments);
}

If you wanted to skip the class being overridden but still use it's parent's code I believe you can do this:


initialize : function() {
this.superclass.initialize.call(this);
}

estesbubba
10 Jan 2012, 9:15 AM
Good news things will work as before just defining them differently. I also did some experimenting and this works just fine. Back to coding now...





Ext.define('Csg.view.Welcome', {
extend: 'Ext.form.Panel',
xtype: 'welcome',


config: {
cls: 'c-welcome',
layout: {
type : 'vbox',
align: 'middle'
},
scrollable: false
},


initialize: function() {


this.setItems(this.buildItems());
this.callParent();
},


buildItems: function() {
return [{
xtype: 'component',
html: 'Welcome to the Lexar Payment Kiosk',
cls: 'c-page-header'
}, {
xtype: 'container',
layout: {
type: 'hbox'
},
items: [{
xtype: 'button',
flex: 1,
text: 'Enter Phone Number',
itemId: 'phoneButton',
cls: 'c-button',
iconCls: 'appCard',
iconMask: true,
iconAlign: 'top'
}, {
xtype: 'button',
flex: 1,
text: 'Enter Account Number',
itemId: 'accountButton',
cls: 'c-button',
iconCls: 'appCard',
iconMask: true,
iconAlign: 'top'
}, {
xtype: 'button',
flex: 1,
text: 'Scan Bar Code',
itemId: 'scanButton',
cls: 'c-button',
iconCls: 'appCard',
iconMask: true,
iconAlign: 'top'
}]
}]
}
});


Ext.define('Csg.view.client.Welcome', {
override: 'Csg.view.Welcome',


buildItems: function() {
var items = this.callOverridden(arguments);


items[1].items.push({
xtype: 'button',
flex: 1,
text: 'Sweet!',
itemId: 'scanButton',
cls: 'c-button',
iconCls: 'appCard',
iconMask: true,
iconAlign: 'top'
});


return items;
}
});

godric.kwok
5 Feb 2012, 3:58 AM
Ext.define('Ext.ux.CompositeField', {
extend: 'Ext.field.Field',
xtype: 'ux_compositefield',
isField: false,
initialize: function() {
this.callParent();
},
config: {
cls: 'ux-compositefield',
component: {
xtype: 'panel',
layout: {
type: 'hbox',
},
...
items: [{
xtype: 'textfield',
...
},
{
xtype: 'textfield',
...
}],
}
},
getRefItems: function (deep) {

// Originally going to do some overridings here...

var items = this. [[[ Some magic here to reach for the inner-panel ]]] .items.slice(),
ln = items.length,
i, item;

// but even if I merely called the original this.getItems(), it throws "no such method" error.

if (deep) {
for (i = 0; i < ln; i++) {
item = items[i];
if (item.getRefItems) {
items = items.concat(item.getRefItems(true));
}
}
}

// then I thought at least it can return whatever its parent does,
// but then not even the parent's getRefItems() exists!?

return this.callOverridden(arguments);
}
});

***Original getRefItems() under Ext.Container ***:

Ext.define('Ext.Container', {
extend: 'Ext.Component',

alternateClassName: 'Ext.lib.Container',

requires: [
'Ext.layout.Layout',
'Ext.ItemCollection',
'Ext.behavior.Scrollable',
'Ext.Mask'
],

xtype: 'container',

...

getRefItems: function(deep) {
var items = this.getItems().items.slice(),
ln = items.length,
i, item;

if (deep) {
for (i = 0; i < ln; i++) {
item = items[i];
if (item.getRefItems) {
items = items.concat(item.getRefItems(true));
}
}
}

return items;
},

...
});

Hi,

I am also stuck on similar matters.

I was trying to extend Ext.field.Field to define a CompositeField. But then for this to work properly, I NEED to extend getRefItems() since the original one cannot read into non-"items"-named inner-components.

Even the source's comment says so:

// Used by ComponentQuery to retrieve all of the items
// which can potentially be considered a child of this Container.
// This should be overriden by components which have child items
// that are not contained in items. For example dockedItems, menu, etc
// @private

In short, I need to extend getRefItems() to read into the CompositeField's panel to get its items.

It seems to me that the method overriding at Ext.field.Field doesn't realize that ultimately the getRefItem() a few levels above would be called, then the framework simply tells me Ext.field.Field itself doesn't have getRefItem() defined locally & halts... (sounds about right?)

I would like to seek your kind advice to make this overriding work, or just shed some light on what the framework was doing, it will be very much appreciated, thanks.

Godric