PDA

View Full Version : Extending other classes then Panel



jcoenrae
14 Sep 2011, 12:34 AM
Hi,

I want to create classes of the objects I use in my application by using Ext.extend. I got this working for Panels (and all derivatives), but not for other things. Is it possible to extend Toolbars, datastores?

Here is my code for the toolbar:


app.views.NavigationToolbar1 = Ext.extend(Ext.Toolbar,{
initComponent : function(){
Ext.apply(this,{
title: 'Navigation',
id: 'navigationToolbar1',
items: [{
ui : 'back',
text: 'Menu',
handler: function() {
Ext.dispatch({
controller: app.controllers.menuController,
action: 'menu'
});
}
},{
xtype: 'spacer'
},{
ui: 'forward',
text: 'Search',
handler: function() {
Ext.dispatch({
controller: app.controllers.navigationController,
action: 'searchAddress'
});
}
}]
});

app.views.NavigationToolbar1.superclass.initComponent.apply(this,arguments);
}
});

The reason I want to extend all these things is because I want to use i18n in my Sencha-PhoneGap application and therefore I need to be able to recreate all my objects.

Thanks

Jolien

AndreaCammarata
15 Sep 2011, 6:41 AM
Hi Jolien.
Sure you can!
I write you a simple example based on your code that show you how:




Ext.regApplication('MyApp', {

launch: function() {

//Definition of the custom Toolbar
MyApp.views.NavigationToolbar1 = Ext.extend(Ext.Toolbar, {
initComponent : function(){

Ext.apply(this,{
title: 'Navigation',
id: 'navigationToolbar1',
items: [{
ui : 'back',
text: 'Menu',
handler: function() {

Ext.dispatch({
controller: app.controllers.menuController,
action: 'menu'
});

}
},{
xtype: 'spacer'
},{
ui: 'forward',
text: 'Search',
handler: function() {

Ext.dispatch({
controller: app.controllers.navigationController,
action: 'searchAddress'
});
}
}]
});

MyApp.views.NavigationToolbar1.superclass.initComponent.call(this);
}
});

//Assigning an xtype for the custom Toolbar
Ext.reg('mytoolbar', MyApp.views.NavigationToolbar1);

//Definition of the custom Toolbar
var p = new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'mytoolbar'
}]
});

}

});


Please notice that all your custom componets should be defined in separates js.
I do everything in the same script only to reply you faster.

Even notice that if you don't have to write some code to be executed in your initComponent function, you don't need to define it to apply your custom config.
Just write:



//Definition of the custom Toolbar
MyApp.views.NavigationToolbar1 = Ext.extend(Ext.Toolbar, {
title: 'Navigation',
id: 'navigationToolbar1',
items: [{
ui : 'back',
text: 'Menu',
handler: function() {

Ext.dispatch({
controller: app.controllers.menuController,
action: 'menu'
});

}
},{
xtype: 'spacer'
},{
ui: 'forward',
text: 'Search',
handler: function() {

Ext.dispatch({
controller: app.controllers.navigationController,
action: 'searchAddress'
});
}
}]
});

//Assigning an xtype for the custom Toolbar
Ext.reg('mytoolbar', MyApp.views.NavigationToolbar1);


Hope this helps.

jcoenrae
17 Sep 2011, 6:31 AM
Hi,

Now I am able to extend all graphic components (I had a typo somewhere). Now I would like to extend a datastore. I couldn't get the initComponent thing working there, so I tried to add the store by registring it. This is working but when I destroy my viewport these registered items (controllers, models, stores, ... ) are not destroyed.

The reason I need to destory and recreate them is because he needs to fetch some new strings from my i18n object (in a different language). This is why I prefer creating new objects and using initComponent. That way the objects are really recreated.

So, point of this post: is there a way to extend a data store and to create new instances of it. Or is there a way to refresh the registered objects?

Thanks

NickT
17 Sep 2011, 8:42 AM
Store is an extension of AbstractStore, which extends Observable. Only extensions of Component will have an initComponent. I would recommend looking at the code in sencha-touch-debug-w-comments.js for examples of how to extend. You can look at Store itself which extends AbstractStore, or maybe even more valuable, look at an extension of Store, like this one for ArrayStore. You will want to do the 'initialization' work in the constructor when it comes to a Store extension.


Ext.data.ArrayStore = Ext.extend(Ext.data.Store, { /**
* @cfg {Ext.data.DataReader} reader @hide
*/
constructor: function(config) {
config = config || {};


Ext.applyIf(config, {
proxy: {
type: 'memory',
reader: 'array'
}
});


Ext.data.ArrayStore.superclass.constructor.call(this, config);
},


loadData: function(data, append) {
if (this.expandData === true) {
var r = [],
i = 0,
ln = data.length;


for (; i < ln; i++) {
r[r.length] = [data[i]];
}

data = r;
}


Ext.data.ArrayStore.superclass.loadData.call(this, data, append);
}
});
Ext.reg('arraystore', Ext.data.ArrayStore);

jcoenrae
17 Sep 2011, 10:15 AM
Hi,

Thank you for your replies. Looking in the Sencha code was a good idea, lots of examples over there :).

I got it working without extending by just overwriting the data when I change languages in the store.

Now I have a different problem with XTemplate. I tried to do it without creating a new class but I can't get it working. I posted it in a different thread because it has nothing to do with extending classes anymore, you can find it here (http://www.sencha.com/forum/showthread.php?147522-Problem-with-changing-XTemplate-on-Panel&p=649941#post649941)).

Thanks

Jolien