Extjs Ext.js工具栏

我是ext.js的新手。我一直在学习Sencha文档。我试图在面板中实现工具栏。我用的是“tbar”。我想知道是否可以在面板顶部创建一组工具栏。e、 g.我希望顶部有3个工具条；一个接一个

有办法吗

---

提前感谢您的指导。

来自4.2.2文档

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

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()
});
})

---

谢谢你的指导。我实现了“tbar”，如下所示。这是正确的方法吗

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()
});
 })

---

请发布一些代码，向我们展示您的尝试。请注意，这可能与其他版本的ExtJS类似，也可能与其他版本的ExtJS不同。本例中的版本是4.2.2，看起来可以工作，但可能不需要额外的面板。我将给出我的答案，以便更好地说明我的意思。

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()
});
 })