ExtJS4学习笔记六--一些小知识点

1、获取页面上的HTML元素,并进行处理,使用Ext.get('elid')方法,参数为HTML元素的id值,由此可对获取到的元素进行各种处理。例如: 
Javascript代码   收藏代码
  1. var el = Ext.get("the-id");  
  2.     var appendEl = Ext.get("the-id-append");  
  3.     function fn1(){  
  4.         Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键");  
  5.     }  
  6.     el.addCls("special-css");//为元素添加样式表  
  7.     appendEl.addCls("special-css");  
  8.     appendEl.setWidth(240);  
  9.     appendEl.setWidth(240, true);  
  10.     el.focus();//将焦点移到el元素上  
  11.     el.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类  
  12.     el.addClsOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类  
  13.     el.addClsOnClick("click-css");//为点击事件添加和移除css类  
  14.     el.setWidth(240);//将元素的宽度设为100相素  
  15.     el.setWidth(240, true);//将元素的宽度设为100并带有动画效果  
  16.     el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});//绑定el元素当键盘按下ctrl+c键时将呼叫fn函数  
  17.     el.addKeyListener({key:"g",ctrl:true},fn1,el);//和上面的addKeyMap的功能相同,只是参数的传递方式不同   


2、获取页面上的HTML元素,还可用select方法,可以获取一系列元素,也可为之设定相同的事件,或者进行相同的设置,例如: 
Javascript代码   收藏代码
  1. var el = Ext.select(["div1","div2"],true);  
  2.         el.on("click",function tes(e){  
  3.             Ext.Msg.alert("提示","您点击了id为" + Ext.get(e.target).dom.id + "的节点");  
  4.         });  


3、获取页面上的HTML元素,还可以用query方法,与前面的区别在于参数不同,例如: 
Javascript代码   收藏代码
  1. //选择元素为div其id为div1的节点的数组  
  2.         var el = Ext.query("#div1");  
  3.         //选择元素为div的且这些div具备属性为property1其值为pro1的节点的数组  
  4.         var targetD = Ext.query('div[property1=pro1]');  
  5.         if(el.length>0 || targetD.length>0){  
  6.             var msg = '';  
  7.             msg = "取得了"+el.length+"个div的id为'div1'的节点<br>"+"取得了"+targetD.length+"个类型为div<br>具备属性property1且其值为'pro1'的节点";  
  8.             msg += "<br>内容为:";  
  9.             for(var i = 0; i<el.length; i++)  
  10.             {  
  11.                 msg += el[i].id + ":" + el[i].innerHTML;  
  12.             }  
  13.             msg += "<br>内容为:";  
  14.             for(var i = 0; i<targetD.length; i++)  
  15.             {  
  16.                msg += targetD[i].id + ":" + targetD[i].innerHTML;  
  17.             }  
  18.             Ext.Msg.alert('提示',msg);  
  19.         }  


4、获取Ext的组件,用getCmp方法,然后根据其特定类型可以进行相应的处理,例如: 
Javascript代码   收藏代码
  1. //获得id为'panel1'的组件  
  2.         var comp = Ext.getCmp('panel1');  
  3.         Ext.Msg.alert('提示',"取得的id为'panel1'的组件的类型为"+comp.getXType());  
  4.         comp.setTitle("aaaaaa");  


5、获取元素的DOM,使用getDom方法 
Javascript代码   收藏代码
  1. //获得id为'panel1'的组件的Dom,其执行结果和panel.el.dom相同  
  2.         var comp = Ext.getDom('panel1');  
  3.         Ext.Msg.alert('提示',"通过Ext.getDom取得的dom的id:"+comp.id+  
  4.             "<br>通过另一种方式取得panel的dom其id:"+panel.el.dom.id);  


6、判断对象是否为空,用isEmpty方法,例如: 
Javascript代码   收藏代码
  1. //判断对象是否为空  
  2. //当判断字符串时如果第二个参数不不同时结果也会不同  
  3. //第二个参数表示'是否允许字符串为空'  
  4. Ext.Msg.alert('提示',"我们已经实例化的panel是否为空?"+Ext.isEmpty(panel)+"<br>Ext.isEmpty('',true)的值:"+Ext.isEmpty("",true)+"<br>Ext.isEmpty('',false)的值"+Ext.isEmpty("",false));  


