bbar:在Panel经常使用的工具栏
如下面的示例——这将牵涉本文要追寻的问题：在下面的Panel中的bbar第一个组件明确指定的xtype:'button'，第二个没有明确指出，那么它是何类型，为何能调用button的handler函数？
Ext.create('Ext.panel.Panel', {
title: 'Example Wizard',
width: 300,
height: 200,
layout: 'card',
bodyStyle: 'padding:15px',
defaults: {
// 应用到所有子面板
border: false
},
// 这里仅仅用几个按钮来示例一种可能的导航场景.
bbar: [//工具栏的默认类型是按钮
{
id: 'move-prev',
text: 'Back',
xtype: 'button',
handler: function(btn) {//Ext.button.Button-cfg-handler
navigate(btn.up("panel"), "prev");
},
disabled: true
},
'->', // 一个长间隔, 使两个按钮分布在两边
{
id: 'move-next',
text: 'Next',
handler: function(btn) {
navigate(btn.up("panel"), "next");
}
}
],
// 布局下的各子面板
items: [{
id: 'card-0',
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
},{
id: 'card-1',
html: '<p>Step 2 of 3</p>'
},{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: Ext.getBody()
});
查看API，在Ext.panel.Panel的配置中这样介绍bbar:
原来这家伙是属于toolbar的，查询toolbar：
上面解释了toolbar的默认类型：button——这也是本文的答案。