Question

我是ext.js的新手。我一直在学习Sencha文档。我正在尝试在面板中实现工具栏。我正在使用'tbar'。我想知道我是否可以在面板上创建一堆工具栏。例如我想在顶部放置3个工具栏;一个接一个。

有办法吗？

提前感谢您的指导。

Answer 1

来自4.2.2文档http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-tbar

tbar : Object/Object[]

便利性配置。 “顶栏”的缩写。

tbar: [
  { xtype: 'button', text: 'Button 1' }
]

相当于

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [
        { xtype: 'button', text: 'Button 1' }
    ]
}]

您可以使用底部配置添加多个工具栏，但我不确定它会如何显示您的想法。

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [
        { xtype: 'button', text: 'Button 1' }
    ]
},{
    xtype: 'toolbar',
    dock: 'top',
    items: [
        { xtype: 'button', text: 'Button 2' }
    ]
}]

作为小组

的一部分的示例

Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
    width: '100%',
    //tbar: [
        //{ xtype: 'displayfield', fieldLabel: ' tool bar 1' }
    //]

    //Instead of tbar(above) use the full dockedItems config
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [
            { xtype: 'displayfield', fieldLabel: ' tool bar 1' }
        ]
    },{
        xtype: 'toolbar',
        dock: 'top',
        items: [
            { xtype: 'displayfield', fieldLabel: ' tool bar 2' }
        ]
    }],
        renderTo: Ext.getBody()
});
})

Answer 2

感谢您的指导。我实施了＆＃t; tbar＆＃39;如下。这是一种正确的方法吗？

Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
    layout: 'vbox',
    width: '100%',
    defaults: {
        frame: true,
    },

   items: [
         {
             xtype: 'panel',
             width: '100%',
             border: false, frame: false,
             tbar: [
                     { xtype: 'displayfield', fieldLabel: ' tool bar 1' }
             ]
         },
     {
         xtype: 'panel',
         width: '100%',
         border: false, frame: false,
         tbar: [
              { xtype: 'displayfield', fieldLabel: ' tool bar 2' },
         ]
     },
       {
           xtype: 'panel',
           width: '100%',
           border: false, frame: false,
           tbar: [
                { xtype: 'displayfield', fieldLabel: ' tool bar 3' },
           ]
       }
    ],
        renderTo: Ext.getBody()
});
 })

Ext.js工具栏

2 个答案: