如何将工具栏插入已创建的面板？Extjs

我是extjs的新手。 目前已创建一个面板，并将其设置为north region。

Ext.create('Ext.panel.Panel', {
                                layout: {
                                            type: 'border'
                                        },
                                bodyStyle: 'background: yellow;',
                                height  : 700,
                                width   : '100%',
                                renderTo: Ext.get("example"),
                                items   : [{
                                            title: 'navigationBar',
                                            header: false,
                                            region: 'north',
                                            xtype: 'panel',
                                            //margins: '5,5,5,5',
                                            items: [
                                                    MenuBar
                                                    ]
                                            }

我还在我的子类中创建了一个工具栏，它可以从父类调用并放置到north region面板

Ext.define('adminInterface', {
extend: 'Ext.toolbar.Toolbar',
items: [{
            xtype: 'tbbutton',
            text: 'Button',
            },{
            xtype: 'tbbutton',
            text: 'Button1',
            menu: [{
                    text: 'Good',
                    },{
                    text: 'Better',
                    },{
                    text: 'Best',
                    }]}]

}))

执行代码后，调用了子类中的toolbar变量，但它没有显示接口

---

谢谢大家分享他们的信息。

大家好，请参考我的示例

Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 200,
    html: '<p>World!</p>',
    renderTo: Ext.getBody(),
    tbar: new Ext.Toolbar({ 
        //your Toolbar config options
      })
});

Ext.create（'Ext.panel.panel'{
标题：“你好”，
宽度：200，
html:“世界！
”，
renderTo:Ext.getBody（），
tbar:新的Ext.Toolbar（{
//您的工具栏配置选项
})
});

我们仍然可以看到更多的样本从现有的职位如下所示

var myBtnHandler=函数（btn）{
Ext.MessageBox.alert（“您单击了”，btn.text）；
},
fileBtn=Ext.create（'Ext.button.button'{
文本：“文件”，
处理程序：myBtnHandler
}),
editBtn=Ext.create（'Ext.button.button'{
文本：“编辑”，
处理程序：myBtnHandler
}),
tbFill=新的Ext.toolbar.Fill（）；
var mytopttoolbar=Ext.create（'Ext.toolbar.toolbar'{
项目：[
fileBtn，
tbFill，
编辑
]
});
var myBottomToolbar=[
{
文本：“保存”，
处理程序：myBtnHandler
},
'-',
{
文本：“取消”，
处理程序：myBtnHandler
},
'->',
'打开的项目：1'
];
var myPanel=Ext.create（'Ext.panel.panel'{
宽度：200，
身高：150，
标题：“外部面板岩石！”，
可折叠的：是的，
renderTo:Ext.getBody（），
tbar:myTopToolbar，
bbar:myBottomToolbar，
html:“我的第一个工具栏面板！”
});

var myBtnHandler = function(btn) {
Ext.MessageBox.alert('You Clicked', btn.text);
},

fileBtn = Ext.create('Ext.button.Button', {
text : 'File',
handler : myBtnHandler
}),

editBtn = Ext.create('Ext.button.Button', {
text : 'Edit',
handler : myBtnHandler
}),

tbFill = new Ext.toolbar.Fill();

var myTopToolbar = Ext.create('Ext.toolbar.Toolbar', {

items : [
fileBtn,
tbFill,
editBtn
]
});

var myBottomToolbar = [
{
text : 'Save',
handler : myBtnHandler
},
'-',
{
text : 'Cancel',
handler : myBtnHandler
},
'->',
'<b>Items open: 1</b>'
];


var myPanel = Ext.create('Ext.panel.Panel', {
width : 200,
height : 150,
title : 'Ext Panels rock!',
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
bbar : myBottomToolbar,
html : 'My first Toolbar Panel!'
});