Extjs4.0中Core包中的Element的用法举例

 

Extjs4.0中Core包中的Element的用法举例

第一：得到jsp页面中的dom对象的两种方法

1．  用Ext.core.Element下的fly方法来得到dom对象

var div01 = Ext.core.Element.fly("div01");//得到的是一个Element对象,可调用Element下的所有方法

//效果为：鼠标滑过的时候增加一个样式，移除的时候消除样式

div01.addClsOnOver("divColor");

注：divColor代表的是css样式

2．            用Ext.get来得到dom对象，get到的也是一个Element对象

var input01 = Ext.get("input01");

用方法来演示

（1）通过向输入框中输入的值判断

//addKeyMap是当想输入框中输出某个字节的时候可以调用函数，利用ajax的异步请求的方式来提示后面的效果

       input01.addKeyMap({

           key:Ext.EventObject.B,

           ctrl:false,

           fn:function(){

              alert("您输入的是B")

           },

           scope : input01

    });

（2）当文本框获得焦点的时候，按下键盘的某个键触发的事件

//addKeyListener可以在表单输入的时候提示按哪个快捷input01.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){

           alert("您按下的是ctrl+x");

    },input01);

 

（3）追加一个孩子节点

//appendChild是追加一个孩子节点 ,appendChild里写的是element的对象，通过dom声明element对象,用一个js函数来表示

 

Ext.get("div02").appendChild(createChild());

       function createChild(){

           var el = document.createElement("h1");

           el.appendChild(document.createTextNode("我是被追加的 I am appendChild"));

           return el;

       }

（4）创建一个孩子节点

//创建一个节点

       Ext.getBody().createChild({

           tag:'select',

           id:'city',

           //创建节点的子节点

           children :{

              tag:'option',

              id:01,

              html:'julixian'

           }

    });

 

注：fly和get的作用是一样的，但是作用的原理不同，fly是直接从页面中取出dom，而get是从fly取出的节点再操作，如果fly不能取出节点，就由Ext.ComponentManager来获取，底层是它