`
hnhnhnhnhn
  • 浏览: 77151 次
社区版块
存档分类
最新评论

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


//等待提示框会显示一个自动更新的进度条
Ext.MessageBox.wait('请等待,操作需要很长时间!','提示',{
			text : '进度条上的文字'
		});


6、进度条的使用
//手动模式的进度条
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//设置执行次数
		});

//自动模式的进度条
		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('更新完毕');
			}
		});


<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>
//自定义样式的进度条样式
		var ProgressBar = new Ext.ProgressBar({
			width:300,//设定进度条的宽度
			renderTo:'ProgressBar',
			cls:'custom'//使用自定义样式
		});
		ProgressBar.wait({
			duration:10000,//进度条持续更新10秒钟
			interval:1000,//每1秒钟更新一次
			increment:10//进度条分10次更新完毕
		});

7、工具栏、菜单栏相关
//简单的工具栏
		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);//取得按钮上的文字
		}

//使用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>
 <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>
 <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>
 <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>
 <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>
 <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 themeMenu = new Ext.menu.Menu({//文件创建菜单
			items : [{
				text:'主题颜色',
				menu:new Ext.menu.Menu({
					items:[{
						text: '红色主题',
						checked: true,//初始为选中状态
						group: 'theme',//为单选项进行分组
						checkHandler: onItemCheck
					},{
						text: '蓝色主题',
						checked: false,//初始为未选中状态
						group: 'theme',
						checkHandler: onItemCheck
					},{
						text: '黑色主题',
						checked: false,
						group: 'theme',
						checkHandler: onItemCheck
					}]
				})
			},{
				text:'是否启用',
				checked : false
			}]
		});

		toolbar.add(
			{text : '风格选择',	menu : themeMenu}//将菜单加入工具栏
		);
		function onItemCheck(item){//菜单项的回调方法
			alert(item.text);//取得菜单项的text属性
		}
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
 	<div id='toolbar'></div>
 </BODY>
</HTML>
分享到:
评论
1 楼 zjchase 2012-06-28  
顶,书本没有光盘,有时候找不到错误,就看这里的。感谢作者分享!

相关推荐

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...

    extJs 2.1学习笔记

    3. **Ext.form概述**:ExtJs的表单组件是其强大功能之一,这部分会讲解如何创建和配置表单,以及表单字段、验证和提交机制等基础知识。 4. **Ext.TabPanel篇**:TabPanel是ExtJs中的一个常用组件,用于展示多个面板...

    extjs 的一些学习笔记

    【ExtJS 学习笔记概览】 ExtJS 是一个强大的JavaScript 框架,主要用于构建富客户端的Web应用程序。它的核心特性包括丰富的组件库、强大的数据包管理、灵活的布局系统以及面向对象的编程模型。以下是对ExtJS 入门...

    Extjs3.4+Ext-core.pdf+轻松搞定Extjs.pdf

    `Extjs学习笔记.docx` 可能是一位开发者或讲师整理的学习心得和笔记,可能包含了一些个人的理解、技巧、常见问题解答和解决方案。这种类型的文档通常会提供一些实战中的经验和见解,对于深化理解和解决问题可能非常...

    ExtJS面板学习笔记(带有运行效果)

    ### ExtJS面板学习笔记 #### 一、基础:弹出框 在ExtJS中,`Ext.MessageBox`提供了创建各种模态对话框的功能,包括提示、确认、输入等。以下是几个基本示例: 1. **简单警告对话框**: ```javascript Ext....

    ExtJs学习笔记,共30讲

    这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...

    extjs 学习笔记(一) 一些基础知识

    以上知识点涵盖了ExtJS学习笔记中的核心内容,通过这些知识点的学习和实践,开发者能够入门并逐渐深入理解ExtJS框架,并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说,理解这些基础知识...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    网页设计笔记--整理给初学者的笔记

    笔记涵盖了从基础知识到进阶知识的内容,包括div+css, fireworks(photoshop), dreamweaver+html+javascript/jquery、extjs等。 笔记首先强调了基础知识的重要性,包括css, js, html, div, ps/fw, dw等。然后,笔记...

    EXTJS学习笔记

    ### EXTJS学习笔记 #### 一、EXTJS基础概念与命名空间管理 **EXTJS** 是一款基于JavaScript的开源框架,主要用于开发复杂的企业级Web应用。它的设计目标是提高前端开发效率并简化复杂的用户界面(UI)开发过程。在...

    extjs学习笔记

    ### extjs学习笔记知识点梳理 #### 一、Ext.MessageBox 方法详解 Ext.MessageBox 是 ExtJS 库中的一个重要组件,用于向用户展示消息对话框。它包含了多种类型的消息对话框,每种对话框都有其特定用途。 - **Ext....

    (转载)GWT -EXT学习笔记-基础

    ### GWT-EXT基础知识详解 #### 一、GWT与GWT-EXT简介 Google Web Toolkit (GWT) 是一款由Google开发的开源框架,它允许开发者使用Java语言编写前端应用,并将其编译成浏览器可识别的JavaScript和HTML。GWT提供了...

    extjs学习网页学习资料

    开发者在学习过程中不仅要理解文档,还应该结合实际的开发笔记和个人学习笔记,对所学知识进行实际的编码操作和问题解决实践。这些笔记通常包含了他人在开发过程中遇到的问题及其解决方案,同时还有许多实用的技巧和...

    EXT学习笔记-项目应用实践

    这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...

Global site tag (gtag.js) - Google Analytics