extjs学习

Ext.onReady(function(){
        var paragraphClicked=function(e){
               Ext.get(e.target).highlight();
        }
         Ext.select('p').on('click',paragraphClicked);
    }
);

      下一个项目中要使用Extjs了，在学习过程中记录一些知识。

 

ExtJs简介

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

 

Ext的第一个方法：Ext.onReady。

     这个方法是指当前DOM加裁完成后，保证页面内的所有元素能被Script引用。

     Ext.onReady(function(){

         alert("Congratulations! You have Ext configured correctly!");

     });

 

Ext.element对象 

      无论是访问元素（elements）还是完成一些其他动作，都要涉及到它。Element的API是整个Ext库的基础。

• Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom的话，就可以直接访问底层DOM的节点）；
• Element.get()方法提供内置缓存（Cache），多次访问同一对象效率上有极大合优势；
• 内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（添加/移除CSS类，添加/移除事件处理程序，定位，改变大小，动画，拖放）。 

和prototype.js中的$()（通过ID获取DOM节点）一样，Ext中也一个方法Ext.get()，来由获取一个Ext Element对象。

     

var content=Ext.get('content');

 用上面一句可以获取网页上id为content的Element。

content.highlight();         //黄色高亮显示然后渐退
content.addClass('red'); //添加定义的CSS类
content.center();            //在视图中将元素居中
content.setOpacity(.25);//使元素半透明

 

获取多个DOM的节点

     Element.select方法实现查询。例：xx.html包含若干段落（<p>标签），没有一个是有ID的，而你想轻松地通过一次操作马上获取每一个段：

//每段高亮显示
Ext.select('p').highlight();

 

响应事件

     Ext.get('myButton').on('click',function(){

           alert("你单击了按钮");

     });

      Eelement.select也能做同样的事情。

     

Ext.onReady(function(){
        var paragraphClicked=function(){
                alert("你单击了一段落；");
        }
         Ext.select('p').on('click',paragraphClicked);
});

 但当事件触发时，我们如何得知这个event handler执行时是作用在哪一个特定的元素上呢？要明确这一点非常简单，Element.on方法传入到event handler的fuction中。

      下面的语句得到这个事件响应所在的DOM节点：

 

Ext.onReady(function() {
       var paragraphClicked = function(e) {
               Ext.get(e.target).highlight();
       }
       Ext.select('p').on('click', paragraphClicked);
});

 注意得到的e.target是DOM节点，所以我们首先将其转换成为EXT的Element元素，然后执行欲完成的事件。