7、Ext.each方法的使用示例: 
Javascript代码   收藏代码
  1. //定义一个集合  
  2.         var array = [],i;  
  3.         //为集合加入元素,这些元素为从0到9的数字  
  4.         for(i=0;i<10;i++){  
  5.             array.push(i);  
  6.         }  
  7.         function fn(item,index,allItems){  
  8.             //如果跌代对象的元素值大于5则终止跌代执行  
  9.             if(item>5){  
  10.                 return false;  
  11.             }else{  
  12.                 //为集合元素中值小于5的元素进行字符串的追加  
  13.                 allItems[index] = item+"_st"  
  14.             }  
  15.         }  
  16.   
  17.         function fn1(item,index,allItems){  
  18.             if(index>0)  
  19.                 return false;  
  20.             //只执行一次  
  21.             Ext.Msg.alert('最后的处理结果',  
  22.                 "<div style='width:160px'>最后集合为:"+allItems+"</div>");  
  23.         }  
  24.         //对集合进行字符串的追加  
  25.         Ext.each(array,fn);  
  26.         //打印集合的所有元素值  
  27.         Ext.each(array,fn1);  


8、Ext.apply方法的使用示例: 
Javascript代码   收藏代码
  1. //定义两个对象,一个目标对象一个源对象  
  2. var tarObj = {},srcObj  
  3. srcObj = {};  
  4. srcObj.name = "源对象";  
  5. srcObj.text = "我的文本内容已经从srcObj中拷贝过来了";  
  6. srcObj.width = "130px";  
  7. //调用Ext.apply进行处理,从srcObj中拷贝属性到tarObj中  
  8. Ext.apply(tarObj,srcObj);  
  9. Ext.Msg.alert('Ext.apply示例',"tarObj的属性如下:<br>name:"+  
  10.         tarObj.name+"<br>text:"+tarObj.text+  
  11.         "<br>width:"+tarObj.width);  


9、Ext.encode方法,将对象转换为字符串 
Javascript代码   收藏代码
  1. var person = {name : 'Tom', age: 24};//定义一个json对象  
  2. Ext.Msg.alert("提示",Ext.encode(person));//打印将对象转变成字符串  


10、Ext.htmlDecode方法示例: 
Javascript代码   收藏代码
  1. Ext.Msg.alert("提示",Ext.htmlDecode("<table width='240' border='1' id='tab1' cellspacing='2' cellpadding='4'&gt;<tr><td>简单的html表格<input type='button' value='按钮'>&lt;/td></tr></table>"));  


11、Ext.typeOf方法示例: 
Javascript代码   收藏代码
  1. var panel = new Ext.Panel({//实例化了一个对象  
  2.     className:"test",  
  3.     title:"示例",  
  4.     renderTo:'sub1',  
  5.     width:'300px',  
  6.     html:"<div id='div1' style='height:200px'></div>"  
  7. });  
  8. var el = Ext.select(["div1"],true);  
  9. var array1 = new Array();//实例化了一个数组  
  10. el.on("click",function tes(){  
  11.     Ext.Msg.alert("提示",'panel的类型是:'+Ext.typeOf(panel)+',array1的类型是:'+Ext.typeOf(array1));  
  12. });  


12、Ext.core.DomHelper示例: 
Javascript代码   收藏代码
  1. Ext.core.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);  
  2.   
  3. //给id为div1的元素指定一个样式表  
  4. //其样式表的形式可以是直接用文本,如:font-size:18px  
  5. //也可以用文本表示的对象,如:{font-size:18px;}  
  6. Ext.core.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;");  
  7. var str = Ext.get("div1").dom.outerHTML;  
  8. //由于Ext.Msg.alert会展示alert里的html  
  9. //所以我们特意用文本框来展示应用了样式表后的div效果字符串  
  10. Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');  
  11.   
  12. //首先通过DomHelper.createTemplate创建一套模板  
  13. var test = Ext.core.DomHelper.createTemplate('<div name="{id}">'+  
  14.     '<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+  
  15.     '</div>');  
  16. //通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现  
  17. test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);  
  18.   
  19. //给指定的div1在其后插入一个新的div,类似的有insertBefore方法,insertFirst方法  
  20. Ext.core.DomHelper.insertAfter(Ext.get("div1"),{id: 'item2', html: "<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"});  
  21. //给指定的div1在之前插入一个新的html  
  22. Ext.core.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");  
  23. //给指定的div1替换新的html  
  24. Ext.core.DomHelper.overwrite(document.getElementById("div1"),"我是新替换的Html文本");  


