Question

我在extjs中新。目前已创建一个面板并设置为北区。

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
                                                    ]
                                            }

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

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

}）;

执行代码后，子类中的工具栏变量被调用，但它没有显示出界面。

感谢所有人分享他们的信息。

Answer 1

嗨参考我的示例

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

我们仍然能够从现有帖子中看到更多样本，如下所示

How do i add a toolbar to my layout in extjs?

Extjs 4 add toolbar to panel dockeditems run-time

Answer 2

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!'
});

如何将工具栏插入我创建的面板？ EXTJS

2 个答案: