1

我正在使用 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'
        }]
    }]
});

但这会使按钮扩展为视口的高度。

4

1 回答 1

9

如果您真的想浮动该按钮，则将其添加到容器或视口是没有意义的。将它渲染到文档正文，用 配置它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"
    }]
}
于 2013-07-23T11:41:02.127 回答