ExtJS学习笔记(一)

1.ExtJS环境搭建

①先在官网下载spket-1.6.23，extjs-4.1.1，解压，将解压后的文件夹plugins,features放到MyEclipse\MyEclipse 10\dropins内，我的是MyEclipse10,可以这样用。然后打开MyEclipse10，在window-->Preferences会发现出现选项Spket，表示插件安装成功。点Spket-->JavaScript Profile,New一个profile，name随便写，不过建议写ExtJS,点Add Library,在library里选ExtJS，再add file,选择sdk.jsb3，全选。最后再点Default，记住，一定要点Default。这文件是给智能提示的。注意：路径一定要为extjs-4.1.1\build\sdk.jsb3,而不是随便一个路径上的sdk.jsb3，必须要在extjs-4.1.1文件夹中去找。否则写js文件时，不会出现提示。下午就因为换了路径而死活找不到问题所在，最后才发现。

②这时再在window-->Preferences-->General-->Editors-->File Associatior，选“.js”，将Spket JavaScript Editor设为Default，这是默认使用Spket打开js文件的。

③解压后的extjs-4.1.1有examples和resources文件夹，导入项目中（就是直接复制），导入前右键点击项目名称，选Propreties-->Builders，将JavaScript Validator勾掉，否则导入这两个文件夹时，MyEclipse会卡死,最后只能重装MyEclipse。

④再导入ext-all-debug.js和ext-lang-zh_CN.js，在jsp页面里边这样写：

<!-- 引入ext的样式文件 -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<!-- 引入ext核心文件，开发模式 -->
<script type="text/javascript" charset="utf-8" src="extjs/ext-all-debug.js"></script>
<!-- 引入国际化文件 -->
<script type="text/javascript" charset="utf-8" src="extjs/ext-lang-zh_CN.js"></script>
<!-- 引入外部js文件，要是直接在jsp里边写，反应会很慢 -->
<script type="text/javascript" charset="utf-8" src="base/001_helloworld.js"></script>

注意，使用extjs时，js文件不要写到jsp里边，要从外部引入，否则此时在jsp里写javascript语句会非常卡。

测试使用时会发现MessageBox中title文字会比较小，这时要将resources/css/ext-all.css中的11px全部替换为12px即可。

2.Ext.onReady()表示确保页面全部加载完后才执行javascript语句，是一个入口函数，相当于java里边的main函数。

3.若属性在config里面，则系统会默认给出set或get方法。只是在extjs中不智能提示，需要手打。如：

//ExtJS 建立类 实例化对象
	Ext.define('Person',{//创建新类
		config:{     //配置项
			name:'张三', 
			age:20
		},
		say:function(){
			alert('say...');
		},
		constructor:function(config){//将配置项初始化,新建类时最好写上构造函数.下边为推荐写法
			var self = this;
			self.initConfig(config);//初始化类 传递参数
		}
	});

	//实例化对象
	var p = Ext.create('Person',{ 
		name:'李四',      //该处为逗号，不是分号
		id:50,            //不能通过这样的方式来给子类增加新属性，因为在父类config里没有定义    
		age:21            //最后一步后边没有任何符号，这和js不同。js每步后都为分号
	});
	alert(p.getName());//getName()是系统自动补充，但不会给出提示，需要我们手打。
	alert(p.getAge());
	alert(p.id);//此时会显示id为undefined
	alert(p.getId());//会报错，p.getAge is not a function 因为在父类中没定义
	p.say();
)};

在上边，构造器最常见的写法是下边的，但不推荐，而通过新建变量接收this值得方式更安全，推荐使用上边写法。

constructor:function(config){
			this.initConfig(config);//初始化类 传递参数
		}

而在js中是这样建类的

function Person(id,name){//新建类
	this.id = id;
	this.name = name;
}

var p = new Person(10,"李四");//实例化对象

4.ext要创建一个类，用Ext.define;实例化对象则用Ext.create。
   Ext.define可以创建类，可以继承其它类，也可以被继承。可配默认属性：
   extend( 注意，后面没有s)：继承其它的类
   mixins：将其他的类融入到当前类，类似于多继承。observable是经常被mixins的
   constructor：构造函数，推荐最好写上。
