tbar和btn数据组合写tbar的效果还有其分割线的实现
2011-12-13 14:40
239 查看
在实际的项目开发中我们经常会遇到一个panel或者window容器里面放置tbar并且放入好多个按钮,我要写的就是这样的一个例子
最终效果截图:
1、定义按钮组合
3、分割线的写法:
在这里我们需要注意的是xtype如果为tbseparator的话,这样就有两个按钮中间的分割线,要不然是没有的
面板属性解析:
tools:工具栏
这个工具栏说的是标题上的按钮
这个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说的是标题栏下面的这个工具栏
相关文章推荐
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果(新增下载地址)
- WP8_当滚动到滚动条的70%时,自动加载数据效果实现
- wpf中实现数据的逐条加载显示效果
- dhtml xgrid实现前台大数据延迟加载效果
- [给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果,实现数据加载(二)
- CSS3 实现厉害的文字和输入框组合效果
- Oracle利用函数实现多行数据合并的效果
- Echarts动画效果:实现数据左右移动
- jQuery实现的一个tab切换效果,(内部还有切换)。
- 使用ajax和json实现迭代数据的效果
- jquery实现瀑布流效果+下拉加载新数据
- jQuery实现数据删除和图片预览效果
- [导入]AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- PHP开发-HTML中使用Jquery实现多行数据的省略号效果(效果图)
- Agularjs妙用双向数据绑定实现手风琴效果
- GridView 数据行实现光棒效果
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- jquery Ajax 实现加载数据前动画效果的示例代码