13、DomQuery用法示例: 
Javascript代码   收藏代码
  1. //获到所有的以id为div0为父节点的div  
  2.         //(在第二节中讲述过Ext.query的使用规则,忘记了的读者可以温习一下)  
  3.         var tarArry = Ext.query('#div0 div');  
  4.         //选择那些不包含id为div1的节点  
  5.         var except = Ext.core.DomQuery.filter(tarArry,"#div1",true);  
  6.         //选择那些包含id为div1的节点  
  7.         var include = Ext.core.DomQuery.filter(tarArry,"#div1",false);  
  8.         //对对数组中是否包含指定id的节点进行判断  
  9.         var isInclude = Ext.core.DomQuery.is(except,'#div0');  
  10.         //选择以id为divo的所有div子点中的第一个节点  
  11.         var selectNode = Ext.core.DomQuery.selectNode("#div0 div");  
  12.         function retStr(array){  
  13.             var str ="";  
  14.             for(var i=0;i<array.length;i++){  
  15.                 if(i<array.length-1)  
  16.                     str+=(array[i].id+";");  
  17.                 else  
  18.                     str+=array[i].id;  
  19.             }  
  20.             return str;  
  21.         }  
  22.         Ext.Msg.alert('返回结果',"不包含id为'div1'的所有div的id为:"+retStr(except)+  
  23.                 "<br>包含id为div1的所有div的id为:"+retStr(include)+  
  24.                 "<br>通过Ext.core.DomHelper.is(except,'#div0')的返回结果"+isInclude+  
  25.                 ",<br>表示"+retStr(except)+"是否包含id为div0的节点:"+  
  26.                 "<br>在id为div0的第一个子节点的id是:"+selectNode.id);  


14、Ext.util.CSS示例: 
Javascript代码   收藏代码
  1. //通过传递一个样式表描述文本创建一个指定的样式表和id为the绑定在一起  
  2. Ext.util.CSS.createStyleSheet(".myclass{color:blue}","the");  
  3. var cssObj = Ext.util.CSS.getRule(".myclass",true);  
  4. Ext.Msg.alert('获取的信息','创建样式表<br>获取myclass样式表中规则的字体颜色:'+cssObj.style.color);  
  5.   
  6. Ext.util.CSS.createStyleSheet(".a1{font-size:12px;color:blue;}","thecss");  
  7. var pan = new Ext.panel.Panel({  
  8.     title:'添加css并移除',  
  9.     html:'首先我们添加一个样式,然后移除他'  
  10. ,  
  11.             height:200,  
  12.             width:300,  
  13.             cls: 'a1'  
  14. });  
  15. pan.render("hr_panel");  
  16.   
  17. setBtn = new Ext.button.Button(  
  18.     text : '移除样式',  
  19.     width : 50,  
  20.     handler : function(){  
  21.         Ext.util.CSS.removeStyleSheet("thecss");  
  22.     }  
  23. });  
  24. setBtn.render("setBut");  
  25.   
  26. //定义使用改变个性化定制的控件  
  27. //该控制实际上为一个可供选择样式表值的下拉框  
  28. //当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径  
  29. Ext.onReady(function(){  
  30.     var themes = [  
  31.             {theme:'默认', css:'ext-all.css'},  
  32.             {theme:'黑色',css: 'ext-all-access.css'},  
  33.             {theme:'红色',css: 'ext-all-red.css'}];  
  34.         //创建主题数据模型  
  35.         Ext.regModel('Theme', {  
  36.             fields: ['theme','css']  
  37.         });  
  38.         //创建主题数据源  
  39.         var themeStore = Ext.create('Ext.data.Store',{  
  40.             model : 'Theme',  
  41.             data : themes  
  42.         });  
  43.         //创建主题切换选择框  
  44.         var themeChange = Ext.create('Ext.form.ComboBox',{  
  45.             id : 'themeChange',  
  46.             width : 150,  
  47.             labelWidth : 60,  
  48.             labelSeparator :':',//分隔符  
  49.             fieldLabel:'样式选择',  
  50.             store : themeStore,  
  51.             editable : false,  
  52.             triggerAction: 'all',//单击触发按钮显示全部数据  
  53.             store : themeStore,//设置数据源  
  54.             displayField : 'theme',  
  55.             valueField : 'css',  
  56.             queryMode: 'local',//本地模式  
  57.             value:'ext-all.css',//默认风格  
  58.             listeners : {  
  59.                 'collapse' : function() {  
  60.                     Ext.util.CSS.swapStyleSheet('theme''extjs4/resources/css/'this.getValue());  
  61.                     contentIframe.window.themeChange(this.getValue());  
  62.                 }  
  63.             }  
  64.         });  
  65.         //定义panel  
  66.         Ext.create('Ext.form.FormPanel',{  
  67.             title:'Ext.form.ComboBox本地数据源示例',  
  68.             renderTo: Ext.getBody(),  
  69.             bodyPadding: 5,  
  70.             frame : true,  
  71.             height:100,  
  72.             width:270,  
  73.             defaults:{//统一设置表单字段默认属性  
  74.                 labelSeparator :':',//分隔符  
  75.                 labelWidth : 70,//标签宽度  
  76.                 width : 200,//字段宽度  
  77.                 labelAlign : 'left'//标签对齐方式  
  78.             },  
  79.             items:themeChange  
  80.         });  
  81. });  


