ExtJs4学习笔记一－－基础知识

最新推荐文章于 2025-08-08 17:07:36 发布
转载 最新推荐文章于 2025-08-08 17:07:36 发布 · 687 阅读 · 2
文章标签：

#extjs #function #callback #javascript #工具 #stylesheet

本文介绍 ExtJS 4 的基础知识，包括 JSON 对象的定义与使用、消息提示框的不同用法、进度条的展示及工具栏与菜单栏的创建与配置等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

开始学习ExtJs4，陆续记录学习过程，希望有所用处：
特别注意：在这里有些写法还是沿用之前版本，效果依然能够出来，当时最好进行改动，例如new可以改为Ext.create

一、基础知识
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.             width: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,
			width: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.             width: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({
			width: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.             width: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({
			width: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.             width: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({
			width: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.             width: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',
			width: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.             width:500 
  5.         }); 
  6.         toolbar.add( 
  7.             {text:'新建'},{text:'打开'}, 
  8.             {text:'编辑'},{text:'保存'}, //加入按钮 
  9.             '-',                          //加入工具栏分隔符 
  10.             {     //加入表单元素 
  11.                 xtype:'textfield', 
  12.                 hideLabel : true, 
  13.                 width:150 
  14.             }, 
  15.             '->',                        //加入一个充满工具栏的空白元素 
  16.             '<a href=#>超连接</div>',    //加入一个Element元素 
  17.             {xtype: 'tbspacer', width: 50},//加入一个空白元素，宽度为50像素 
  18.             '静态文本'                   //加入一个简单字符串 
  19.         );  
//使用add方法加入多种元素的复杂工具栏
		var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
			renderTo:'toolbar',
			width:500
		});
		toolbar.add(
			{text:'新建'},{text:'打开'},
			{text:'编辑'},{text:'保存'}, //加入按钮
			'-',                          //加入工具栏分隔符
			{     //加入表单元素
				xtype:'textfield',
				hideLabel : true,
				width:150
			},
			'->',                        //加入一个充满工具栏的空白元素
			'<a href=#>超连接</div>',    //加入一个Element元素
			{xtype: 'tbspacer', width: 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="../../ext-4.0/resources/css/ext-all.css" /> 
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script> 
  7.   <script type="text/javascript" src="../../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.             width: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="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../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',
			width: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="../../ext-4.0/resources/css/ext-all.css" /> 
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script> 
  7.   <script type="text/javascript" src="../../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.             width: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="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../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',
			width: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="../../ext-4.0/resources/css/ext-all.css" /> 
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script> 
  7.   <script type="text/javascript" src="../../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.             width: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="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../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',
			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){//选择菜单项的处理函数
			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="../../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="../../ext-4.0/bootstrap.js"></script> 
  13.   <script type="text/javascript" src="../../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.             width: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="../../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="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../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',
			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,
						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="../../ext-4.0/resources/css/ext-all.css" /> 
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script> 
  7.   <script type="text/javascript" src="../../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.             width: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> 
学习笔记--第二章WebGIS开发基础
GIS开发
03-20 1133
Web前端从概念上划分为相对独立的三个层次：结构、表现和行为，在物理层面上分别对应HTML、CSS、JavaScript三种不同的文件格式，它们各司其职，HTML负责定义网页的结构与内容，CSS负责内容的展现方式，JavaScript负责网页的动态行为。因此，利用Web服务技术，可以很好地实现服务在Web层次的互操作，并实现服务的整合。其基本原理就是：因为球面上一点的位置决定于它的经纬度，所以实际投影时是先将一些经纬线的交点展绘在平面上，再将相同的经纬度的点连成经线，相同的纬度的点连成纬线，构成经纬网。
[ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
热门推荐
苏生-苏米沿的专栏
08-01 2万+
这篇指引提供了一个简单的ext js介绍，我们会从讨论建立一个简单的hello world例子开始我们的体验。我们会接着讲解在extjs中代码是怎样的结构，这个指导同样也会包括一些其他可以使用的资源的链接，所以，你应该尽可能的多看一些来提升你对ext的认知程度。
Extjs学习笔记 --- 初篇
realsmy---久城的学习室
12-25 181
至此圣诞佳节，漫写学习笔记。 无意中接触到的Extjs，还去baidu查了查什么是Extjs，随之，被它酷酷的外表迷惑了，即使很多人在议论着它几百K的胖客户端所带来的性能问题，依旧不会影响我学习它的心情。 对于Extjs的前景我没资格谈，也不想谈，这个问题离我太远。 Extjs就是一个js库，里面封装了很多常用的UI组件，目前的版本是2.0。 关于学习Extjs 官方网站：http://...
学习笔记-extjs treepanel
liyang_hawk的专栏
09-05 1179
以前都是零散的学习extjs，只做过两个类似的后台界面一类的，对于基础知识的掌握还不熟。工作项目做的是extjs 3.4版本的，重新学习了一个多月，还是很多不会的地方呢，把平时的笔记贴出来，时不时看一看也是好的。 下面，演示一个extJs treepanel的创建吧。先看看最终的图形。 以前都是零散的学习extjs，只做过两个类似的后台界面一类的，对于基础知识的掌握还不熟。工作项目做的是ext
ext ajax服务器相应前的函数,extjs 学习笔记（一） 一些基础知识
weixin_42312227的博客
08-06 357
extjs 学习笔记(一) 一些基础知识发布于 2017-06-24 08:28:36 | 73 次阅读 | 评论: 0 | 来源: 网友投递ExtJS Javascript库ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。相信很多人对使用js进行客户端的编程比较头大，其实现在已经有了很多优秀的js库，可以大大简化js编程的工作量，其中，jquery和extj...
extjs学习笔记（一） 一些基础知识
niuyongjie的专栏
10-19 2107
转载自：http://www.cnblogs.com/yage/archive/2009/10/11/1579956.html 相信很多人对使用js进行客户端的编程比较头大，其实现在已经有了很多优秀的js库，可以大大简化js编程的工作量，其中，jquery和extjs就是两款非常优秀的js库。我在项目中已经频繁使用了jquery，这次主要是学习使用extjs，但现有的教程基本都是针对2.0的，
EXTJs学习笔记（知识点总结）
sdfsdfytre的博客
02-06 184
EXTJs学习笔记（知识点总结）
ExtJS学习笔记
adjcqbb47379的博客
08-02 356
学习ExtJS 一、学习ExtJS前提 1、Javascript 2、JSON（减肥的XML） 3、Java（C#） 4、Web Services 5、HTML DOM 6、AJAX ----------------------------------------------------------------------------------- ...
extjs 学习笔记（一） 一些基础知识
10-29
以上知识点涵盖了ExtJS学习笔记中的核心内容，通过这些知识点的学习和实践，开发者能够入门并逐渐深入理解ExtJS框架，并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说，理解这些基础知识...
Extjs 5 学习笔记
10-22
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
入门基础学习 ExtJS笔记（一）
10-28
本文将基于标题“入门基础学习 ExtJS笔记（一）”和描述，介绍ExtJS的基础知识，特别是如何创建一个基本的界面框架。 首先，要使用ExtJS，我们需要引入必要的CSS样式表和JavaScript库。在HTML文件中，我们看到引用...
ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理
lf_1234的博客
08-06 897
摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。
使用萤石云播放视频及主题模版配置
多看书少吃饭的博客
08-07 518
本文介绍了如何在H5页面中集成萤石云视频播放功能。首先需要安装ezuikit-js依赖，然后通过EZUIKitPlayer组件传入accessToken和视频URL即可实现基础播放功能。文章详细说明了两种版本（UIKIT和UIKITPRO）的区别，并提供了完整的代码示例，包括视频容器设置、自动播放配置和样式调整。此外，还介绍了如何通过template字段自定义视频主题模板，包括官方模板和自定义模板两种方式。最后提及了WEB端和H5端均可进行模板配置，为开发者提供了完整的萤石云视频接入解决方案。
【JS】扁平树数据转为树结构
此人太懒，没有任何简介
08-07 275
摘要：本文展示了如何将扁平数据结构转换为树形结构的JavaScript实现。通过buildTree函数，可以根据指定的ID和父ID字段将扁平数据转换为嵌套的树形结构，并可选地删除空子节点。示例代码演示了如何将包含公司部门信息的扁平数据转换为层级分明的树状结构，结果输出为JSON格式的树形数据。该工具函数适用于处理组织机构、菜单等需要层级展示的数据场景。
Vite 深度解析：现代前端开发引擎
最新发布
weixin_43822134的博客
08-08 784
Vite 代表了前端工具链从"打包时代"向"原生ESM时代"的演进，其核心价值在于将开发者从构建等待中解放出来。虽然Webpack在复杂场景下仍有优势，但Vite已成为现代前端开发的默认选择。
Vue3 学习教程，从入门到精通， Vue 3 实例选项语法详解与案例代码(29）
qq_45746668的博客
08-07 1169
本文详细介绍了Vue 3的实例选项语法，包括数据选项、DOM选项、生命周期钩子等核心概念。通过一个完整的待办事项应用示例，展示了各选项的实际应用场景，如data定义响应式数据、methods编写组件方法、computed计算属性、watch监听数据变化等。示例代码包含详细注释，涵盖组件注册、指令定义、事件处理等常见功能，并演示了从父组件到子组件的数据传递和通信方式。文章适合Vue 3初学者全面了解组件选项的用法和组合方式。
ExtJS深度学习笔记，从基础到高级
8. **其他章节**：包括Element API、DomHelper和Ext.js的基础知识，这些是理解ExtJS工作原理的关键，涵盖了DOM操作和UI元素的创建。 通过这份学习笔记，开发者可以系统地学习ExtJS的各个方面，从基础到高级，有助于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值