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

来源：互联网发布：2017网络效应的答案编辑：程序博客网时间：2024/06/08 06:05

在实际的项目开发中我们经常会遇到一个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说的是标题栏下面的这个工具栏