Extjs-工具条和菜单 Ext.menu和Ext.Toolbar

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'
});