ExtJs4基础知识

ExtJs4基础知识
一、基础知识
1、JAON对象的例子
Javascript代码
1. <script type="text/javascript">
2. var person = { //json对象定义开始
3. name:'tom', //字符串
4. age:24, //数字
5. sex:'man',
6. married:false,//布尔值
7. books:[ //数组，在数组中又嵌入了两个json对象
8. {name:'历史',price:30},
9. {name:'文学',price:25}
10. ]
11. }//json对象定义结束
12. //通过点号表示法来取得JSON对象的内部属性
13. alert(person.name + ' ' + person.age + ' ' + person.sex);
14. //通过中括号表示法来取得JSON对象的内部属性
15. //alert(person["name"] + ' ' + person["age"] + ' ' + person["sex"]);
16. </script>
```
<script type="text/javascript">
		var person  =  { //json对象定义开始
			name:'tom',  //字符串
			age:24,     //数字
			sex:'man',
			married:false,//布尔值
			books:[     //数组，在数组中又嵌入了两个json对象
				{name:'历史',price:30},
				{name:'文学',price:25}
			]
		}//json对象定义结束
		//通过点号表示法来取得JSON对象的内部属性
		alert(person.name + ' ' + person.age + ' ' + person.sex);
		//通过中括号表示法来取得JSON对象的内部属性
		//alert(person["name"] + ' ' + person["age"] + ' ' + person["sex"]);
	</script>
```
2、逗号分隔参数列表配置组件的例子
Javascript代码
1. Ext.Msg.alert('提示','逗号分隔参数列表');//这种配置方式非常常见
```
Ext.Msg.alert('提示','逗号分隔参数列表');//这种配置方式非常常见
```
3、JSON对象配置组件的例子
Javascript代码
1. Ext.onReady(function(){
2. var config = {//定义配置对象
3. title:'case01',
4. msg: '我的配置很简单，不信来看看我的源代码吧！'
5. }
6. Ext.Msg.show(config);//将配置对象传入方法中
7. });
```
Ext.onReady(function(){
		var config = {//定义配置对象
			title:'case01',
			msg: '我的配置很简单，不信来看看我的源代码吧！'
		}
		Ext.Msg.show(config);//将配置对象传入方法中
	  });
```
4、支持HTML格式化的Extjs信息提示框的例子
Javascript代码
1. Ext.onReady(function(){
2. Ext.Msg.alert('提示','<font color=red>支持HTML格式文本</font>');
3. });
```
Ext.onReady(function(){
		Ext.Msg.alert('提示','<font color=red>支持HTML格式文本</font>');
	});
```
5、Ext.MessageBox的各种不同用法相关
Javascript代码
1. Ext.onReady(function(){
2. //Ext.MessageBox.alert('提示','请单击我，确定',callBack);
3. Ext.MessageBox.show({
4. title: '提示',
5. msg: '请单击我，确定',
6. buttons: Ext.MessageBox.OKCANCEL,
7. fn: callBack
8. });
9. function callBack(id){
10. alert('单击的按钮ID是：'+id);
11. }
```
Ext.onReady(function(){
		//Ext.MessageBox.alert('提示','请单击我，确定',callBack);
                Ext.MessageBox.show({
		   title: '提示',
                     msg: '请单击我，确定',
                     buttons: Ext.MessageBox.OKCANCEL,
                     fn: callBack
		});
		function callBack(id){
			alert('单击的按钮ID是：'+id);
		}
```
Javascript代码
1. Ext.onReady(function(){
2. Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack);
3. function callBack(id){
4. alert('单击的按钮ID是：'+id);
5. }
6. });
```
Ext.onReady(function(){
		Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack);
		function callBack(id){
			alert('单击的按钮ID是：'+id);
		}
	});
```
Javascript代码
1. Ext.onReady(function(){
2. Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack,this,true,"我是默认值");
3. function callBack(id,msg){
4. alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
5. }
6. });
```
Ext.onReady(function(){
		Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack,this,true,"我是默认值");
		function callBack(id,msg){
			alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
		}
	  });
```
Javascript代码
1. Ext.MessageBox.show({
2. title:'提示',
3. msg:'我有三个按钮，和一个多行文本区。',
4. modal:true,
5. prompt:true,
6. value:'请输入',
7. fn:callBack,
8. buttons:Ext.Msg.YESNOCANCEL,
9. icon:Ext.Msg.QUESTION
10. })
11. function callBack(id,msg){
12. alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
13. }
```
Ext.MessageBox.show({
			title:'提示',
			msg:'我有三个按钮，和一个多行文本区。',
			modal:true,
			prompt:true,
			value:'请输入',
			fn:callBack,
			buttons:Ext.Msg.YESNOCANCEL,
			icon:Ext.Msg.QUESTION  
		})
		function callBack(id,msg){
			alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
		}
```
Javascript代码
1. //'ok'
2. Ext.MessageBox.msgButtons[0].setText('确定');
3. //'yes'
4. Ext.MessageBox.msgButtons[1].setText('是');
5. //'no'
6. Ext.MessageBox.msgButtons[2].setText('否');
7. //'cancel'
8. Ext.MessageBox.msgButtons[3].setText('取消');
10. Ext.MessageBox.show({
11. title:'提示',
12. msg:'自定义按钮文字',
13. modal:true,
14. buttons:Ext.Msg.YESNOCANCEL
15. });
```
//'ok'
		Ext.MessageBox.msgButtons[0].setText('确定');
		//'yes'
		Ext.MessageBox.msgButtons[1].setText('是');
		//'no'
		Ext.MessageBox.msgButtons[2].setText('否');
		//'cancel'
		Ext.MessageBox.msgButtons[3].setText('取消');
		
		Ext.MessageBox.show({
			title:'提示',
			msg:'自定义按钮文字',
			modal:true,
			buttons:Ext.Msg.YESNOCANCEL
		});
```
Javascript代码
1. //多次设置信息提示框按钮文字//'ok'
2. Ext.MessageBox.msgButtons[0].setText('确认按钮');//第一次设置
3. Ext.MessageBox.alert('提示','提示信息一',function(){
4. Ext.MessageBox.msgButtons[0].setText('新的确认按钮');//第二次设置
5. Ext.MessageBox.alert('提示','提示信息二');
6. });
```
//多次设置信息提示框按钮文字//'ok'
		Ext.MessageBox.msgButtons[0].setText('确认按钮');//第一次设置
		Ext.MessageBox.alert('提示','提示信息一',function(){
			Ext.MessageBox.msgButtons[0].setText('新的确认按钮');//第二次设置
			Ext.MessageBox.alert('提示','提示信息二');
		});
```
Javascript代码
1. //通过调用updateText方法定时更新提示信息
2. var msgBox = Ext.MessageBox.show({
3. title:'提示',
4. msg:'动态跟新的信息文字',
5. modal:true,
6. buttons:Ext.Msg.OK,
7. fn:function(){
8. //停止定时任务
9. Ext.TaskManager.stop(task);
10. }
11. })
12. //Ext.TaskManager是一个功能类，用来定时执行程序，
13. //在这里我们使用它来定时触发提示信息的更新。
14. var task = {
15. run:function(){
16. msgBox.updateText('会动的时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
17. },
18. interval:1000
19. }
20. Ext.TaskManager.start(task);
```
//通过调用updateText方法定时更新提示信息
		var msgBox = Ext.MessageBox.show({
			title:'提示',
			msg:'动态跟新的信息文字',
			modal:true,
			buttons:Ext.Msg.OK,
			fn:function(){
				//停止定时任务
				Ext.TaskManager.stop(task);
			}
		})
		//Ext.TaskManager是一个功能类，用来定时执行程序，
		//在这里我们使用它来定时触发提示信息的更新。
		var task = {
			run:function(){
				msgBox.updateText('会动的时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
			},
			interval:1000
		}
		Ext.TaskManager.start(task);
```
Javascript代码
1. //通过调用updateProgress方法同时更新提示信息和进度条
2. var msgBox = Ext.MessageBox.show({
3. title:'提示',
4. msg:'动态跟新的进度条和信息文字',
5. modal:true,
6. 300,
7. progress:true
8. })
10. var count = 0;//滚动条被刷新的次数
11. var percentage = 0;//进度百分比
12. var progressText = '';//进度条信息
14. var task = {
15. run:function(){
16. count++;
17. //计算进度
18. percentage = count/10;
19. //生成进度条文字
20. progressText = '当前完成度：'+percentage*100 + "%";
21. //更新信息提示对话框
22. msgBox.updateProgress(percentage,progressText,
23. '当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
24. //刷新10次后关闭信息提示对话框
25. if(count > 10){
26. Ext.TaskManager.stop(task);
27. msgBox.hide();
28. }
30. },
31. interval:1000
32. }
34. Ext.TaskManager.start(task);
```
//通过调用updateProgress方法同时更新提示信息和进度条
		var msgBox = Ext.MessageBox.show({
			title:'提示',
			msg:'动态跟新的进度条和信息文字',
			modal:true,
			300,
			progress:true
		})

		var count = 0;//滚动条被刷新的次数
		var percentage = 0;//进度百分比
		var progressText = '';//进度条信息

		var task = {
			run:function(){
				count++;
				//计算进度
				percentage = count/10;
				//生成进度条文字
				progressText = '当前完成度：'+percentage*100 + "%";
				//更新信息提示对话框
				msgBox.updateProgress(percentage,progressText,
					'当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
				//刷新10次后关闭信息提示对话框
				if(count > 10){
					Ext.TaskManager.stop(task);
					msgBox.hide();
				}
				
			},
			interval:1000
		}

		Ext.TaskManager.start(task);
```
Javascript代码
1. //等待提示框会显示一个自动更新的进度条
2. Ext.MessageBox.wait('请等待，操作需要很长时间！','提示',{
3. text : '进度条上的文字'
4. });
```
//等待提示框会显示一个自动更新的进度条
Ext.MessageBox.wait('请等待，操作需要很长时间！','提示',{
			text : '进度条上的文字'
		});
```
6、进度条的使用
Javascript代码
1. //手动模式的进度条
2. var ProgressBar = new Ext.ProgressBar({
3. 300,//设定进度条的宽度
4. renderTo:'ProgressBar'
5. });
6. var count = 0;//滚动条被刷新的次数
7. var percentage = 0;//进度百分比
8. var progressText = '';//进度条信息
10. Ext.TaskManager.start({
11. run:function(){
12. count++;
13. //刷新10次后关闭信息提示对话框
14. if(count > 10){
15. ProgressBar.hide();
16. }
17. //计算进度
18. percentage = count/10;
19. progressText = percentage * 100 + '%'
20. //更新信息提示对话框
21. ProgressBar.updateProgress(percentage,progressText,true);
22. },
23. interval:1000,//设置时间间隔
24. repeat : 6//设置执行次数
25. });
```
//手动模式的进度条
var ProgressBar = new Ext.ProgressBar({
			300,//设定进度条的宽度
			renderTo:'ProgressBar'
		});
		var count = 0;//滚动条被刷新的次数
		var percentage = 0;//进度百分比
		var progressText = '';//进度条信息

		Ext.TaskManager.start({
			run:function(){
				count++;
				//刷新10次后关闭信息提示对话框
				if(count > 10){
					ProgressBar.hide();
				}
				//计算进度
				percentage = count/10;
				progressText = percentage * 100 + '%'
				//更新信息提示对话框
				ProgressBar.updateProgress(percentage,progressText,true);
			},
			interval:1000,//设置时间间隔
			repeat : 6//设置执行次数
		});
```
Javascript代码
1. //自动模式的进度条
2. var ProgressBar = new Ext.ProgressBar({
3. 300,//设定进度条的宽度
4. renderTo:'ProgressBar'
5. });
6. ProgressBar.wait({
7. duration:10000,//进度条持续更新10秒钟
8. interval:1000,//每1秒钟更新一次
9. increment:10,//进度条分10次更新完毕
10. scope:this,//回调函数的执行范围
11. text : 'waiting',//进度条上的文字
12. fn:function(){//更新完成后调用的回调函数
13. alert('更新完毕');
14. }
15. });
```
//自动模式的进度条
		var ProgressBar = new Ext.ProgressBar({
			300,//设定进度条的宽度
			renderTo:'ProgressBar'
		});
		ProgressBar.wait({
			duration:10000,//进度条持续更新10秒钟
			interval:1000,//每1秒钟更新一次
			increment:10,//进度条分10次更新完毕
			scope:this,//回调函数的执行范围
			text : 'waiting',//进度条上的文字
			fn:function(){//更新完成后调用的回调函数
				alert('更新完毕');
			}
		});
```
Css代码
1. <STYLE TYPE="text/css">
2. .custom .x-progress-inner {
3. height:17px;
4. background: #fff;
5. }
6. .custom .x-progress-bar {
7. height:15px;
8. background:transparent url(images/custom-bar-red.gif) repeat-x 0 0;
9. border-top:1px solid #BEBEBE;
10. border-bottom:1px solid #EFEFEF;
11. border-right:0;
12. }
13. </STYLE>
```
<STYLE TYPE="text/css">
    .custom .x-progress-inner {
		height:17px;
		background: #fff;
	}
	.custom .x-progress-bar {
		height:15px;
		background:transparent url(images/custom-bar-red.gif) repeat-x 0 0;
		border-top:1px solid #BEBEBE;
		border-bottom:1px solid #EFEFEF;
		border-right:0;
	}	
  </STYLE>
```
Javascript代码
1. //自定义样式的进度条样式
2. var ProgressBar = new Ext.ProgressBar({
3. 300,//设定进度条的宽度
4. renderTo:'ProgressBar',
5. cls:'custom'//使用自定义样式
6. });
7. ProgressBar.wait({
8. duration:10000,//进度条持续更新10秒钟
9. interval:1000,//每1秒钟更新一次
10. increment:10//进度条分10次更新完毕
11. });
```
//自定义样式的进度条样式
		var ProgressBar = new Ext.ProgressBar({
			300,//设定进度条的宽度
			renderTo:'ProgressBar',
			cls:'custom'//使用自定义样式
		});
		ProgressBar.wait({
			duration:10000,//进度条持续更新10秒钟
			interval:1000,//每1秒钟更新一次
			increment:10//进度条分10次更新完毕
		});
```
7、工具栏、菜单栏相关
Javascript代码
1. //简单的工具栏
2. var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
3. renderTo:'toolbar',
4. 300
5. });
7. toolbar.add([//向工具栏中添加按钮
8. {
9. text:'新建',//按钮上显示的文字
10. handler:onButtonClick,//点击按钮的处理函数
11. iconCls:'newIcon'//在按钮上显示的图标
12. },
13. {text:'打开',handler:onButtonClick,iconCls:'openIcon'},
14. {text:'保存',handler:onButtonClick,iconCls:'saveIcon'}
15. ]);
17. function onButtonClick(btn){//点击按钮时调用的处理函数
18. alert(btn.text);//取得按钮上的文字
19. }
```
//简单的工具栏
		var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
			renderTo:'toolbar',
			300
		});

		toolbar.add([//向工具栏中添加按钮
			{
				text:'新建',//按钮上显示的文字
				handler:onButtonClick,//点击按钮的处理函数
				iconCls:'newIcon'//在按钮上显示的图标
			},
			{text:'打开',handler:onButtonClick,iconCls:'openIcon'},
			{text:'保存',handler:onButtonClick,iconCls:'saveIcon'}
		]);

		function onButtonClick(btn){//点击按钮时调用的处理函数
			alert(btn.text);//取得按钮上的文字
		}
```
Javascript代码
1. //使用add方法加入多种元素的复杂工具栏
2. var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
3. renderTo:'toolbar',
4. 500
5. });
6. toolbar.add(
7. {text:'新建'},{text:'打开'},
8. {text:'编辑'},{text:'保存'}, //加入按钮
9. '-', //加入工具栏分隔符
10. { //加入表单元素
11. xtype:'textfield',
12. hideLabel : true,
13. 150
14. },
15. '->', //加入一个充满工具栏的空白元素
16. '<a href=#>超连接</div>', //加入一个Element元素
17. {xtype: 'tbspacer', 50},//加入一个空白元素，宽度为50像素
18. '静态文本' //加入一个简单字符串
19. );
```
//使用add方法加入多种元素的复杂工具栏
		var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
			renderTo:'toolbar',
			500
		});
		toolbar.add(
			{text:'新建'},{text:'打开'},
			{text:'编辑'},{text:'保存'}, //加入按钮
			'-',                          //加入工具栏分隔符
			{     //加入表单元素
				xtype:'textfield',
				hideLabel : true,
				150
			},
			'->',                        //加入一个充满工具栏的空白元素
			'<a href=#>超连接</div>',    //加入一个Element元素
			{xtype: 'tbspacer',  50},//加入一个空白元素，宽度为50像素
			'静态文本'                   //加入一个简单字符串
		);
```
Html代码
1. <HTML>
2. <HEAD>
3. <TITLE>启用和禁用工具栏</TITLE>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
6. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
7. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
8. <script type="text/javascript">
9. Ext.onReady(function(){
10. var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
11. renderTo:'toolbar',
12. 200,
13. items :[{
14. text:'新建',//按钮上显示的文字
15. handler:onButtonClick//点击按钮的处理函数
16. },
17. {text:'打开',handler:onButtonClick},
18. {text:'保存',handler:onButtonClick}]
19. });
21. function onButtonClick(btn){//点击按钮时调用的处理函数
22. alert(btn.text);//取得按钮上的文字
23. }
25. Ext.get('enabledBtn').on('click',function(){
26. //启用工具栏
27. toolbar.enable();
28. });
29. Ext.get('disabledBtn').on('click',function(){
30. //禁用工具栏
31. toolbar.disable();
32. });
33. });
34. </script>
35. </HEAD>
36. <BODY STYLE="margin: 10px">
37. <div id='toolbar'></div>
38. <input type=button value='启用工具栏' id='enabledBtn'>
39. <input type=button value='禁用工具栏' id='disabledBtn'>
40. </BODY>
41. </HTML>
```
<HTML>
 <HEAD>
  <TITLE>启用和禁用工具栏</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
			renderTo:'toolbar',
			200,
			items :[{
				text:'新建',//按钮上显示的文字
				handler:onButtonClick//点击按钮的处理函数
			},
			{text:'打开',handler:onButtonClick},
			{text:'保存',handler:onButtonClick}]
		});

		function onButtonClick(btn){//点击按钮时调用的处理函数
			alert(btn.text);//取得按钮上的文字
		}
		
		Ext.get('enabledBtn').on('click',function(){
			//启用工具栏
			toolbar.enable();
		});
		Ext.get('disabledBtn').on('click',function(){
			//禁用工具栏
			toolbar.disable();
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
 	<div id='toolbar'></div>
	<input type=button value='启用工具栏' id='enabledBtn'>
	<input type=button value='禁用工具栏' id='disabledBtn'>
 </BODY>
</HTML>
```
Html代码
1. <HTML>
2. <HEAD>
3. <TITLE>简单的菜单栏</TITLE>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
6. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
7. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
8. <script type="text/javascript">
9. Ext.onReady(function(){
10. var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
11. renderTo:'toolbar',
12. 300
13. });
14. var fileMenu = new Ext.menu.Menu({//文件创建菜单
15. shadow : 'frame',//设置菜单四条边都有阴影
16. allowOtherMenus : true,
17. items : [
18. new Ext.menu.Item({
19. text: '新建',//菜单项名称
20. menuHideDelay:1000,
21. handler:onMenuItem//菜单项处理函数
22. }),//添加菜单项
23. {text: '打开',handler:onMenuItem},
24. {text: '关闭',handler:onMenuItem}
25. ]
26. });
27. var editMenu = new Ext.menu.Menu({//编辑创建菜单
28. shadow : 'drop',//设置菜单在右下两条边有阴影
29. allowOtherMenus : true,
30. items : [
31. {text: '复制',handler:onMenuItem},//添加菜单项
32. {text: '粘贴',handler:onMenuItem},
33. {text: '剪切',handler:onMenuItem}
34. ]
35. });
36. toolbar.add(
37. {text : '文件', menu : fileMenu},//将菜单加入工具栏
38. {text : '编辑', menu : editMenu}
39. );
40. function onMenuItem(item){//菜单项的回调方法
41. alert(item.text);//取得菜单项的text属性
42. }
43. });
44. </script>
45. </HEAD>
46. <BODY STYLE="margin: 10px">
47. <div id='toolbar'></div>
48. </BODY>
49. </HTML>
```
<HTML>
 <HEAD>
  <TITLE>简单的菜单栏</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
			renderTo:'toolbar',
			300
		});
		var fileMenu = new Ext.menu.Menu({//文件创建菜单
			shadow : 'frame',//设置菜单四条边都有阴影
			allowOtherMenus : true,
			items : [
				new Ext.menu.Item({
					text: '新建',//菜单项名称
					menuHideDelay:1000,
					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){//菜单项的回调方法
			alert(item.text);//取得菜单项的text属性
		}
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
 	<div id='toolbar'></div>
 </BODY>
</HTML>
```
Html代码
1. <HTML>
2. <HEAD>
3. <TITLE>多级菜单栏</TITLE>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
6. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
7. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
8. <script type="text/javascript">
9. Ext.onReady(function(){
10. var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏
11. renderTo:'toolbar',
12. 300
13. });
14. var infoMenu = new Ext.menu.Menu({//一级菜单
15. ignoreParentClicks : true,//忽略父菜单的单击事件
16. plain : true,
17. items : [
18. {
19. text: '个人信息',
20. menu: new Ext.menu.Menu({//二级菜单
21. ignoreParentClicks : true,//忽略父菜单的单击事件
22. items:[
23. {
24. text: '基本信息',
25. menu : new Ext.menu.Menu({//三级菜单
26. items:[
27. {text: '身高',handler:onMenuItem},
28. {text: '体重',handler:onMenuItem}
29. ]
30. })}
31. ]
32. })
33. },//添加菜单项
34. {text: '公司信息'}
35. ]
36. });
37. Toolbar.add(
38. {text : '设置', menu : infoMenu}//将菜单加入工具栏
39. );
40. function onMenuItem(item){//选择菜单项的处理函数
41. alert(item.text);//取得菜单项的text属性
42. }
43. });
44. </script>
45. </HEAD>
46. <BODY STYLE="margin: 10px">
47. <div id='toolbar'></div>
48. </BODY>
49. </HTML>
```
<HTML>
 <HEAD>
  <TITLE>多级菜单栏</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏
			renderTo:'toolbar',
			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){//选择菜单项的处理函数
			alert(item.text);//取得菜单项的text属性
		}
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
 	<div id='toolbar'></div>
 </BODY>
</HTML>
```
Html代码
1. <HTML>
2. <HEAD>
3. <TITLE>将更多组件加入菜单</TITLE>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
6. <STYLE TYPE="text/css">
7. .userManagerIcon { background-image: url(images/userManager.gif) !important; }
8. .newIcon { background-image: url(images/new.gif) !important; }
9. .openIcon { background-image: url(images/open.gif) !important; }
10. .saveIcon { background-image: url(images/save.gif) !important; }
11. </STYLE>
12. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
13. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
14. <script type="text/javascript">
15. Ext.onReady(function(){
17. var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏
18. renderTo:'toolbar',
19. 300
20. });
22. var fileMenu = new Ext.menu.Menu({//文件创建菜单
23. items : [{
24. xtype : 'textfield',//创建表单字段
25. hideLabel: true,
26. width : 100
27. },{
28. text:"颜色选择",
29. menu : new Ext.menu.ColorPicker()
30. },
31. {xtype: 'datepicker'},//添加日期选择器组件
32. {
33. xtype: 'buttongroup',//添加按钮组组件
34. columns: 3,
35. title: '按钮组',
36. items: [{
37. text: '用户管理',
38. scale: 'large',
39. colspan : 3,
40. width : 170,
41. iconCls: 'userManagerIcon',
42. iconAlign: 'top'
43. },{
44. text: '新建', iconCls: 'newIcon'
45. },{
46. text: '打开', iconCls: 'openIcon'
47. },{
48. text: '保存', iconCls: 'saveIcon'
49. }]
50. }
51. ]
52. });
54. Toolbar.add(
55. {text : '文件', menu : fileMenu}//将菜单加入工具栏
56. );
57. });
58. </script>
59. </HEAD>
60. <BODY STYLE="margin: 10px">
61. <div id='toolbar'></div>
62. </BODY>
63. </HTML>
```
<HTML>
 <HEAD>
  <TITLE>将更多组件加入菜单</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
  <STYLE TYPE="text/css">
    .userManagerIcon { background-image: url(images/userManager.gif) !important; }
	.newIcon { background-image: url(images/new.gif) !important; }
	.openIcon {	background-image: url(images/open.gif) !important; }
	.saveIcon {	background-image: url(images/save.gif) !important; }
  </STYLE>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){

		var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏
			renderTo:'toolbar',
			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,
						iconCls: 'userManagerIcon',
						iconAlign: 'top'
					},{
						text: '新建', iconCls: 'newIcon'
					},{
						text: '打开', iconCls: 'openIcon'
					},{
						text: '保存', iconCls: 'saveIcon'
					}]
				}
			]
		});

		Toolbar.add(
			{text : '文件',	menu : fileMenu}//将菜单加入工具栏
		);
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
 	<div id='toolbar'></div>
 </BODY>
</HTML>
```
Html代码
1. <HTML>
2. <HEAD>
3. <TITLE>具有选择框的菜单</TITLE>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
6. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
7. <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
8. <script type="text/javascript">
9. Ext.onReady(function(){
11. var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
12. renderTo:'toolbar',
13. 300
14. });
15. var themeMenu = new Ext.menu.Menu({//文件创建菜单
16. items : [{
17. text:'主题颜色',
18. menu:new Ext.menu.Menu({
19. items:[{
20. text: '红色主题',
21. checked: true,//初始为选中状态
22. group: 'theme',//为单选项进行分组
23. checkHandler: onItemCheck
24. },{
25. text: '蓝色主题',
26. checked: false,//初始为未选中状态
27. group: 'theme',
28. checkHandler: onItemCheck
29. },{
30. text: '黑色主题',
31. checked: false,
32. group: 'theme',
33. checkHandler: onItemCheck
34. }]
35. })
36. },{
37. text:'是否启用',
38. checked : false
39. }]
40. });
42. toolbar.add(
43. {text : '风格选择', menu : themeMenu}//将菜单加入工具栏
44. );
45. function onItemCheck(item){//菜单项的回调方法
46. alert(item.text);//取得菜单项的text属性
47. }
48. });
49. </script>
50. </HEAD>
51. <BODY STYLE="margin: 10px">
52. <div id='toolbar'></div>
53. </BODY>
54. </HTML>
相关阅读:
aarch64_p1
aarch64_o2
aarch64_o1
aarch64_n3
aarch64_n2
aarch64_n1
aarch64_m3
aarch64_m2
aarch64_m1
aarch64_l3
原文地址：https://www.cnblogs.com/luluping/p/2243759.html