tbar和btn数据组合写tbar的效果还有其分割线的实现

在实际的项目开发中我们经常会遇到一个panel或者window容器里面放置tbar并且放入好多个按钮，我要写的就是这样的一个例子

最终效果截图：

1、定义按钮组合

var btns=[ { id:'hidebtn', text:TxtForFunction.hid, //隐藏条件 iconCls:'HideConditions', toolTip:TxtForFunction.hid, handler: function(){ alert('隐藏条件'); } },{ id:'searchbtn', text:TxtForFunction.search, //筛选 iconCls:'HideConditions', toolTip:TxtForFunction.search, handler: function(){ alert('筛选'); } },{ id:'resetbtn', text:TxtForFunction.reset, //重置 iconCls:'HideConditions', toolTip:TxtForFunction.reset, handler: function(){ alert('重置'); } },{ id:'hidebtn', text:TxtForFunction.add, //新增 iconCls:'HideConditions', toolTip:TxtForFunction.add, handler: function(){ alert('新增'); } },{ id:'hidebtn', text:TxtForFunction.savelink, //保存 iconCls:'HideConditions', toolTip:TxtForFunction.savelink, handler: function(){ alert('保存'); } },{ id:'hidebtn', text:TxtForFunction.deletelink, //删除 iconCls:'HideConditions', toolTip:TxtForFunction.deletelink, handler: function(){ alert('删除'); } },{ id:'hidebtn', text:TxtForFunction.detaillink, //详细设定 iconCls:'HideConditions', toolTip:TxtForFunction.detaillink, handler: function(){ alert('详细设定'); } },{ id:'hidebtn', text:TxtForFunction.idforfunction, //功能ID设定 iconCls:'HideConditions', toolTip:TxtForFunction.idforfunction, handler: function(){ alert('功能ID设定'); } }] 2、定义tbar的时候只要将btns数组放进去就可以了写法如下： Ext.onReady(function(){ var panel=new Ext.Panel({ renderTo:'hello', title:'test', html:'aaaa', width:600, height:400, tbar:[btns] }); });

3、分割线的写法：

在这里我们需要注意的是xtype如果为tbseparator的话，这样就有两个按钮中间的分割线，要不然是没有的

面板属性解析：
tools：工具栏

这个工具栏说的是标题上的按钮

tbar:[new Ext.Toolbar.TextItem('工具栏'), {xtype:"tbfill"}, {pressed:"true",text:"添加"}, {xtype:"tbseparator"}, {pressed:"true",text:"保存"} ]

这个tbar说的是标题栏下面的这个工具栏