日期:2014-05-16  浏览次数:20380 次

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

一、基础知识
1、JAON对象的例子
<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、逗号分隔参数列表配置组件的例子
Ext.Msg.alert('提示','逗号分隔参数列表');//这种配置方式非常常见


3、JSON对象配置组件的例子
Ext.onReady(function(){
		var config = {//定义配置对象
			title:'case01',
			msg: '我的配置很简单,不信来看看我的源代码吧!'
		}
		Ext.Msg.show(config);//将配置对象传入方法中
	  });


4、支持HTML格式化的Extjs信息提示框的例子
Ext.onReady(function(){
		Ext.Msg.alert('提示','<font color=red>支持HTML格式文本</font>');
	});


5、Ext.MessageBox的各种不同用法相关
Ext.onReady(function(){
		//Ext.MessageBox.alert('提示','请单击我,确定',callBack);
                Ext.MessageBox.show({
		   title: '提示',
                     msg: '请单击我,确定',
                     buttons: Ext.MessageBox.OKCANCEL,
                     fn: callBack
		});
		function callBack(id){
			alert('单击的按钮ID是:'+id);
		}


Ext.onReady(function(){
		Ext.MessageBox.confirm('提示','请单击我,做出选择',callBack);
		function callBack(id){
			alert('单击的按钮ID是:'+id);
		}
	});


Ext.onReady(function(){
		Ext.MessageBox.prompt('提示','输入一些内容看看:',callBack,this,true,"我是默认值");
		function callBack(id,msg){
			alert('单击的按钮ID是:'+id+'\n'+'输入的内容是:'+msg);
		}
	  });


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


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


//多次设置信息提示框按钮文字//'ok'
		Ext.MessageBox.msgButtons[0].setText('确认按钮');//第一次设置
		Ext.MessageBox.alert('提示','提示信息一',function(){
			Ext.MessageBox.msgButtons[0].setText('新的确认按钮');//第二次设置
			Ext.MessageBox.alert('提示','提示信息二');
		});


//通过调用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);


//通过调用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,p