PDA

View Full Version : [ExtJS 4.2.3] Split resize of border layout not working with iframe



Werzi2001
22 Aug 2016, 3:35 AM
Hi,

I have a border layout that has an iframe in its center region. The east region is a simple panel that is configured to be resizeable via the splitter. If I click and drag to the right (to decrease size) everything works fine. If I drag to the left into the iframe (to increase the size) nothing happens. I guess that this happens because the drag event is not correctly recognized because of the iframe.

Example code:

Ext.onReady(function() { Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'center',
html: '<iframe src="http://www.extjs.com" width="100%" height="100%" frameborder="0"></iframe>'
}, {
region: 'east',
width: 200,
title: 'Test',
split: true,
hideCollapseTool: true,
collapsible: true
}]
});
});

Is there any solution to fix this?

Thanks a lot!

Werzi2001

Gary Schlosberg
23 Aug 2016, 7:32 AM
Yes, this is due to the iframe causing the event to be missed. If you drag to the right slightly, you can then drag to the left, but the event needs to be recognized in the part of the screen running Ext JS. I don't know of a workaround for this.

Werzi2001
23 Aug 2016, 11:13 PM
Yes, this is due to the iframe causing the event to be missed. If you drag to the right slightly, you can then drag to the left, but the event needs to be recognized in the part of the screen running Ext JS. I don't know of a workaround for this.

Thanks for your reply. I did some researches and found that setting the tolerance to 0 solves the problem. This causes the "resize" to start directly on click.


Ext.define('Override.resizer.SplitterTracker', {
override: 'Ext.resizer.SplitterTracker',

tolerance: 0
});

Gary Schlosberg
24 Aug 2016, 2:57 PM
Nice! Thanks for sharing that with the community.