Question

我在一个简单的容器中有一个工具栏。它们在窗口的div上呈现。当我调整窗口大小时，工具栏保持静止。如果窗口变小，工具栏开始消失（溢出到外面）。如果窗口变大，工具栏会保持其位置，而不是试图保持在最开始的位置。我已经尝试过调整大小并启用溢出配置，但似乎没有任何效果。我认为它通过div的定位可能是问题，但我不确定如何测试或修复它。有什么想法吗？

一些示例代码：

var toolbar = Ext.create('MyToolbar');
var toolbarContainer = Ext.create('widget.contaienr', {renderTo: 'myDiv', items: [toolbar]});
.
.
.
<div id='myDiv'></div>

Answer 1

不应该以这种方式配置工具栏。如果你有一个窗口，它应该这样配置：

Ext.create('Ext.window.Window',{
     title:'some title'
    ,width:400
    ,height:300
    ,tbar:[{
        // here come toolbar items
    }]
});

有关更多示例，请参阅http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/menu/menus.html和其他工具栏示例。

Answer 2

在EXtJs文档中检查此功能

onWindowResize( fn, scope, [options] )

添加一个侦听器，以便在调整浏览器窗口大小时收到通知，并提供调整大小事件缓冲（100毫秒），将新视口宽度和高度传递给处理程序。

示例代码如下所示（我想你必须在你的afterRender中写它。（你必须添加这个事件然后解雇它。））在init组件中添加事件如下所示

this.addEvents('setInboxTileSource');

在afterRender中触发事件如下所示

Ext.EventManager.onWindowResize(function (w, h) {
    this.fireEvent('BROWSER_WINDOW_RESIZE')
}, this, {buffer: 150});

您必须聆听事件并设置工具栏的宽度和高度。

listeners: {
     BROWSER_WINDOW_RESIZE: this.handleResize,
     scope: this
}

handleResize:function(){   
    this.setHeight(Ext.getBody().getViewSize().height - 270);
    this.setWidth(Ext.getBody().getViewSize().width- 100);
}

希望这可以帮助你...

ExtJS在窗口调整大小时重新定位/调整大小工具栏

2 个答案: