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