爲Ext panel中增加多個tbar展示兩種方式:
方法一:
通過render
var subPanel = new Ext.Panel({
title:'測試',
tbar:[{text:'一個按鈕'},{}],
bbar:[{xtype:'tbsplit',text'測試'},{}],
listeners:{
'render' : function() {
var bbar1 = new Ext.Toolbar([{
text : "腳本管理",
//iconCls : 'icon-set',
handler : function() {
}
}]);
bbar1.render(subPanel.tbar);
}
}
});
方法二:
利用數組型:
<script type="text/javascript">
Ext.onReady(function(){
var oneTbar = new Ext.Toolbar({
items: ['開始時間',{
xtype:'datefield',
id : 'startDate',
editable:false,
height:20,
format:'Y-m-d'
},{
text:'清空',
handler:function(){
Ext.getCmp("startDate").setValue("");
}
}]
});
var twoTbar = new Ext.Toolbar({
items: ['結束時間',{
xtype:'datefield',
id : 'endDate',
editable:false,
height:20,
format:'Y-m-d'
},{
text:'清空',
handler:function(){
Ext.getCmp("endDate").setValue("");
}
}]
});
var w = new Ext.Window({
title:"消息",
width:520,
height:500,
layout: "anchor",
buttonAlign:"center",
tbar:{
xtype: 'container',
items: [oneTbar,twoTbar]
},
bbar: {
xtype: 'container',
items: [oneTbar,twoTbar]
}
});
w.show();
});
</script>
通過以上方式可以在自己設計panel中增加多個tbar或者bbar工具條。