Ext.define / Ext.extend in Sencha Touch 2

Question

I'm just starting to build Sencha Touch 2 MVC. I have Ext 3 hard experience, but it's a whole new world.

It seems I'm not very far from creating a presentation. I took my code in two directions, based on what I saw on the Internet, and it doesn’t work.

Way 1

My app.js:

Ext.application({ name: 'BkAdmin', views: ['LoginForm'], launch: function() { Ext.create('BkAdmin.view.LoginForm'); } }); 

My view / LoginForm.js:

 Ext.define('BkAdmin.view.LoginForm', { extend: 'Ext.form.FormPanel', config: { fullscreen: true, initComponent: function() { alert('yo!'); BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); } } } ); 

This loads without errors, and I can even add form elements in the configuration section. However, initComponent () is inexplicably never called, so the view is completely inflexible.

Way 2

My app.js:

 Ext.application({ name: 'BkAdmin', views: ['LoginForm'], launch: function() { BkAdmin.view.LoginForm = new BkAdmin.view.LoginForm(); } }); 

My view / LoginForm.js:

 BkAdmin.view.LoginForm = Ext.extend(Ext.form.FormPanel, { fullscreen: true, initComponent: function() { alert('yo!'); BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); } }); 

This plane does not work. Chrome reports "Cannot set property" LoginForm "from undefined" ... how did you actually view get undefined? He also says: “The following classes are not declared, even if their files have been loaded:“ BkAdmin.view.LoginForm. ”I am sure it seemed to me.

There are many questions: what did I do wrong in the above ways? How can I get initComponent () to call in path 1 and run Path 2? Which code is better to use quotation marks?

Thanks!

Answer 1

Path 1 is the (almost) right way. You should use Ext.define and not Ext.extend (which does not work very well / reliably) due to the new class system (same as Ext JS 4).

The config block is used only for configurations defined in the class / documentation for this class. Things like fullscreen , items , cls , style , etc. Everything that is defined in this config block, which is not a configuration, will be stored in instance.config .

Instead, you should put the methods that you want to override in the main configuration object in Ext.define :

 Ext.define('MyApp.view.MyView', { extend: 'Ext.Component', config: { cls: 'custom-cls', html: 'Some html' }, initComponent: function() { // do something } }); 

Sencha also abandoned initComponent in Sencha Touch 2.0. When you need a method called when instantiating a class, you must use the initialize method. Note that ideally you should not set configurations inside initialize unless you really need to. You should always put them in a config block.

Finally, you can call the extended class method using:

 this.callParent(arguments); 

There is a guide to changes to the class system between Ext JS 3.x and Ext JS 4.x, available here , which may be of some help to you. There is also an updated system guide for Sencha Touch 2.x here .