15、格式化字符串示例: 
Javascript代码   收藏代码
  1. var str = "&lt;table width='300' cellspacing=1 border=1 cellpadding=1><tr><td>table string</td></tr></table>";  
  2. var str1 = " aV";  
  3. var dat = new Date();  
  4. var str2 = 12345;  
  5. var str3 = 1.2345;  
  6. Ext.Msg.alert(  
  7.     "提示",  
  8.     "原str为:"+str+"<br>ellipsis(str,5)后为:<br>"+Ext.util.Format.ellipsis(str,5)+"<br><br>"+  
  9.     "原strl为:"+str1+"<br>进行capitalize(str1)后为:<br>"+Ext.util.Format.capitalize(str1)+"<br>"+  
  10.     "<br>原dat为:<br>"+dat+"<br>"+  
  11.     "进行date(dat,'yyyy/mm/dd')后为:<br>"+Ext.util.Format.date(dat)+"<br><br>"+  
  12.     "注意调用htmlDecode(str)后展现出来的是一个带边框的表格:<br>"+Ext.util.Format.htmlDecode(str)+"<br>"+  
  13.     "原strl:"+str1+"<br>经过lowercase后为:<br>"+Ext.util.Format.lowercase (str1)+  
  14.     "<br>原str2:"+str2+",经过number后为:"+Ext.util.Format.number(str2,"-1234.0")+  
  15.     "<br>原str3:"+str2+",经过number后为:"+Ext.util.Format.round(str3,2)  
  16. );        
  17.   
  18. //通过用字符串描述一个对象  
  19. var jsonStr = "{name:'the json name', value: 'the json sample'}";  
  20. //将该字符串进行编码,这时将形成一个含有逻辑关系的对象  
  21. var obj = Ext.JSON.decode(jsonStr,true);  
  22. //定义一些对象,最后用数组包装起来  
  23. var g='g',h='h',e =[g,h],f='f',b=[e,f],a = [b,'c'];  
  24. //将该数组中存放的对象进行解码,打印该字符串  
  25. var endA = Ext.JSON.encode(a);  
  26. Ext.Msg.alert('提示',endA);  


16、MixedCollection示例(还有first,get等方法): 
Javascript代码   收藏代码
  1. var item = new Ext.util.MixedCollection();  
  2. var item2 = new Ext.util.MixedCollection();  
  3. var a = {name:'a'};  
  4. var b = {name:'b'};  
  5. item.add('01',a);  
  6. item.add('01',b);  
  7. item2.add('01',a);  
  8. item2.add('02',a);  
  9. Ext.Msg.alert('提示','当已存在关联的索引时往01关联以象,item的个数为:'+item.length+'<br>'+'当不存在关联的索引往索引关联对象,item的个数为:'+item2.length);  
Javascript代码   收藏代码
  1. var item = new Ext.util.MixedCollection();  
  2.         var arr = [];  
  3.         arr.push({name:'a'});  
  4.         arr.push({name:'b'});  
  5.         item.addAll(arr);  
  6.         Ext.Msg.alert('提示','原item中的对象个数为:'+item.length+'<br>当加入arr数组中的两个对象后item中的对象个数为:'+item.length);  
Javascript代码   收藏代码
  1. var item = new Ext.util.MixedCollection();  
  2. var arr = [{name:'a'},{name:'b'}];  
  3. item.clear();  
  4. Ext.Msg.alert('提示','当调用clear()后item的对象个数为:'+item.length);  