如：

Ext.define('Ext.Ajax',{
	mixins{   //添加混合方法
		observable:'Ext.util.observable'


	}
});

5.render表示渲染，渲染的意思就是
比如new Ext.Panel();此时页面上是没有这个panel的，什么都看不到，它只是存在于内存中的javascript对象。当调用panel.render('div1');时，就是把这个对象中对应的配置放到html中，这时才能看到带有ext样式的panel.或可用renderTo:Ext.getBody()等方法渲染到body中(必须写这一句，否则不会在页面显示)

6.js新建的类中如何添加方法？

function Person1(id,name){
		this.id = id;
		this.name = name;
		this.say = function(){//一定要写this，否则会在实例化对象时提示say is not a function
			alert("js中的say方法");
		};
	};

var p = new Person1();

7.

Ext.MessageBox.alert(String title,String Msg,[Function fn],[Object scope]);

作用是显示一对话框，其中title为标题，Msg为内容，fn为回调函数，“[]”里边的都是可选，scope为作用域。如：

Ext.MessageBox.alert("这是标题", "信息提示对话框！", function(){  
    alert("你好"); //对话框有一“确定”按钮，点下会弹出“你好”  
});

这是给对话框添加了方法

8.Ext.widget是只有如TestField,checkBox,button等菜单类组件

9.对于单例(即singleton)类的理解：单例类就是这个类，不管new多少次，只创建一个对象，可以直接使用。如在新建的window中使用

single:true;

则show()后，window只弹出一次。若不使用上句，则每一次show(),就会弹出一个window

10.Ext.apply 将原对象的所有属性和方法复制到目标对象
Ext.applyif 将原对象的所有目标对象未包含的属性和方法复制到目标对象
Ext.Array.each 遍历数组，类似于for(var x in array)

11.syntax error是语法错误

12.创建面板的过程

Ext.onReady(function(){    //这是extjs的规定写法，必须这样写
	//panel
	Ext.create('Ext.panel.Panel',{   //创建pannel可以是Ext.panel.Panel，或Ext.Panel,不能是单独的pannel或Pannel.同理，创建按钮可用Ext.create('Ext.Button',{});
		title:'这是面板',
		width:'50%',
		height:'60%',
		html:'<div id="mydiv">这是div</div><input type="text" id="inp">',   //pannel中可加html元素
		renderTo:Ext.getBody(),   //通过该句使面板从内存显示到页面
		frame:true   //这句作用就是使面板有背景色，棱角圆润些，更好看
	});
});

13.alias即给方法增加别名，在某些时候使用会很方便

var obj = {
		obj1:{
			obj2:{
				obj3:{
					say:function(){
						alert("哈哈")
					}
				}
			}
		}
	}
var myobj = Ext.Function.alias(obj.obj1.obj2.obj3,'say');
myobj();//该句的作用和obj.obj1.obj2.obj3.say()一样，都出现一样的结果

结果就是弹窗提示"哈哈"

正常情况下，若不起别名，想使用say方法，则要用obj.obj1.obj2.obj3.say(),这时就体现出别名的好处了，直接使用别名，而不是那一长串字符。

14.对于享元模式，用fly写享元模式，与以前的写法稍有不同，应该处理完一个内容再处理另一个，否则出错。例如：

//fly则是利用享元模式
	var sp2 = Ext.fly('sp2');
	sp2.applyStyles({
		backgroundColor:'red',
		fontsize:'50px'
	});
	
	var sp1 = Ext.fly('sp1');
	sp1.applyStyles({
		backgroundColor:'yellow',
		fontsize:'20px'
	});

结果为：

若写成这样：

//fly则是利用享元模式
	var sp2 = Ext.fly('sp2');
	var sp1 = Ext.fly('sp1');
	sp1.applyStyles({
		backgroundColor:'yellow',
		fontsize:'20px'
	});
	
	sp2.applyStyles({
		backgroundColor:'red',
		fontsize:'50px'
	});

结果就变成：

谁在下边就改谁，无论修饰的是不是该元素。这也是享元模式的特点。

15.js中的数组是用[]括起来的，而在java中则是用{}包括。