ExtJs笔记
1.Ext简介

.Extjs是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJs可以用来开发RIA（Rich Internet Application,富互联网应用系统）的Ajax应用框架。

ExtJs是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJs用在.Net,Java.Php等各种开发语言开发的应用中



2.Ext库文件说明                                                               

.要使用extjs，那么首先要得到extjs库文件，该框架是开源的，可以直接从官方网站下载。

解压后看到文件有：

adapter: 负责将里面提供的第三方底层库（包括ext自带的底层库）映射为Ext所支持的底层库。

build ：压缩后的ext全部源码（里面分类存放）

docs ： API帮助文档

examples ：提供使用ExtJS技术做出的小实验

resources ：ExtUI资源文件目录，如CSS、图片文件都存放在这里。

source :  没有经过压缩的Ext全部的源码（里面分类存放），遵从Lesser GNU开源的协议。

Ext-all.js ： 压缩后的Ext全部源码

ext-all-debug.js ：未经压缩的Ext全部的源码（用于调试）

ext-core.js ：压缩后的Ext的核心组件，包括sources/core下的所有类。

ext-core-debug.js： 未经压缩的Ext核心组件，包括sources/core下的所有类。



3.应用ExtJs

应用extjs需要在页面中引入extjs的样式及extjs库文件。样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个：adapter/ext/ext-base.js及ext-all.js。其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。Adapter表示适配器，也就是说可以有多种适配器，因此可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。

一个要使用extjs框架的页面中一般要包括下面几句：

<link rel=”stylesheet”  type=”text/css” href=”extjs/resources/css/ext-all.css”/>

<script  type=”text/javascript” src=”extjs/adapter/ext/ext-base.js”></script>

<script  type=”text/javascript” src=”extjs/ext-all.js”></script>

在ExtJs库文件及页面内容加载完后，ExtJs会执行Ext.onReady中指定的函数。一般情况下用户的ExtJs应用都是从Ext.onReady开始的，使用ExtJs应用程序的代码大致如下：

<script>

Function fn()

{

  Alert(‘ExtJs 库以加载’);

}

Ext.onReady(fn);

</script>

Fn也可以写成一个匿名函数的形式，因此上面的代码也可以改成下面的形式。

<script>

Ext.onReady(function()

{

   Alert(‘ExtJs库已加载’);

})；

</script>

4.Ext类库组成

ExtJs由一系列的类库组成，一旦页面成功加载了ExtJs库后，我们就可以在页面中通过javascript调用ExtJs的类及控件来实现需要的功能。ExtJs的类库由以下几部分组成（在source文件夹下）

底层API（core）：底层API中提供了对DOM操作.事件处理.DOM查询器等基础的功能.

控件（widgets）：是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口等。

使用工具Utils：Ext提供了很多的使用工具，可以方便我们实现如数据内容格式化、json数据编码或解码、发送Ajax请求、cookie管理、css管理等扩展功能等。



<script>

var panel=new Ext.Panel({

title:’hello’,

width:300,

height:200,

html:’<h1>Hello,easyjf open source</h1>’

});

panel.render(“hello”);

</script>

对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接在父组件的构造函数中，通过items传递数组方式来构造组件对象。

var panel=new Ext.TabPanel({

renderTo:’hello’,

width:300,

height:200,

items:[{

title:’面板’,

height:300

},{

title:’面板2’,

height:30

}]

});

或者

var panel=new Ext.TabPanel({

renderTo:’hello’,

width:300,

height:200,

items:[

new Ext.Panel({title:”面板1”,height:30}),

new Ext.Panel({title:”面板2”,height:30})

]

});

前者不但省略掉了new Ext.Panel这个构造函数，最重要前者只有在初始化TabPanel的时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。也就是说前者是通过延长加载的方式创建组件。



5.ExtJs中的事件

1.  <script>

     function a()

{

     alert(‘some thing’);

}