将 extjs dockeditems 中的按钮与左侧的分页工具栏右对齐

Posted 2023-02-26

【中文标题】将 extjs dockeditems 中的按钮与左侧的分页工具栏右对齐

【英文标题】：Right align a button in extjs dockeditems with pagingtoolbar on left

【发布时间】：2014-04-17 20:39:59

【问题描述】：

我正在开发 Extjs 4.2，以下是我的一段代码。分页工具栏与面板左侧对齐。我希望 InfoButton 与面板的右侧对齐。我希望分页栏和按钮在同一行，分页工具栏完全左对齐，InfoButton 完全右对齐。现在，分页工具栏完全左对齐，但 InfoButton 就像居中对齐，我尝试进行边距对齐和填充对齐。但它仍然保持不变。如果我在这里遗漏了什么或者我应该做些什么来右对齐按钮，有人可以帮助我。

this.dockedItems = [
        
            xtype: 'pagingtoolbar',
            itemId: 'FirstToolbar',
            dock:'bottom',
            store: Store,
            displayInfo: true,
            displayMsg: 'Displaying info 0 - 1 of 2',
            emptyMsg: "No info to display",
            items: [
                
                    xtype: 'container',
                    flex: 1
                , '->',
                
        xtype: 'button',                        
                    cls:'InfoButton', 
        itemId: 'InfoButton',                       
                    dock:'bottom',  
                , '->'
            ]
        
    ];

【参考方案1】：

您需要将按钮定义在与分页工具栏相同的级别：

this.bbar = [
    
        xtype: 'pagingtoolbar',
        itemId: 'FirstToolbar',
        store: Store,
        displayInfo: true,
        displayMsg: 'Displaying info 0 - 1 of 2',
        emptyMsg: "No info to display"
    , '->',
    
        xtype: 'button',                        
        cls:'InfoButton', 
        itemId: 'InfoButton',
        text: 'sample'
    
];

【讨论】：

您好，感谢您的建议，已尝试过，但页面本身无法打开。认为将按钮添加到与分页工具栏相同级别的这种方式是行不通的。缺少某些东西或者我可能错了，如果有任何其他方法或者您的代码中缺少某些东西，请告诉我。

好吧，我错过了两件事：您需要在 bbar (=bottombar) 中定义所有内容，而您忘记为按钮设置文本

我尝试使用 bbar 但它正在缩小我的结果集网格大小，现在看起来很紧凑，所以这可能不适用于这个问题。请问还有什么想法吗？...