extjs 初识

来源：互联网发布：春天奏鸣曲贝多芬知乎编辑：程序博客网时间：2024/06/01 23:28

在研究IM的时候发现，extjs是里面的重要组成部分，有必要了解

1、安装部署

到http://extjs.org.cn/ 下载最新版

解压到网站的根目录即可

2、第一个程序 "Hello World"

首先建立一个test.html文件，引入两个关键性文件，及它的样式与脚本

<link rel="stylesheet" type="text/css" href="/extjs4/resource/css/ext-all.css" /><script type="text/javascript" src="/extjs4/bootstrap.js"></script> //在extjs3中引用的是ext-all.js

建立一个hello.js的文件

(function(){    Ext.onReady(function(){        //alert("hello world");        Ext.MessageBox.alert('hello', 'hello world');    });})();在test.html下引入此文件<script type="text/javascript" src="./hello.js"></script>

运行test.html就会弹出"hello world"提示框
它不是一个窗体，可以拖动,在我的mac下显示的非常漂亮

这里我们就可以使用extjs进行开发了

3、Extjs的高效必须数量掌握的Utilities开发工具

现看看大体轮廓

Ext.Array，看看两个常用的方法

(function(){ // every遍历方法    Ext.onReady(function(){       var myArray = [1, 2, 3, 4, 5, 6, 7, 8, -1]       Ext.Array.every(myArray, function(item){            Ext.MessageBox.alert(item);           return true;       }, this);    });})();

(function(){ // 过滤    Ext.onReady(function){       var myArray = [1, 2, 3, 4, -1, -2];       var newArray = Ext.Array.filter(myArray, function(item){          if (item>0)             return ture;          else             return false;       }, this);       alert(newArray.join("\n")); // 将会打印 1 2 3 4    });})();

其它的看文档

Ext.Number

Ext.Object

Ext.String

Ext.JSON

Ext.Date

Ext.Function

再看一个例子，通过这个例子我们看看extjs扩展js的原理是什么

(function(){   Ext.onReady(function(){      Object.prototype.get = function(key,val) { //这就是扩展         if (this[key]) {            return this[key];         } else {            return val;         }      }      var person = {         name:'tianhu',         age: 26      }      alert(person.get("name"));   });})();

我们直到是怎么扩展就行了，Ext不建议我们自己扩展，Ext提供的工具已经包含了大部分，没有必要进行重复

多看API http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/api

0 0