Javascript代码   收藏代码
  1. var item = new Ext.util.MixedCollection();  
  2. item.addAll([{name:'a'},{name:'b'}]);  
  3. var col = new Ext.util.MixedCollection();  
  4. col = item.clone();  
  5. item.clear();  
  6. Ext.Msg.alert('提示','当调用item的clone()后返回的col的对象个数为:'+col.length);  
Javascript代码   收藏代码
  1. var item = new Ext.util.MixedCollection();  
  2. var obja = {name:'a'};  
  3. item.add('obj1',obja);  
  4. Ext.Msg.alert('提示','集合中是否含有以obj1为关联索引的对象:'+item.containsKey('obj1')+'<br>集合中是否含有对象obja:'+item.contains(obja));  
Javascript代码   收藏代码
  1. var item = new Ext.util.MixedCollection();  
  2. var obja = {name:'a'};  
  3. item.add('obj1',obja);  
  4. item.add('obj2',{name:'b'});  
  5. item.each(function(tempObj){  
  6.     tempObj.name='newA';  
  7.     Ext.Msg.alert('提示','通过调用each后的名称为:'+tempObj.name);  
  8. });  
Javascript代码   收藏代码
  1. var item = new Ext.util.MixedCollection();  
  2. item.on('add',function(index,o,key){  
  3.     Ext.Msg.alert('提示','&nbsp;&nbsp;&nbsp;&nbsp;当前有对象加入,加入后的index是:'+index+'<br>&nbsp;&nbsp;&nbsp;&nbsp;该对象的name是:'+o.name+'<br>&nbsp;&nbsp;&nbsp;&nbsp;加入对应的key是:'+key);  
  4. });  
  5. item.add('obj2key',{name:'nobj2name'});  
Javascript代码   收藏代码
  1. var item = new Ext.util.MixedCollection();  
  2. item.on('remove',function(o,key){  
  3.     Ext.Msg.alert('提示','当前移除的对象的name是:'+o.name+'<br>其key是:'+key);  
  4. });  
  5. item.add('obj2key',{name:'nobj2name'});  
  6. item.removeAtKey('obj2key');  
Javascript代码   收藏代码
  1. var item = new Ext.util.MixedCollection();  
  2. var obj1 = {name:'obj1Name'};  
  3. var obj2 = {name:'obj2Name'};  
  4. item.add('obj1Key',obj1);  
  5. item.replace('obj2Key',obj1);  
  6. item.on('replace',function(key, oldO, newO){  
  7.     Ext.Msg.alert('提示','当前被替换的对象的name是:'+oldO.name+'<br>其key是:'+key+'<br>新对象的name是:'+newO.name);  
  8. });  
  9. item.replace('obj2Key',obj2);  


17、线程运行实例: 
Javascript代码   收藏代码
  1. var task ={  
  2.     run:function(){  
  3.         Ext.Msg.alert('提示','线程已经运行!我将每次运行将重复5次!但10秒后我将停止!');  
  4.     },  
  5.     interval:1000,  
  6.     repeat:5,  
  7.     duration:10000  
  8. };  
  9. var task1 = new Ext.util.TaskRunner();  
  10. task1.start(task);  


18、获得文本块的高和宽示例: 
Javascript代码   收藏代码
  1. var t = new Ext.util.TextMetrics('id01',5);  
  2. Ext.Msg.alert("测试","通过getSize('the text')取得的文本块的宽度是:"+t.getSize('the text').width+  
  3. "<br>通过getHeight('new text test')取得的文本块的高度是:"+t.getHeight('new text test')+  
  4. "<br>measure('id01','重新测试方法',3)方法测试"+Ext.util.TextMetrics.measure('id01','重新测试方法',3).width);  


19、键盘绑定对象示例: 
Javascript代码   收藏代码
  1. var el = Ext.get("id01");  
  2. var nav = new Ext.KeyNav(el,{  
  3.     "left" : function(e){  
  4.         alert('向左的按键被按下了');  
  5.         //this.moveLeft(e.ctrlKey);  
  6.     },  
  7.     "right" : function(e){  
  8.         alert('向右的按键被按下了');  
  9.         //this.moveRight(e.ctrlKey);  
  10.     },  
  11.     "enter" : function(e){  
  12.         alert('回车键被按下了');  
  13.         //this.save();  
  14.     },  
  15.     scope : el  
  16. });  
  17. nav.enable();  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值