extjs 4.2 学习笔记（一） 从“Hello World”开始

1. 环境的搭建

1.1 安装eclipse
2.2 安装spket

2. 框架下载

下载ext-4.2.1.883版本的extjs框架

3. 参考extjs 权威指南学习

3.1 首先将必要的文件copy到项目。只copy了下面写文件，以后遇到报错以后再添加。

3.2 jsp文件中引入必要的文件。前面jsp有定义
<base href="<%=basePath%>">

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>

3.3 代码练习。了解extjs的几个常用用法。
Ext.Viewport
Ext.onReady
Ext.BLANL_IMAGE_URL
Ext.widget与Ext.create

Ext.nc 命名空间，可以使变量全局使用，一般不推荐使用全局变量，如果实在要用可以反在Ext对象下。Ext.ns("Ext.Myapp","Ext.Myapp.data")

Ext.define 自定义类。定义类的几个参数：

construtor 构造函数

extend 继承

mixins 混合类

static 静态方法

Ext.onReady(function(){
// 	if(Ext.BLANK_IMAGE_URL.substring(0, 4) != "data"){
// 		Ext.BLANK_IMAGE_URL = "./images/s.gif";
// 	}
//hello world
// 	new Ext.Viewport({
Ext.create('Ext.Viewport',{
layout:'fit',
items:[{
xtype:"panel",
title:"欢迎",
html:"<h1 style='text-align:center;font-size:60px;'>Hello World</h1>"
}]
})
//Ext.widget('',{})与Ext.create类是，只是第一个参数使用类的别名
//Ext.ns("Ext.Myapp","Ext.Myapp.data")命名空间
// 	Ext.define(classname,properties,callback)定义新类callback可省去
//定义Calculator类
Ext.define("Calculator",{
construtor:function(){
return this;
},
plus:function(v1,v2){
return v1+v2;
},
minus:function(v1,v2){
return v1-v2;
},
multiply:function(v1,v2){
return v1*v2;
},
didvid:function(v1,v2){
return v1/v2;
}
})
var cal = new Calculator();
cal.plus(87,28);
cal.minus(87,28);
cal.multiply(7,8);
cal.didvid(16,2);
//定义子类
Ext.define("BIN",{
bin:function(v1){ //十进制转二进制
return v1.toString(2);
}
});
Ext.define("NewCalculator",{
extend: "Calculator",
mixins:{
Bin:"BIN"
},
hex:function(v1){ //十进制转十六进制
return v1.toString(16);
},
convert:function(v1,type){
switch(type){
case 2:
return this.bin(v1);
break;
case 16:
return this.hex(v1);
break;
}
}
});
var ncal = new NewCalculator();
ncal.hex(28);
ncal.convert(28,16);
ncal.convert(17,2);
})