EXTJS 元素,对象选择器示例

Ext.get 选择器（返回HTML或DOM的节点元素） 

 元素的样式操做：

Ext.onReady(function(){ var el = Ext.get("the-id"); function fn1(){ Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键"); } el.addClass("special-css");//为元素添加样式表 el.focus();//将焦点移到el元素上 el.addClassOnFocus("focus-css");//为获得和失去焦点添加和移除css类 el.addClassOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类 el.addClassOnClick("click-css");//为点击事件添加和移除css类 el.setWidth(280);//将元素的宽度设为100相素 el.setWidth(280, true);//将元素的宽度设为100并带有动画效果 el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});//绑定el元素当键盘按下ctrl+c键时将呼叫fn函数 el.addKeyListener({key:"g",ctrl:true},fn1,el);//和上面的addKeyMap的功能相同，只是参数的传递方式不一样 }); 

Ext.select 选择器 （返回应该了该样式表的对象）  

另外一种根据Id操做元素的方法 

var el = Ext.select(["div1"],true); el.on("click",function tes(){ Ext.Msg.alert("提示","您点击了id为'div1'的节点"); }); 

Ext.query 选择器 （返回知足条件的节点数组） 

Ext.onReady(function(){ var panel = new Ext.Panel({ title:"示例", renderTo:'sub1', width:'300px', html:"<div id='div1' property1='pro1' style='height:200px'><div id='01'property1='pro1' >个人id是sub3</div><div id='02'></div></div>" }); //选择元素为div其id为div1的节点的数组 var el = Ext.query("#div1"); //选择元素为div的且这些div具有属性为property1其值为pro1的节点的数组 var targetD = Ext.query('div[property1=pro1]'); if(el.length>0 || targetD.length>0){ Ext.Msg.alert('提示',"取得了"+el.length+"个div的id为'div1'的节点<br>"+ "取得了"+targetD.length+"个类型为div<br>具有属性property1且其值为'pro1'的节点"); } }); 

 

Ext.getCmp 选择器（返回Ext组件Component对象）

//得到id为'panel1'的组件 var comp = Ext.getCmp('panel1'); Ext.Msg.alert('提示',"取得的id为'panel1'的组件的类型为"+comp.getXType()); 

Ext.getDom 选择器（返回HTML节点元素.可用）

var comp = Ext.getDom('panel1'); Ext.Msg.alert('提示',"经过Ext.getDom取得的dom的id:"+comp.id + "<br>经过另外一种方式取得panel的dom其id:"+panel.el.dom.id);