extjs4学习二

阅读更多

Ext.onReady(function(){
	var toolbar=new Ext.toolbar.Toolbar({
		renderTo:'toolbar',
		width:600
	}); 
	toolbar.add([
		{
			text:'新建',
			handler:onButtonClick
		},
		{
			text:'打开'
		},
		{
			text:'编辑'
		},
		{
			text:'保存'
		},
		'-',
		{
			xtype:'textfield',
			hideLabel:true,
			width:150
		},
		'->',
		'超链接',
		{
			xtype:'tbspacer',
			width:50
		},
		'静态文本'
	]);
	function onButtonClick(btn){
		Ext.MessageBox.alert('结果','您点击的是：'+btn.text);
	}
	var enableTool=new Ext.Button({
		text:'启用工具栏',
		renderTo:'enabletool',
		handler:function(){
			toolbar.enable();
		}
	});
	var disableTool=new Ext.Button({
		text:'禁用工具栏',
		renderTo:'disabletool',
		handler:function(){
			toolbar.disable();
		}
	});
});

Ext.onReady(function(){
 	var toolbar=new Ext.Toolbar({
		renderTo:'toolbar',
		width:300
	});
	var fileMenu=new Ext.menu.Menu({
		shadow:'frame',
		allowOtherMenus:true,
		items:[
			new Ext.menu.Item({
				text:'新建',
				handler:onMenuItem
			}),
			{
				text:'打开',
				handler:onMenuItem
			},
			{
				text:'关闭',
				handler:onMenuItem
			}
			
		]
	});
	var editMenu=new Ext.menu.Menu({
		shadow:'drop',
		allowOtherMenus:true,
		items:[{
				text:'复制',
				handler:onMenuItem
			},{
				text:'粘贴',
				handler:onMenuItem
			},{
				text:'剪切',
				handler:onMenuItem
			}
		]
	});
	
	toolbar.add({text:'文件',menu:fileMenu},
				{text:'编辑',menu:editMenu});
	function onMenuItem(item){
		Ext.MessageBox.alert('结果','您选择了'+item.text);
	};

});

Ext.onReady(function(){
	var Toolbar=new Ext.Toolbar({
		renderTo:'toolbar',
		width:300
	});
	var infoMenu=new Ext.menu.Menu({	//一级菜单
		ignoreParentClicks:true,	//忽略父菜单的单击事件
		plain:true,
		items:[{
			text:'个人信息',
			menu:new Ext.menu.Menu({	//二级菜单
				ignoreParentClicks:true,	//忽略父菜单的单击事件
				items:[{
					text:'基本信息',
					menu:new Ext.menu.Menu({	//三级菜单
						items:[{
								text:'身高',
								handler:onMenuItem
							},{
								text:'体重',
								handler:onMenuItem
							}
						]
					})
				}]
			})
		},{
			text:'公司信息'
		}]
	});
	Toolbar.add({
					text:'设置',
					menu:infoMenu
	});
	function onMenuItem(item){
		Ext.MessageBox.alert('结果','您选择了：'+item.text);
	}
});

Ext.onReady(function(){
	var Toolbar=new Ext.Toolbar({	//创建工具栏
		renderTo:'toolbar',
		width:300
	});
	var fileMenu=new Ext.menu.Menu({	//创建文件菜单
		items:[{
			xtype:'textfield',	//创建表单字段
			hideLabel:true,
			width:100
		},{
			text:'颜色选择',
			menu:new Ext.menu.ColorPicker()
		},{	
			xtype:'datepicker'	//添加日期选择器组件
		},{
			xtype:'buttongroup',	//添加按钮
			columns:3,
			title:'按钮组',
			items:[{
				text:'用户管理',
				scale:'large',
				colspan:3,
				width:170,
				iconAlign:'top'
			},{
				text:'新建',
			},{
				text:'打开'
			},{
				text:'保存'
			}]
		}]
	});
	var themeMenu=new Ext.menu.Menu({	//创建主题菜单
		items:[{
			text:'主题颜色',
			menu:new Ext.menu.Menu({
				items:[{
					text:'红色主题',	
					checked:true,	//初始为选中状态
					group:'theme',	//为单选想进行分组
					checkHandler:onItemCheck
				},{
					text:'蓝色主题',
					checked:false,
					group:'theme',
					checkHandler:onItemCheck
				},{
					text:'黑色主题',
					checked:false,
					group:'theme',
					checkHandler:onItemCheck
				}]
			})
		},{
			text:'是否启用',
			checked:false
		}]
	});
	Toolbar.add(	//将菜单加入工具栏
			{
				text:'文件',menu:fileMenu
			},{
				text:'风格选择',menu:themeMenu
			}
	);
	function onItemCheck(item){		//菜单项的回调方法
		Ext.MessageBox.alert('结果',item.text);	//取得菜单项的text属性
	}
});