zoukankan      html  css  js  c++  java

  • 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('取消');   
    9.            
    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.         })   
    9.   
    10.         var count = 0;//滚动条被刷新的次数   
    11.         var percentage = 0;//进度百分比   
    12.         var progressText = '';//进度条信息   
    13.   
    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.                 }   
    29.                    
    30.             },   
    31.             interval:1000   
    32.         }   
    33.   
    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 = '';//进度条信息   
    9.   
    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.         });   
    6.   
    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.         ]);   
    16.   
    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.         });   
    20.   
    21.         function onButtonClick(btn){//点击按钮时调用的处理函数   
    22.             alert(btn.text);//取得按钮上的文字   
    23.         }   
    24.            
    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(){   
    16.   
    17.         var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏   
    18.             renderTo:'toolbar',   
    19.             300   
    20.         });   
    21.   
    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.         });   
    53.   
    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(){   
    10.   
    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.         });   
    41.   
    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>  
  • 相关阅读:
    一个故事讲透供应链的三大战略
    电商系统之订单正向与逆向流程设计
    广告深度预估技术在美团到店场景下的突破与畅想
    美团智能客服核心技术与实践
    供应链里的批次管理，你了解多少
    对于HTML语义化的理解
    前端三大框架中Vue与React区别
    对于mvc模式的理解与学习
    对于javascript里面闭包的理解
    webpack的理解与使用
  • 原文地址：https://www.cnblogs.com/luluping/p/2243759.html
Copyright © 2011-2022 走看看