View Full Version : [CLOSED][2.2.1] 'moved' event added to a splitBar never fires

30 Nov 2009, 1:58 PM
Problem: 'moved' event added to a splitBar never fires

Platform: Ext 2.2.1
Browser(s): IE 6, IE 7


I'm adding the 'moved' event to a splitBar.

I am able to get the splitBar and I can attach the event, I get no JavaScript error, however, the event never fires.


var resizeFunc1 = function (obj) {
alert("Hello World!");
var splitBar = ct.formBuilder2.fromModule.ctCenterContainer.panel.getLayout().north.getSplitBar();
splitBar.on('moved', resizeFunc1.createCallback());


Based on the attached graphic from Script Debugging, As I keep inspect the obj/events... I went 10 levels deep with the same information recurring.

30 Nov 2009, 3:15 PM
I found the problem and I think it is a bug in BorderLayout. SplitBar::onEndProxyDrag contains code:

// ...
if(this.fireEvent('beforeapply', this, newSize) !== false){
this.adapter.setElementSize(this, newSize);
this.fireEvent("moved", this, newSize);
this.fireEvent("resize", this, newSize);
// ...
BorderLayout install listener on beforeapply:

this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation);
this.split.placement = s.placement;
this.split.getMaximumSize = this[s.maxFn].createDelegate(this);
this.split.minSize = this.minSize || this[s.minProp];
this.split.on("beforeapply", this.onSplitMove, this);
this.split.useShim = this.useShim === true;
this.maxSize = this.maxSize || this[s.maxProp];
and BorderLayout::onSplitMove returns false preventing moved and resize events of SplitBar to fire.

// private
onSplitMove : function(split, newSize){
var s = this.panel.getSize();
this.lastSplitSize = newSize;
if(this.position == 'north' || this.position == 'south'){
this.panel.setSize(s.width, newSize);
this.state.height = newSize;
this.panel.setSize(newSize, s.height);
this.state.width = newSize;
return false;
I'm moving this thread to Ext 3 bugs, however, Ext 2 is also affected.

30 Nov 2009, 4:06 PM
Thanks for looking into it Saki.

The behaviour here is intended, because the splitbar sizes the underlying element, which, in this case, we don't want to do. We want to call the panel method to change the dimensions.

@OP Is there any particular reason you're listening to that event? You could just use the resize event on the panel.

30 Nov 2009, 7:31 PM
There is an obvious reason, I need to keep state when I perform an maximize/minimize between 2 panels but if the user uses the split bar, the next min/max, I must know that the moved split even has been fired for keeping state.

resize fires all the time, so, it's not feasible to work this correctly.

'moved' on the splitbar is the perfect event for this.


1 Dec 2009, 12:12 AM
Couldn't you use 'beforeapply'?

1 Dec 2009, 2:04 AM
Yes, usin beforeapply event would solve all that as it fires when moved would fire if not disabled by BorderLayout listener. I suggest OP to use beforeapply instead of moved.

1 Dec 2009, 7:46 AM
Unfortunately, 'beforeapply' doesn't fire either.. That being said.. 'beforeresize' does fire and since all i'm doing is keeping state for a variable.., the operation isn't too expensive, so that's what I must use for now.

But.. 'moved' would be the perfect event for the use I require.

Thank you.

1 Dec 2009, 8:06 AM
beforeapply does fire. To test it:

1. navigate to http://examples.extjs.eu/simplestbl.html
2. in Firebug console type: Ext.util.Observable.capture(Ext.getCmp('simplestbl').layout.east.getSplitBar(), console.info)
3. move the splitbar and watch the console output

1 Dec 2009, 8:07 AM
Ah, yes, if the first beforereply listener returns false, no other listeners are fired.

The dangers of using listeners internally within the framework!

1 Dec 2009, 8:40 AM
I did test the 'beforeapply and it doesn't fire. the code is self explanatory. That being said.. 'beforeresize' works, and while it's not the most efficient event to use for what I do, it works.

Thanks again.

The code which doesn't function:

var splitFunc = function (obj) {
ct.formBuilder2.fromMtvTimesheet.resizeType = "split";
var splitBar = ct.formBuilder2.fromMtvTimesheet.ctCenterContainer.panel.getLayout().south.getSplitBar();
splitBar.on('beforeapply', splitFunc.createCallback());

The code which does function:

var splitFunc = function (obj) {
ct.formBuilder2.fromMtvTimesheet.resizeType = "split";
var splitBar = ct.formBuilder2.fromMtvTimesheet.ctCenterContainer.panel.getLayout().south.getSplitBar();
splitBar.on('beforeresize', splitFunc.createCallback());

1 Dec 2009, 8:42 AM
Note: added to the previous comment. 'beforeapply' doesn't fire for IE 6 and IE 7. It may work well with FireBug.. Unfortunately, this is an enterprise class application and the client uses IE 6 and 7.. So even if it works in FireFox.. still doesn't help me.

Thanks Again.

1 Dec 2009, 9:01 AM
It fires.

It's just that as you show, BorderLayout adds the first listener:

this.split.on("beforeapply", this.onSplitMove, this);

Which returns false, and so aborts the firing, so no subsequent listeners (ie, your listener) are called.

Try adding an interceptor to the SplitBar's onSplitMove method.

1 Dec 2009, 9:25 AM
Could you provide an example of a "code" interceptor? it would be greatly appreciated.

Thank you.

1 Dec 2009, 10:27 AM
The API docs for createInterceptor have example code.

1 Dec 2009, 10:28 AM
Also talked about here: http://www.extjs.com/blog/2009/11/11/advanced-plugin-development-with-ext-js/