PDA

View Full Version : Overrides?



mdavis6890
30 Sep 2011, 3:07 PM
Can somebody give me an example of exactly how I'm supposed to do overrides in the new architecture? I'm not quite sure what to put where.

My single HTML file:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="../js/ext-4.0.2a/resources/css/ext-all.css">

<script type="text/javascript" src="../js/ext-4.0.2a/ext-debug.js"></script>
<script type="text/javascript" src="js/admin.js"></script>

<title>Title</title>
</head>
</html>


My app.js file:




Ext.Loader.setConfig({
enabled: true,
disableCaching : false
});
Ext.application({
name: 'IDB',
appFolder: 'js/IDB',
controllers : [...],
launch: function () { .... }
});



Thanks!

skirtle
3 Oct 2011, 8:25 AM
By overrides I assume you mean bug fixes applied using Ext.override()?

I'm not sure whether any explicit support was added for this sort of thing but I'd probably do an Ext.require() call and put the overrides in the callback.

mdavis6890
3 Oct 2011, 8:57 AM
I hate to ask, but do you think you can give me an explicit code example? I normally wouldn't ask, but I've spent a few hours already trying to figure it out.

And yes, looking for something like Ext.override that I can use to create my own bug fixes.

Thanks!

burnnat
3 Oct 2011, 11:45 AM
Here's an example of how I do it:



/*
* Applies opacity settings to any existing shadow element, in addition to the layer proper.
*/
Ext.require('Ext.Layer', function() {
Ext.override(Ext.Layer, {
setOpacity: function(opacity, animate) {
this.callOverridden(arguments);

if (this.shadow && this.shadow.el) {
this.shadow.el.setOpacity(opacity, animate);
}
}
});
});

arthurakay
3 Oct 2011, 12:57 PM
I'd say that this is a difficult question, and as skirtle mentions there isn't an explicit way to handle it.

The problem is that you may not be able to wait until your application has been instantiated (via Ext.Application)... some controllers or views may need these overrides applied before they are loaded into memory.

Given that an overrides file should (almost always) only contain bug fixes, I don't see why you couldn't just add this directly to the HTML page, immediately after your reference to the ExtJS framework. Or, if you're using the SDK tools, add this file to your builder config so that it gets minified with the framework itself.

I think some discussion on this topic is warranted. Because only a small number of enterprise applications using ExtJS 4 with MVC are in production, I'd be curious to hear how the community at large is handling this.

twaindev
3 Oct 2011, 1:49 PM
I either inherit and override or load and override (like skirtle).

mdavis6890
3 Oct 2011, 3:06 PM
Here's an example of how I do it:



/*
* Applies opacity settings to any existing shadow element, in addition to the layer proper.
*/
Ext.require('Ext.Layer', function() {
Ext.override(Ext.Layer, {
setOpacity: function(opacity, animate) {
this.callOverridden(arguments);

if (this.shadow && this.shadow.el) {
this.shadow.el.setOpacity(opacity, animate);
}
}
});
});

I think I got something that works the way I want.

I added this code to my app.js file:




Ext.require('Ext.grid.header.Container', function() { Ext.override(Ext.grid.header.Container, { afterRender: function() { this.callParent(); console.log(this); var store = this.up('[store]').store, sorters = store.sorters, first = sorters.first(), hd;
if (first) { hd = this.down('gridcolumn[dataIndex=' + first.property +']'); if (hd) { hd.setSortState(first.direction, false, true); } } } });});
Ext.Application({
...
});

mdavis6890
3 Oct 2011, 3:10 PM
And I would like to officially comment on the lameness of this new forum post editor. It loses all my formating when I copy/paste from my text editor (Notepad++ on Windows 7).

LAME Editor. Why not just use TinyMCE which is great?

skirtle
3 Oct 2011, 3:21 PM
@arthurakay. It is an interesting area. As you say it's necessary to do the overrides as early as possible, so straight after the inclusion of the Ext library is ideal. One complication that has been discussed on earlier threads is that of overriding mixins. This gets quite nasty because you have to perform the override before the mixin is mixed in. With the dynamic loader this isn't too bad but when you move to production it then gets a little complicated and needs a custom ExtJS build to include the override in just the right place.