PDA

View Full Version : Best Practices: where to put override code?



sl5337
25 Jun 2013, 10:13 AM
When I want to globally override some functionality in an Ext component (and I do this very sparingly) the code doesn't seem to naturally fit anywhere in the MVC folder structure. For example, let's say I want to override some functionality in the base form field class to provide some custom initialization for all of my form fields:



Ext.override(Ext.form.field.Base, {
initComponent:function(){
this.callParent(arguments);
// some custom initialization code here...
}
})


Where should I place this code in my MVC structure? I have it in the launch function of my Application object for now, but that doesn't seem like the right place for it. Should it be in its own separate file? Or should I put all of my overrides in a single file and include that file in my application using the paths config? Just looking for suggestions to make this as clean as possible. Thanks.

skirtle
25 Jun 2013, 10:32 AM
Ideally you'd use the override support in Ext.define:


Ext.define('MyApp.form.field.Base', {
override: 'Ext.form.field.Base',

...
});

It's a little counter-intuitive but the code above does not define a new class, it overrides the existing class. By using this style of override it fits more naturally into the normal class-per-file structure and can be included using the loader.

As for what name to give the override (in my example I just switch Ext to MyApp) I'm not sure whether there's any official advice on that. Personally I don't like mixing overrides with my application code so I tend to name things in such a way to keep them in a different part of the source tree.

Occasionally I do use the one-big-patches-file approach though I'm pretty sure that's not encouraged. In that case I don't try to load it dynamically, I just script tag the patches file directly into my HTML.

LesJ
25 Jun 2013, 11:24 AM
Where should I place this code in my MVC structure?

If you are using Sencha Cmd (this is a recommended tool), you will find a directory called overrides... put your code there.

See also this (http://www.sencha.com/forum/showthread.php?261361)

Ext.define('overrides.form.field.Base', {
override: 'Ext.form.field.Base',


...
});

sl5337
26 Jun 2013, 8:04 AM
Thanks for the suggestions guys. I didn't know about the override configuration for Ext.define so that definitely helps. This is an older application that wasn't generated from Sencha Cmd so I didn't have an overrides folder. For now I created my own overrides folder under 'app' to put these overrides in. However, I can also see the benefit of having it outside of the app structure (as would have been generated by Sencha Cmd) to facilitate reuse so I might change my mind on that if the number of overrides starts to grow. At any rate, I'm on my way now so thanks again.