extjs4 一些小知识
程序员文章站
2022-06-09 19:49:50
...
1、获取页面上的HTML元素,并进行处理,使用Ext.get('elid')方法,参数为HTML元素的id值,由此可对获取到的元素进行各种处理。例如:
2、获取页面上的HTML元素,还可用select方法,可以获取一系列元素,也可为之设定相同的事件,或者进行相同的设置,例如:
3、获取页面上的HTML元素,还可以用query方法,与前面的区别在于参数不同,例如:
4、获取Ext的组件,用getCmp方法,然后根据其特定类型可以进行相应的处理,例如:
5、获取元素的DOM,使用getDom方法
6、判断对象是否为空,用isEmpty方法,例如:
7、Ext.each方法的使用示例:
8、Ext.apply方法的使用示例:
9、Ext.encode方法,将对象转换为字符串
var el = Ext.get("the-id"); var appendEl = Ext.get("the-id-append"); function fn1(){ Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键"); } el.addCls("special-css");//为元素添加样式表 appendEl.addCls("special-css"); appendEl.setWidth(240); appendEl.setWidth(240, true); el.focus();//将焦点移到el元素上 el.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类 el.addClsOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类 el.addClsOnClick("click-css");//为点击事件添加和移除css类 el.setWidth(240);//将元素的宽度设为100相素 el.setWidth(240, 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的功能相同,只是参数的传递方式不同
2、获取页面上的HTML元素,还可用select方法,可以获取一系列元素,也可为之设定相同的事件,或者进行相同的设置,例如:
var el = Ext.select(["div1","div2"],true); el.on("click",function tes(e){ Ext.Msg.alert("提示","您点击了id为" + Ext.get(e.target).dom.id + "的节点"); });
3、获取页面上的HTML元素,还可以用query方法,与前面的区别在于参数不同,例如:
//选择元素为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){ var msg = ''; msg = "取得了"+el.length+"个div的id为'div1'的节点<br>"+"取得了"+targetD.length+"个类型为div<br>具备属性property1且其值为'pro1'的节点"; msg += "<br>内容为:"; for(var i = 0; i<el.length; i++) { msg += el[i].id + ":" + el[i].innerHTML; } msg += "<br>内容为:"; for(var i = 0; i<targetD.length; i++) { msg += targetD[i].id + ":" + targetD[i].innerHTML; } Ext.Msg.alert('提示',msg); }
4、获取Ext的组件,用getCmp方法,然后根据其特定类型可以进行相应的处理,例如:
//获得id为'panel1'的组件 var comp = Ext.getCmp('panel1'); Ext.Msg.alert('提示',"取得的id为'panel1'的组件的类型为"+comp.getXType()); comp.setTitle("aaaaaa");
5、获取元素的DOM,使用getDom方法
//获得id为'panel1'的组件的Dom,其执行结果和panel.el.dom相同 var comp = Ext.getDom('panel1'); Ext.Msg.alert('提示',"通过Ext.getDom取得的dom的id:"+comp.id+ "<br>通过另一种方式取得panel的dom其id:"+panel.el.dom.id);
6、判断对象是否为空,用isEmpty方法,例如:
//判断对象是否为空 //当判断字符串时如果第二个参数不不同时结果也会不同 //第二个参数表示'是否允许字符串为空' Ext.Msg.alert('提示',"我们已经实例化的panel是否为空?"+Ext.isEmpty(panel)+"<br>Ext.isEmpty('',true)的值:"+Ext.isEmpty("",true)+"<br>Ext.isEmpty('',false)的值"+Ext.isEmpty("",false));
7、Ext.each方法的使用示例:
//定义一个集合 var array = [],i; //为集合加入元素,这些元素为从0到9的数字 for(i=0;i<10;i++){ array.push(i); } function fn(item,index,allItems){ //如果跌代对象的元素值大于5则终止跌代执行 if(item>5){ return false; }else{ //为集合元素中值小于5的元素进行字符串的追加 allItems[index] = item+"_st" } } function fn1(item,index,allItems){ if(index>0) return false; //只执行一次 Ext.Msg.alert('最后的处理结果', "<div style='width:160px'>最后集合为:"+allItems+"</div>"); } //对集合进行字符串的追加 Ext.each(array,fn); //打印集合的所有元素值 Ext.each(array,fn1);
8、Ext.apply方法的使用示例:
//定义两个对象,一个目标对象一个源对象 var tarObj = {},srcObj srcObj = {}; srcObj.name = "源对象"; srcObj.text = "我的文本内容已经从srcObj中拷贝过来了"; srcObj.width = "130px"; //调用Ext.apply进行处理,从srcObj中拷贝属性到tarObj中 Ext.apply(tarObj,srcObj); Ext.Msg.alert('Ext.apply示例',"tarObj的属性如下:<br>name:"+ tarObj.name+"<br>text:"+tarObj.text+ "<br>width:"+tarObj.width);
9、Ext.encode方法,将对象转换为字符串
var person = {name : 'Tom', age: 24};//定义一个json对象 Ext.Msg.alert("提示",Ext.encode(person));//打印将对象转变成字符串