Sencha Touch Inheritance Question

[jpongin]

Hi. We are currently building out a product prototype using Sencha Toucha and ExtJS 4.

I was under the assumption that Sencha Touch 1.1 and ExtJS 4 were going to use the same inheritance syntax as they both share the same core code. However, this doesn't seem to be the case. Sencha Touch 1.1's inheritance syntax uses ExtJS 3.x's Ext.extend(...) and not ExtJS4's Ext.define(...).

Sencha Touch Inheritance Syntax (much like ExtJS 3.x)

myPanel = Ext.extend(Ext.Panel, {...});
Ext.reg('myPanel', myPanel);

ExtJS4 Inheritance Syntax

Ext.define('MyPanel', {extend: 'Panel',...});

ExtJS 4's Ext.define(...) design is much more intuitive and elegant for defining classes and sub classes, and we would much rather use this method upfront vs. having to change our code later on.

Does Sencha Touch plan on using Ext.define(...) to define classes in the near future?
If so when?
If not, why not?

[jpongin]

Excuse my bumping, but I'd like some type of answer or opinion from anyone with the same concern.

[dgmelvin]

Is there an answer to this?

[briankuyath]

[bump]

We're also interested and would appreciate a response.

[dgmelvin]

I asked a contact I have access to at sencha about this and he indicated it should be resolved in Sencha Touch 2 coming out this fall some time. But, I don't really have anything definitive I can point to that promises that. I sure hope they fix it. It's a really big deal for me and I imagine many others trying to share come code between mobile and desktop code.

[briankuyath]

I asked a contact I have access to at sencha about this and he indicated it should be resolved in Sencha Touch 2 coming out this fall some time. But, I don't really have anything definitive I can point to that promises that. I sure hope they fix it. It's a really big deal for me and I imagine many others trying to share come code between mobile and desktop code.

@dgmelvin Does this mean that inheritance is or isn't supported in the current version of Sencha Touch? I just dove in yesterday (starting a new project) and am running into problems figuring out the syntax of all things.

[dgmelvin]

My understanding is that touch 1 uses the inheritance model from EXTJS 3 (or very close to that) and does not support ext.define that is part of EXTJS 4 until version 2. That is what I asked about.

It would be really nice if someone from sencha would chime in and provide an actual answer to this.

[briankuyath]

My understanding is that touch 1 uses the inheritance model from EXTJS 3 (or very close to that) and does not support ext.define that is part of EXTJS 4 until version 2. That is what I asked about.

That's what I thought. Have you been able to get inheritance to work using the EXTJS 3 inheritance model? I've been looking at the API and can't seem to get my sub-class to inherit properly from its parent. Every time I call ...

Ext.reg('myBaseClass', myBaseClass);

... I get an error that says 'myBaseClass' is undefined. Yet, I've defined the class above it.

[rmlee]

You can override the Ext.define method and work with the extend and reg method to accomplish this. Simply put the following code in before any defines:

Ext.define = Ext.define ? Ext.define :
function(name, config) {
var extendObj = {};
Ext.each(config.extend.split(/\./), function(item, index) {
extendObj = index === 0 ? window[item] : extendObj[item];
});


var newObj = {};
Ext.each(name.split(/\./), function(item, index){
newObj = index === 0 ? window[item] = {} : newObj[item] = {};
});
newObj = Ext.extend(extendObj, config);

var alias = config.alias;
if(alias) {
Ext.reg(alias.replace(/^(widget\.)/,''), newObj);
}
}

Then calling with:

(function() {
Ext.define('MySettings', {
extend: 'Ext.Panel',
alias: 'widget.mysettings',
html: 'Settings Panel'
});
})();

will be the equivalent of:

MySettings = Ext.extend(Ext.Panel,{
extend: 'Ext.Panel',
alias: 'widget.mysettings',
html: 'Settings Panel'
});
Ext.reg('mysettings', MySettings);

This provides a consistent behavior for extending an object using Ext.define. Not it is not handling a case with no extension. However, that should be pretty straight forward in that you would simply check for extension and if it doesn't exist don't call the extend method. Have not worked this out yet.

[rmlee]

Ext.define = Ext.define ? Ext.define :
function(name, config) {
var newObj;
Ext.each(name.split(/\./), function(item, index){
newObj = index === 0 ? window[item] = {} : newObj[item] = {};
});


var extendName = config.extend;
var extendObj;
if(extendName) {
Ext.each(config.extend.split(/\./), function(item, index) {
extendObj = index === 0 ? window[item] : extendObj[item];
});
newObj = Ext.extend(extendObj, config);
}


var alias = config.alias;
if(alias) {
Ext.reg(alias.replace(/^(widget\.)/,''), newObj);
}
}