Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
转载自:http://blog.csdn.net/itlwc/article/details/7878002
1.创建一个简单工具条
效果图
- <script type="text/javascript" defer>
- Ext.onReady(function(){
- // 创建带三个按钮的工具条
- var tb = new Ext.Toolbar({
- width : 300,
- items : [{
- text: '新建'
- },{
- text: '修改'
- },{
- text: '删除'
- }]
- });
- // 为工具条再添加一个按钮
- tb.add({
- text: '显示'
- });
- //tb.doLayout();//重新计算容器的布局尺寸
- new Ext.Viewport({
- items: [tb]
- });
- });
- </script>
2.创建一个简单菜单
效果图
代码
- <script type="text/javascript" defer>
- Ext.onReady(function(){
- //创建工具条
- var tb = new Ext.Toolbar({
- width : 300
- });
- //创建一个菜单
- var menuFile = new Ext.menu.Menu();
- menuFile.add({text: '新建'});
- menuFile.add('-');
- menuFile.add({text: '打开'});
- menuFile.add('separator');
- menuFile.add({text: '保存'});
- menuFile.add(new Ext.menu.Separator());
- menuFile.add({text: '关闭'});
- // 为工具条再添加一个菜单
- tb.add({
- text: '文件',
- menu: menuFile
- });
- //tb.doLayout();//重新计算容器的布局尺寸
- new Ext.Viewport({
- items: [tb]
- });
- });
- </script>
3.多级菜单
- <script type="text/javascript" defer>
- Ext.onReady(function(){
- var menuFile = new Ext.menu.Menu({
- items:[{
- text: '历史',
- menu: [{
- text: '今天'
- },{
- text: '昨天'
- }]
- }]
- });
- var tb = new Ext.Toolbar({
- width : 300,
- items : [{
- text: '文件',
- menu : menuFile
- }]
- });
- new Ext.Viewport({
- items: [tb]
- });
- });
- </script>
4.多选菜单
- 单选和多选都使用Ext.menu.CheckItem,唯一不用的是group参数
效果图
代码
- <script type="text/javascript" defer>
- Ext.onReady(function(){
- var menuCheck = new Ext.menu.Menu({
- items : [
- new Ext.menu.CheckItem({
- text : '粗体',
- checkHandler : function(item,checked){
- Ext.Msg.alert('多选',(checked ? '选中':'取消')+'粗体');
- }
- }),
- new Ext.menu.CheckItem({
- text : '斜体',
- checkHandler : function(item,checked){
- Ext.Msg.alert('多选',(checked ? '选中':'取消')+'斜体');
- }
- })
- ]
- });
- var tb = new Ext.Toolbar({
- items : [{
- text : '字形',
- menu : menuCheck
- }]
- });
- new Ext.Viewport({
- items : [tb]
- });
- });
- </script>
5.单选按钮菜单
- 单选和多选都使用Ext.menu.CheckItem,唯一不用的是group参数
效果图
代码
- <script type="text/javascript" defer>
- Ext.onReady(function(){
- var menuRadio = new Ext.menu.Menu({
- items : [
- new Ext.menu.CheckItem({
- text : '宋体',
- group : 'font',
- checkHandler : function(item,checked){
- Ext.Msg.alert('单选',(checked ? '选中':'取消')+'宋体');
- }
- }),
- new Ext.menu.CheckItem({
- text : '黑体',
- group : 'font',
- checkHandler : function(item,checked){
- Ext.Msg.alert('单选',(checked ? '选中':'取消')+'黑体');
- }
- }),
- new Ext.menu.CheckItem({
- text : '楷体',
- group : 'font',
- checkHandler : function(item,checked){
- Ext.Msg.alert('单选',(checked ? '选中':'取消')+'楷体');
- }
- })
- ]
- });
- var tb = new Ext.Toolbar({
- items : [{
- text : '字体',
- menu : menuRadio
- }]
- });
- new Ext.Viewport({
- items : [tb]
- });
- });
- </script>
6.日期菜单
效果图
代码
- <script type="text/javascript" defer>
- Ext.onReady(function(){
- var tb = new Ext.Toolbar({
- items : [{
- text : '日期',
- menu : new Ext.menu.DateMenu({
- handler : function(dp, date){
- Ext.Msg.alert('选择日期', '选择的日期是 {0}.', date.format('Y年m月d日'));
- }
- })
- }]
- });
- new Ext.Viewport({
- items : [tb]
- });
- });
- </script>
7.颜色菜单
- Ext本身一些问题,颜色选中的时候handler会执行两次,第二次的参数传入一个event对象,
- 所以要加typeof进行判断,以免出现问题
- 最后颜色值返回6位的字符串,在它前面加#就可以使用了
效果图
代码
- <script type="text/javascript" defer>
- Ext.onReady(function(){
- var tb = new Ext.Toolbar({
- items : [{
- text : '颜色',
- menu: new Ext.menu.ColorMenu({
- handler : function(cm, color){
- if (typeof color == 'string') {
- Ext.Msg.alert('选择颜色', '选择的颜色是 ' + color);
- }
- }
- })
- }]
- });
- new Ext.Viewport({
- items : [tb]
- });
- });
- </script>
8.右键弹出菜单
- <script type="text/javascript">
- Ext.onReady(function(){
- var contextmenu = new Ext.menu.Menu({
- items: [{
- text: '新建'
- },{
- text: '修改'
- },{
- text: '删除'
- },{
- text: '显示'
- }]
- });
- Ext.get(document).on('contextmenu', function(e) {
- e.preventDefault();
- contextmenu.showAt(e.getXY());
- });
- });
- </script>
9.使用Ext.menu.MenuMgr统一管理菜单
- Ext为我们提供了MenuMgr来统一管理页面上的所有菜单
- 每创建一个菜单都会注册到Ext.menu.MenuMgr中,可以使用MenuMgr的函数对菜单进行操作,
- Ext.menu.MenuMgr是一个单例,我们不需要创建就可以直接调用功能函数get(),根据id获取对应的菜单
代码
- var menuWj = new Ext.menu.Menu({
- id: 'menu1',
- allowOtherMenus: true,
- items: [
- {text: '今天'},
- {text: '昨天'}
- ]
- });
- Ext.get('showButton').on('click', function() {
- //获取menu实例
- var menu1 = Ext.menu.MenuMgr.get('menu1');
- menu1.show(tb.el);
- Ext.getDoc().removeAllListeners();
- });
- Ext.get('hideButton').on('click', function() {
- Ext.menu.MenuMgr.hideAll();
- });
10工具条加文本框和时间框
效果图
代码
- <script type="text/javascript">
- Ext.onReady(function(){
- var tb = new Ext.Toolbar({
- items : [
- '文本框',
- new Ext.form.TextField({
- name: 'text'
- }),
- '时间框',
- new Ext.form.DateField({
- name: 'date'
- })
- ]
- });
- new Ext.Viewport({
- items : [tb]
- });
- });
- </script>
11工具条加HTML标签
效果图
代码
- <script type="text/javascript">
- Ext.onReady(function(){
- var tb = new Ext.Toolbar({
- items : [
- '<span style="color:red;font-weight:bold;">红字</span>',
- '<input type="text">',
- '<button>按钮</button>'
- ]
- });
- new Ext.Viewport({
- items : [tb]
- });
- });
- </script>
12.工具条加按钮的三种方法
- <script type="text/javascript">
- Ext.onReady(function(){
- var tb = new Ext.Toolbar({
- items : [{
- text : '按钮1'
- },
- new Ext.Button({
- text : '按钮2'
- }),
- new Ext.Toolbar.Button({
- text : '按钮3'
- })]
- });
- new Ext.Viewport({
- items : [tb]
- });
- });
- </script>
13. Ext.Toolbar.Spacer
- Ext.Toolbar.Spacer向菜单添加空白元素,
- xtype = tbspacer它是一个2px的空白
- tb.add({
- xtype : 'tbspacer'
- });
14. Ext.Toolbar.Separator
- Ext.Toolbar.Separator向菜单添加一个竖线
- xtype = tbseparator 或者 –
- tb.add({
- xtype : 'tbseparator'
- });
15. Ext.Toolbar.Fill
- 将处于它右侧的工具条组件以右对齐的方式排列在工具条右侧
- xtype=tbfill 或者->
- tb.add({
- xtype : 'tbfill'
- });