EXTJS 元素,对象选择器

kaiya0 2012-06-13

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

元素的样式操作:  

<mce:script language="javascript">

<!--  

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的功能相同,只是参数的传递方式不同  

});  

// -->

</mce:script>  

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

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

        var el = Ext.select(["div1"],true);  

        el.on("click",function tes(){  

            Ext.Msg.alert("提示","您点击了id为'div1'的节点");  

        });  

Ext.query 选择器 (返回满足条件的节点数组)  

<mce:script language="javascript"><!--  

    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'的节点");  

        }  

    });  

// -->

</mce:script>  

</head>  

<body>  

    <div id="sub1"></div>  

</body>  

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

转自 :http://blog.csdn.net/homsky/article/details/5451055

相关推荐

zmjzhangmj / 0评论 2020-01-07