View Full Version : Ext.ux.extend - extension of Ext.extend )

4 Oct 2008, 12:25 PM
Ext.ux.extend - extension of Ext.extend )


This is not a "tongue twister", but an improved, fully backward-compatible, drop-in replacement (aka patch) of Ext.extend function, which support:
soft-coded inheritance
this.superclass().onRender() vs
Ext.ux.myUx.superclass.onRender.call(this, ..)
overloading support
Ext.ux.extend = function (superClass, subClass, overrides) {
}.signature(Function, Function, Object).overload(
function (subClass, overrides) {
return Ext.ux.extend(
function () { this.superClass('constructor', arguments); },
}.signature(Function, Object)

2 standart overloading options : addIterator and addInspector (see the docs)


For documentation please refer repository:


For demo, read this post to the end )

Test suite

Link to the test suite: http://extjs-ux.org/repo/authors/SamuraiJack/trunk/Ext/ux/extend/Ext.ux.extend.html

To make sure that this extension is really "non-breaking drop-in replacement" for Ext.extend lets also test it with "official Ext test suite" - its "examples" folder. We'll do it by replacing Ext.extend with Ext.ux.extend and changing the way superclass method calls everywhere in the sources. So, step by step:

- Inserting Ext.ux.extend code to the ext-base.js

- Disabling one error warning. This is needed coz sometimes Ext uses methods in inheritance-breaking way and 1 method belongs to 2 classes simultaneously, for example

adjustSize : Ext.BoxComponent.prototype.adjustSize, in Ext.form.HtmlEditor

- replace the text of files into examples/ and source/ folders by this regex

/(\w+\.)+superclass\./this.superclass()./gso the

Ext.widget.superclass.onRender.call(this, ct, position); becomes everywhere

this.superclass().onRender.call(this, ct, position);The result will be the demo and its available here: http://samurai-jack.org/Ext.extend/examples/samples.html

also as archive: http://samurai-jack.org/Ext.extend/Ext.ux.extend.tar.gz

Failing tests along with any ideas/suggestions are welcome.

5 Oct 2008, 8:58 AM
Nice work Samurai. This functionality looks similar to what we have added in Ext 3. It supports two function names, this.superclass() and this.supr() . The "supr" version was to cut bytes and is what we will use throughout Ext.

5 Oct 2008, 10:18 AM
Glad to hear, thanks. Take a look also at overloading - it looks promising.

Generally I have the idea about implementing a full-fledged Class system in Ext, can you shed some more light on planning improvements in this area in Ext3?

5 Oct 2008, 5:37 PM
The only other thing awaiting check-in relating to inheritance is extendX() which offers another convenient way to access the superclass (and private class level static functions):

My.Window = Ext.extendX(Ext.Window, function(supr){
return {
initComponent : function(){
this.foo = 1;

functions before the return statement would be private static functions. Keep in mind though they would have no concept of "this" and if "this" access was required they would need to be invoked using call() or apply() or by passing "this" as an argument.

This code IMO is a little less readable though.

6 Oct 2008, 4:18 AM
As I can see the soft-coded inheritance plus extendX() offers enough flexibilty in access to "vertical inheritance chain" - subClass -> superClass.

I'd like also to draw attention to the following issue with current Class implementation:
- For example if I want to create button with custom rendering, I'm subclassing Ext.Button. Then I'd like to use that button in Ext.Toolbar, but Ext.Toolbar uses its own subclass of Ext.Button, so I need to create a subclass of Ext.Toolbar.Button
- I need to add some new functionality to Ext.data.Store, so I'm subclassing it. After that, I'd like to use my subclass as Json.Store or SimpleStore - again I need to create new subclass
- I'd like to add some functionality to all Ext.Containers, etc ...

This can be solved with adding "horizontal overriding chain" - instead of subclassing, we can add functionality directly to class. Ext already have similar concept - plugins, though they are bounded to instance level only.

Currently "horizontal overriding" (some better term should exists) can be achieved with direct prototype manipulation like here http://extjs-ux.org/repo/trunk/Ext/ux/reference/Slot.js

But its ugly and I can see smth more elegant like:

Ext.ux.ContainerSlots = Ext.extend(Ext.Plugin, {

initComponent : function () {

onDestroy : function (){

render : function () {

newFunction : function() {

Ext.Container.does(Ext.ux.ContainerSlots);So in turn it will be possible to subclass Ext.ux.ContainerSlots and extend its functionality

7 Oct 2008, 10:08 AM
Actually even more elegant solution is multiple inheritance. The concept of
this.super().method() is going away and is replacing with
this.next().method()it has strong theoretical base: