View Full Version : ExtJs 4.1 and control in controllers

24 Jul 2012, 12:35 AM
I'm trying to upgrade to 4.1.1
There's a controller with such init function:

,init: function() { this.callParent();
this.cardPanelSelector = '[id=' + this.getMainViewId() + ']';
{ref: 'cardPanel', selector: this.cardPanelSelector}
var control = {};
control[ this.cardPanelSelector] = {
afterrender : this.foo
It works ok in 4.0.7
But in 4.1.1 the "afterrender", and "render" event from card panel launches only (ONLY!) if i add this to card panel's initComponent function:

initComponent: function(){
this.on('afterrender', this.bar);

and this to card panel's code

bar : function(){debugger;
or just

bar: Ext.emptyFn

Why?! What's wrong with that thing? By the way (i dunno it's important), when init() is going on there's no card panel in the DOM and in components

24 Jul 2012, 3:30 AM
found smth: in ext 4.1 there's no 'render' method in abstract component, and there's one in ext.util.renderable, which fires 'afterrender' only if there r any listeners, but when u attach a listener via 'control' method, there's nothing to listen, so when panel renders, it has no listeners, except those that were defined @ initComponent.

24 Jul 2012, 11:05 AM
1. Why don't you just do it the normal way and follow the examples? If you fight Ext, it will fight back, and win.

I know exactly why you're trying to do it that way, and I can assure you, it's not a good plan. You should look into Deft controllers if you want to do MVC the non-Sencha way, and not try your own.

2. You should figure out how to use Ext.util.Observable.capture() to see all the events

Also, figure out how to use the debugger; statement in JavaScript to step through your code. If you try to "customize" ExtJS, you need to know this.

3. Why are you calling callParent() in init, which doesn't override anything? It's a template method

Also, there IS a render event in Abstract Component. http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-render

render and afterrender work just fine here:


24 Jul 2012, 3:18 PM
thanks mate, i'll try to do that.
this type of architecture is written by previous person, so i have to deal with it :(
many extjs methods are rewritten even ext.app.application, ext.app.controller ext.app.eventbus.

24 Jul 2012, 3:29 PM
1. why controlling view's events with control method and selectors is not right?
3. it has about 2 ansectors, leading to ext.app.controller

24 Jul 2012, 11:42 PM
Yeah. There is :) But without firing 'afterrender'. Nevermind.
I think i'm totally lost inside that hard mix of our old code and new extjs's one. Gotta do several steps back maybe.

25 Jul 2012, 4:48 AM
found solution.
In previous version, when the component had two classes in cls ( cls: 'foo var') there were enough to query for it with '[cls=foo]'. Now u gotta write full string like '[cls=foo bar]'.
That's all. :))