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

最新推荐文章于 2019-01-16 16:43:29 发布

xiaozaq

最新推荐文章于 2019-01-16 16:43:29 发布

阅读量710

点赞数

分类专栏： extjs 文章标签： extjs

本文链接：https://blog.csdn.net/xiaozaq/article/details/49777771

版权

extjs 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

1. 环境的搭建

1.1 安装eclipse

2.2 安装spket

2. 框架下载

下载ext-4.2.1.883版本的extjs框架

3. 参考extjs 权威指南学习

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

3.2 jsp文件中引入必要的文件。前面jsp有定义

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