ExtJS 4 在 xtype:toolbar 中使用类似 float:right 的东西答案

【问题标题】：ExtJS 4 using something like float:right in a xtype:toolbarExtJS 4 在 xtype:toolbar 中使用类似 float:right 的东西
【发布时间】：2012-12-14 02:20:14
【问题描述】：

我的停靠项目很少：

    dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    xtype:'button',
                    icon: g_settings.iconUrl + 'add-icon.png',
                    text: 'Abc',
                    handler: this._add
                },{
                    icon: g_settings.iconUrl + 'remove-cancel-icon.png',
                    text: 'Del',
                    disabled: true,
                    itemId: 'delete',
                    scope: this,
                    handler: this.onDeleteClick
                }]
            },{
                xtype:'toolbar',
                dock: 'bottom',
                items: [{
                    xtype: 'button',    
                    height: 30,
//                  padding: '0 0 0 50',
                    icon: g_settings.iconUrl + 'add-file-to-doc.png',
                    text: 'Select',
                    itemId: 'conndoc',
                    scope: this,
                    disabled: true,
                    handler: this._connToDocument
                }]
            }, {
                xtype: 'pagingtoolbar',
                id: 'id-docs-paging',
                store: 'Documents',
                dock: 'bottom',
                displayInfo: true
            }],

xtype:pagingtoolbar 和带有text: Select 的工具栏都位于底部，第二个仅包含一个按钮，默认情况下位于工具栏的左侧，但我想留在右侧。我尝试了 ExtJS 文档中的“->”和其他选项，但由于我在工具栏中只有一个项目，我认为我不能使用标准选项。所以我如何将工具栏中的单个项目定位在右侧?

谢谢

勒隆

附言

我忘了 - 分页工具栏总是出现在带有图标的工具栏上方，即使它是停靠项目列表中的最后一个，但我希望分页在底部是最新的，所以如果有人可以帮助我解决这个问题太……

【问题讨论】：

再一次，一些简单的东西...非常感谢您对此问题的任何帮助。

标签： css extjs

【解决方案1】：

好的，所以这两个问题都解决了，也许不是那么困难，但可能对其他人有用。所以，正如我在上面的评论中所写 - 将按钮移动到工具栏的右侧，我只是使用了这个items: ['->',{。至于第二部分，似乎具有dock: 'bottom' 属性的第一个元素将位于最底部，并且代码中下一个且具有相同位置的每个元素都将放在底部，但高于前一个元素。所以这里重要的是在牢记上述信息的情况下以正确的顺序编写我的元素。

【讨论】：

【解决方案2】：

您也可以使用面板中的按钮：[] 配置 - 然后它会自动放置在右下角。你是怎么用'->'找到的...我似乎在文档中找不到它。谢谢

【讨论】：

【解决方案3】：

'->' 是 tbfill 的快捷方式 http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Toolbar.Fill

【讨论】：