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.getElementById('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