ExtJS:'；中心旁边'；

我想在ExtJS 4.2中实现：

e、 g.一个居中的按钮，其右侧有一个不会导致按钮移动的东西（进度指示器）

我的所有布局目前都是相对的，主要使用HBox和VBox，我希望保持这种方式，而不是使用任何绝对的方法来解决这个问题

可能有很多方法可以做到这一点，但其中很多方法都很可怕。我想“浮动”属性可能会起到一定作用，但我不能完全理解

有什么建议吗？

使用HBox布局的配置在中间显示项目，并在按钮左侧应用与进度条宽度相等的值：

{
    layout: {
        type: 'hbox',
        pack: 'center'
    },

    items: [{
        xtype: 'button',
        text: 'Push me',
        width: 100,
        margin: '0 0 0 100' // margin-left equal to the width of the progress bar
    },{
        xtype: 'progressbar',
        width: 100
    }]
}

---

也请查看。

这是我的尝试，如果有问题，请告诉我

Ext.onReady(function() {
var ct = new Ext.panel.Panel({
    width: '100%',
    renderTo: Ext.getBody(),
    margin: 10,
    border: true,
    id: 'ppanel',        
    layout: {
        type: 'hbox',
    },

    items: [{
        xtype: 'button',
        text: 'Push me',
        width: 100,
        id: 'bbutton'
    },{
        xtype: 'progressbar',
        width: 100,
        id: 'pbar'
    }],
    listeners: {
        afterrender: function() {
            pwidth = Ext.getCmp('ppanel').getWidth();
            bwidth = Ext.getCmp('bbutton').getWidth();
            button = Ext.getCmp('bbutton');
            progrs = Ext.getCmp('pbar');
            bmargin = (pwidth/2 - bwidth/2);
            button.setMargin("0 0 0 "+bmargin);
            progrs.setMargin("0 0 0 10");
        }
    }
});
});

---

我喜欢这个，但理想情况下需要它更具活力。是否有合适的时机动态获取进度条的宽度？我试着在它的“afterRender”事件中这样做，但它仍然是零。我想小提琴是把PB放在一个比需要的更大的固定宽度容器中，左对齐。它适用于我的afterrender（我已经相应地更新了我的文件）。父容器上的afterrender，而不是进度条，似乎完成了这项工作。谢谢你想要动态的进度条宽度，但我不明白你的目标。例如，面板的宽度是多少？它是否也是动态的取决于窗口大小？是的。除了边距和填充外，所有内容都是动态的和可调整大小的。