Question

我有一个简单的边框布局，具有以下设置：

----------------------------------------------------------
|         |                                              |
|  tree   |                 iframe                       |
|         |                                              |
|         |                                              |
|         |                                              |
|         |                                              |
|         |                                              |
|         |                                              |
|         |                                              |
|         |                                              |
----------------------------------------------------------

整个事情都是这样设置的（显然忽略了细节）：

Ext.create('Ext.panel.Panel', {
    layout: 'border',
    height: 600,
    width: 1000,
    items: [
         {
             xtype: 'treepanel',
             (tree panel stuff here),
             region: 'west',
             split: true,
             width: 300,
             html: 'west panel'
         },
         {
             xtype: 'component',
             autoEl: {tag: 'iframe'},
             region: 'center',
             split: true
         }
    ],
    renderTo: 'content-div'

});

这是我的html的一个（简单化）视图：

<html>
<head></head>
<body>
<div>some stuff here....</div>
<div id='content-div'></div>
</body>
</head>

这是我的小提琴：Example

当我尝试拖动分割条以从左到右调整树的宽度时，会发生什么...我没有看到＆＃34;阴影＆＃34;分离杆的位置，当鼠标未被点击时它不会释放。但是，如果我将分离器向左移动，我可以看到＆＃34;阴影＆＃34;分离器栏的工作方式和预期的一样。

我通过从iframe更改为任何其他类型的组件（面板，网格等）测试了我的理论，它运行得很好。

有没有人见过这种行为？如果有，是否有一个简单的解决方法？

感谢。

Answer 1

按照Saki所说的，找到一个解决方法，插入一个等于5px的边距。它在Firefox上工作得很好，至少。

{

xtype: 'component',

margin: '0 0 0 5', // <-- New margin property

autoEl: {tag: 'iframe'},

region: 'center',

split: true

}

Answer 2

是和否。是的，我已经看到了它，不，解决它并非易事。问题是iframe是一个新的浏览器窗口，所以如果鼠标移过它，它就会开始接收事件。换句话说：鼠标向右移动到iframe，向左移动到主窗口。

如果我需要修复它，我可能会在主窗口中创建一个透明的div，在拖动拆分器时覆盖iframe，以便主窗口可以继续接收事件。

Answer 3

我能够通过将分割器的跟踪器配置设置为零容差来解决此问题。

from itertools import *

print [[1*x[0], 2*x[1], 3*x[2]] for x in list(product([1,-1], repeat=3))]
[[1, 2, 3], [1, 2, -3], [1, -2, 3], [1, -2, -3], [-1, 2, 3], [-1, 2, -3], [-1, -2, 3], [-1, -2, -3]]

Tolerance控制在认为拖动之前必须移动拆分器的像素数。

http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.resizer.Splitter-cfg-tracker http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.dd.DragTracker-cfg-tolerance

Ext JS 4.2边框布局与IFrame

3 个答案: