学习EXTJS6(6)基本功能-工具栏和菜单
2017-11-01 14:44
471 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" /> <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script> <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var toolbar = new Ext.toolbar.Toolbar({ renderTo : 'toolbar', vertical :true, enableOverflow : true, width : 300}); toolbar.add([ {text : 'hello usegear',handler : onButtonClick,iconCls : 'newIcon'}, {text:'open',handler:onButtonClick,iconCls:'openIcon'}, {text:'save',handler:onButtonClick,iconCls:'saveIcon'}, { xtype:"radio", fieldLabel:"Label", boxLabel:"Box label", name:"radio", inputValue:"radiovalue" },{ xtype:"checkbox", fieldLabel:"Label", boxLabel:"Box label", name:"checkbox", inputValue:"cbvalue" },{ xtype:"datefield", fieldLabel:"Date", name:"datevalue" },{ xtype:"timefield", fieldLabel:"Time", name:"timevalue" },{ xtype:"numberfield", fieldLabel:"Number", name:"numbervalue" },{ xtype:"textfield", fieldLabel:"Text", name:"textvalue" },{ xtype:"combo", fieldLabel:"Text", name:"combovalue", hiddenName:"combovalue" },{ xtype:"fieldset", title:"Legend", autoHeight:true }, {xtype:"panel", text:"Panel", items:[{ xtype:"checkbox", boxLabel:"Box label", name:"checkbox", inputValue:"cbvalue" },{ xtype:"radio", boxLabel:"Box label", name:"radio", inputValue:"radiovalue" },{ xtype:"checkbox", boxLabel:"Box label", name:"checkbox", inputValue:"cbvalue" }] } ] ); function onButtonClick(btn){ alert(btn.text); } }); </script> </head> <body> <div id='toolbar'></div> </body> </html>
工具栏
效果:
http://www.tof2k.com/ext/formbuilder/,导出json参数,然后。。。相当方便。否则手工码砖,效率可知了。
工具栏的启用和禁用,有二个方法:enable()和disable()
相关文章推荐
- 学习EXTJS6(8)基本功能-表单的基础表字段Ext.form.field.Basic
- 学习EXTJS6(7)基本功能-最常用的表单
- 学习EXTJS6(5)基本功能-进度条组件
- Mycat学习实战-Mycat基本功能
- 在TreeWidget中增加右键菜单功能 以及TreeWidget的基本用法
- Android开发之Menu(菜单功能)学习小结
- 【开源项目解析】QQ“一键下班”功能实现解析——学习Path及贝塞尔曲线的基本使用
- Linux学习日记 —— 10.3.3 Shell基础-Bash基本功能-输入输出重定向
- WebGL和ThreeJs学习5--ThreeJS基本功能控件
- 用链表实现带菜单功能的一元多项式的基本操作 (Use linked list to realize the basic operation of a one-dimensional polynom)
- android基础学习综合实例——天气预报App(基本功能实现)
- opengl中在QWidget中添加工具栏和右键菜单——学习总结
- [WPF] 托盘菜单的基本功能实现
- Emacs学习笔记(4):基本的编辑功能
- 学习使用Volley的多种基本功能-来自官方文档
- Qt学习(18)——菜单与工具栏
- Extjs学习笔记之四——工具栏和菜单
- xUtils 学习之路db数据库增删改查基本功能
- [阶段小结]Excel功能的基本学习
- Qt中实现菜单和工具栏功能