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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值