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);