Extjs 4.2将按钮浮动到应用程序中的固定位置

Question

我正在使用ExtJs 4.2

我的应用程序需要一个按钮来调用面板,该面板在点击后保存导航树节目.

此按钮必须始终可见,并且垂直居中于屏幕的中间和右侧.

我该如何实现这种行为？我不想将按钮嵌套在面板中,它应该是视图端口的一部分......

这是我尝试过的:

Ext.define('NG.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    id: 'appviewport',
    items: [{
        itemId: 'app-header',
        xtype: 'appheader',
        region: 'north',
        weight: 10,
        border: false,
        height: 60
    }, {
        itemId: 'navigation',
        xtype: 'button',
        region: 'west',
        weight:15
    }, {
        xtype: 'carddeckmanager',
        region: 'center',
        weight:10,
        border: false,
        cls:'n-cardmanager-box',
        items: [{
            itemId: 'dashboard',
            xtype: 'dashboard'
        }]
    }]
});

但这会使按钮展开为视口的高度.

Answer 1

如果你真的想浮动那个按钮,将它添加到容器或视口是没有意义的.将其渲染到文档正文,配置它floating: true,并给它一个z-index,以确保它保持在任何窗口之上(如果这是你想要的).

然后,您可以使用其alignTo方法将其放置在您想要的位置,但更好的anchorTo是,即使在调整浏览器大小时,也可以将其放在放置它的位置.

所有这些都给了我们:

var body = Ext.getBody();

// Create the button
var button = Ext.widget('button', {
    text: "Yo"
    ,floating: true
    ,renderTo: body
});

// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);

// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);

将此代码放在应用程序启动过程中的某个位置.候选人可以是init您的应用程序的initComponent方法,视口的方法,或afterrender视口上的单个侦听器......

现在,如果您想要的只是按钮在视口的右边框中保持可见但没有填充整个区域,则需要将其包装在具有适当布局的容器中.例如,将其添加到视口中:

{    
    region: 'west',
    layout: {type: 'hbox', pack: 'center', align: 'middle'},
    items: [{
        xtype: 'button',
        text: "Viewport button"
    }]
}