ExtJS使用说明

ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。
一．下载地址
http://extjs.com/download
Ext文档中心：
http://www.ajaxjs.com/docs/docs/
http://www.jackytsu.com/extcn/docs/

二． extjs的样式及库文件使用说明

样式文件：resources/css/ext-all.css，
extjs 的js库文件：主要是adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext -all.js是extjs的核心库。
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>

三．下载包说明

   adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。
   build：压缩后的ext全部源码(里面分类存放)。
   docs： API帮助文档。
   exmaples：提供使用ExtJs技术做出的小实例。
   resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。
   source：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。
   Ext-all.js：压缩后的Ext全部源码。
   ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。
   ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。
   ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。

四．ExtJs使用

1. Ext.onReady 页面加载完首先进行的操作
Ext.onReady(function(){
      alert("Congratulations! You have Ext configured correctly!");
});
Ext.onReady可能是你接触的第一个也可能是在每个页面都要使用的方法。这个方法会在DOM加载全部完毕后，保证页面内的所有元素能被Script引用（reference）之后调用。
2. Element
Ext.onReady(function(){
      var myDiv = Ext.get('myDiv');
myDiv.highlight();      //黄色高亮显示然后渐退
myDiv.addClass('red'); // 添加自定义CSS类 (在xx.css定义)
myDiv.center();         //在视图中将元素居中
myDiv.setOpacity(.25); // 使元素半透明
});
类似 js：var myDiv = document.getElementByIdx('myDiv');
ID获取一个Ext Element如下（首页ExtStart.htm包含一个div，ID名字为“myDiv”）： The corresponding code to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js):
3. 获取多个DOM的节点
Element对象本身便有Element.selcect的方法来实现查询，即内部调用DomQuery选取元素
// 每段高亮显示,对没有id 的标签调用
Ext.select('p').highlight();
4．响应事件
Ext.onReady(function(){
      var paragraphClicked = function(){
                     alert("You clicked a paragraph");
      }
      Ext.select('p').on('click', paragraphClicked);
});
5．MessageBox
单击段落，在消息窗口中显示段落内容出来
var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
      title: 'Paragraph Clicked',
      msg: paragraph.dom.innerHTML,
      width:400,
      buttons: Ext.MessageBox.OK,
      animEl: paragraph
});
6．作用域
var o1 = {testvar:'1', fun:function(){alert('o1: '+this.testvar+'<<');}};
var o2 = {testvar:'2', fun:function(){alert('o2: '+this.testvar);}};
//结果是什么？你声明了o1 和 o2两个对象，分别都有一些属性和方法，但值不同。
o1.fun();//'1'
o2.fun();//'2'
o1.fun.call(o2);//'2'，当执行o1的fun方法时你强行将变量this指向到o2这个对象，换句话说， o1.fun的方法在对象o2的作用域下运行
alert(o1.testvar); // 从外部访问o1的属性testvar