ExtJS4学习笔记六--一些小知识点
1、获取页面上的HTML元素,并进行处理,使用Ext.get('elid')方法,参数为HTML元素的id值,由此可对获取到的元素进行各种处理。例如:
- 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.addClsOnFocus("focus-css");
- el.addClsOnOver("mouseover-css");
- el.addClsOnClick("click-css");
- el.setWidth(240);
- el.setWidth(240, true);
- el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});
- el.addKeyListener({key:"g",ctrl:true},fn1,el);
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方法,与前面的区别在于参数不同,例如:
-
- var el = Ext.query("#div1");
-
- 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方法,然后根据其特定类型可以进行相应的处理,例如:
-
- var comp = Ext.getCmp('panel1');
- Ext.Msg.alert('提示',"取得的id为'panel1'的组件的类型为"+comp.getXType());
- comp.setTitle("aaaaaa");
5、获取元素的DOM,使用getDom方法
-
- 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;
-
- for(i=0;i<10;i++){
- array.push(i);
- }
- function fn(item,index,allItems){
-
- if(item>5){
- return false;
- }else{
-
- 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(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};
- Ext.Msg.alert("提示",Ext.encode(person));
10、Ext.htmlDecode方法示例:
- Ext.Msg.alert("提示",Ext.htmlDecode("<table width='240' border='1' id='tab1' cellspacing='2' cellpadding='4'><tr><td>简单的html表格<input type='button' value='按钮'></td></tr></table>"));
11、Ext.typeOf方法示例:
- var panel = new Ext.Panel({
- className:"test",
- title:"示例",
- renderTo:'sub1',
- width:'300px',
- html:"<div id='div1' style='height:200px'></div>"
- });
- var el = Ext.select(["div1"],true);
- var array1 = new Array();
- el.on("click",function tes(){
- Ext.Msg.alert("提示",'panel的类型是:'+Ext.typeOf(panel)+',array1的类型是:'+Ext.typeOf(array1));
- });
12、Ext.core.DomHelper示例:
- Ext.core.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);
-
-
-
-
- Ext.core.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;");
- var str = Ext.get("div1").dom.outerHTML;
-
-
- Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');
-
-
- var test = Ext.core.DomHelper.createTemplate('<div name="{id}">'+
- '<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+
- '</div>');
-
- test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);
-
-
- Ext.core.DomHelper.insertAfter(Ext.get("div1"),{id: 'item2', html: "<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"});
-
- Ext.core.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");
-
- Ext.core.DomHelper.overwrite(document.getElementById("div1"),"我是新替换的Html文本");
13、DomQuery用法示例:
-
-
- var tarArry = Ext.query('#div0 div');
-
- var except = Ext.core.DomQuery.filter(tarArry,"#div1",true);
-
- var include = Ext.core.DomQuery.filter(tarArry,"#div1",false);
-
- var isInclude = Ext.core.DomQuery.is(except,'#div0');
-
- var selectNode = Ext.core.DomQuery.selectNode("#div0 div");
- function retStr(array){
- var str ="";
- for(var i=0;i<array.length;i++){
- if(i<array.length-1)
- str+=(array[i].id+";");
- else
- str+=array[i].id;
- }
- return str;
- }
- Ext.Msg.alert('返回结果',"不包含id为'div1'的所有div的id为:"+retStr(except)+
- "<br>包含id为div1的所有div的id为:"+retStr(include)+
- "<br>通过Ext.core.DomHelper.is(except,'#div0')的返回结果"+isInclude+
- ",<br>表示"+retStr(except)+"是否包含id为div0的节点:"+
- "<br>在id为div0的第一个子节点的id是:"+selectNode.id);
14、Ext.util.CSS示例:
-
- Ext.util.CSS.createStyleSheet(".myclass{color:blue}","the");
- var cssObj = Ext.util.CSS.getRule(".myclass",true);
- Ext.Msg.alert('获取的信息','创建样式表<br>获取myclass样式表中规则的字体颜色:'+cssObj.style.color);
-
- Ext.util.CSS.createStyleSheet(".a1{font-size:12px;color:blue;}","thecss");
- var pan = new Ext.panel.Panel({
- title:'添加css并移除',
- html:'首先我们添加一个样式,然后移除他'
- ,
- height:200,
- width:300,
- cls: 'a1'
- });
- pan.render("hr_panel");
-
- setBtn = new Ext.button.Button(
- text : '移除样式',
- width : 50,
- handler : function(){
- Ext.util.CSS.removeStyleSheet("thecss");
- }
- });
- setBtn.render("setBut");
-
-
-
-
- Ext.onReady(function(){
- var themes = [
- {theme:'默认', css:'ext-all.css'},
- {theme:'黑色',css: 'ext-all-access.css'},
- {theme:'红色',css: 'ext-all-red.css'}];
-
- Ext.regModel('Theme', {
- fields: ['theme','css']
- });
-
- var themeStore = Ext.create('Ext.data.Store',{
- model : 'Theme',
- data : themes
- });
-
- var themeChange = Ext.create('Ext.form.ComboBox',{
- id : 'themeChange',
- width : 150,
- labelWidth : 60,
- labelSeparator :':',
- fieldLabel:'样式选择',
- store : themeStore,
- editable : false,
- triggerAction: 'all',
- store : themeStore,
- displayField : 'theme',
- valueField : 'css',
- queryMode: 'local',
- value:'ext-all.css',
- listeners : {
- 'collapse' : function() {
- Ext.util.CSS.swapStyleSheet('theme', 'extjs4/resources/css/'+ this.getValue());
- contentIframe.window.themeChange(this.getValue());
- }
- }
- });
-
- Ext.create('Ext.form.FormPanel',{
- title:'Ext.form.ComboBox本地数据源示例',
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- frame : true,
- height:100,
- width:270,
- defaults:{
- labelSeparator :':',
- labelWidth : 70,
- width : 200,
- labelAlign : 'left'
- },
- items:themeChange
- });
- });
15、格式化字符串示例:
- var str = "<table width='300' cellspacing=1 border=1 cellpadding=1><tr><td>table string</td></tr></table>";
- var str1 = " aV";
- var dat = new Date();
- var str2 = 12345;
- var str3 = 1.2345;
- Ext.Msg.alert(
- "提示",
- "原str为:"+str+"<br>ellipsis(str,5)后为:<br>"+Ext.util.Format.ellipsis(str,5)+"<br><br>"+
- "原strl为:"+str1+"<br>进行capitalize(str1)后为:<br>"+Ext.util.Format.capitalize(str1)+"<br>"+
- "<br>原dat为:<br>"+dat+"<br>"+
- "进行date(dat,'yyyy/mm/dd')后为:<br>"+Ext.util.Format.date(dat)+"<br><br>"+
- "注意调用htmlDecode(str)后展现出来的是一个带边框的表格:<br>"+Ext.util.Format.htmlDecode(str)+"<br>"+
- "原strl:"+str1+"<br>经过lowercase后为:<br>"+Ext.util.Format.lowercase (str1)+
- "<br>原str2:"+str2+",经过number后为:"+Ext.util.Format.number(str2,"-1234.0")+
- "<br>原str3:"+str2+",经过number后为:"+Ext.util.Format.round(str3,2)
- );
-
-
- var jsonStr = "{name:'the json name', value: 'the json sample'}";
-
- var obj = Ext.JSON.decode(jsonStr,true);
-
- var g='g',h='h',e =[g,h],f='f',b=[e,f],a = [b,'c'];
-
- var endA = Ext.JSON.encode(a);
- Ext.Msg.alert('提示',endA);
16、MixedCollection示例(还有first,get等方法):
- var item = new Ext.util.MixedCollection();
- var item2 = new Ext.util.MixedCollection();
- var a = {name:'a'};
- var b = {name:'b'};
- item.add('01',a);
- item.add('01',b);
- item2.add('01',a);
- item2.add('02',a);
- Ext.Msg.alert('提示','当已存在关联的索引时往01关联以象,item的个数为:'+item.length+'<br>'+'当不存在关联的索引往索引关联对象,item的个数为:'+item2.length);
- var item = new Ext.util.MixedCollection();
- var arr = [];
- arr.push({name:'a'});
- arr.push({name:'b'});
- item.addAll(arr);
- Ext.Msg.alert('提示','原item中的对象个数为:'+item.length+'<br>当加入arr数组中的两个对象后item中的对象个数为:'+item.length);
- var item = new Ext.util.MixedCollection();
- var arr = [{name:'a'},{name:'b'}];
- item.clear();
- Ext.Msg.alert('提示','当调用clear()后item的对象个数为:'+item.length);
- var item = new Ext.util.MixedCollection();
- item.addAll([{name:'a'},{name:'b'}]);
- var col = new Ext.util.MixedCollection();
- col = item.clone();
- item.clear();
- Ext.Msg.alert('提示','当调用item的clone()后返回的col的对象个数为:'+col.length);
- var item = new Ext.util.MixedCollection();
- var obja = {name:'a'};
- item.add('obj1',obja);
- Ext.Msg.alert('提示','集合中是否含有以obj1为关联索引的对象:'+item.containsKey('obj1')+'<br>集合中是否含有对象obja:'+item.contains(obja));
- var item = new Ext.util.MixedCollection();
- var obja = {name:'a'};
- item.add('obj1',obja);
- item.add('obj2',{name:'b'});
- item.each(function(tempObj){
- tempObj.name='newA';
- Ext.Msg.alert('提示','通过调用each后的名称为:'+tempObj.name);
- });
- var item = new Ext.util.MixedCollection();
- item.on('add',function(index,o,key){
- Ext.Msg.alert('提示',' 当前有对象加入,加入后的index是:'+index+'<br> 该对象的name是:'+o.name+'<br> 加入对应的key是:'+key);
- });
- item.add('obj2key',{name:'nobj2name'});
- var item = new Ext.util.MixedCollection();
- item.on('remove',function(o,key){
- Ext.Msg.alert('提示','当前移除的对象的name是:'+o.name+'<br>其key是:'+key);
- });
- item.add('obj2key',{name:'nobj2name'});
- item.removeAtKey('obj2key');
- var item = new Ext.util.MixedCollection();
- var obj1 = {name:'obj1Name'};
- var obj2 = {name:'obj2Name'};
- item.add('obj1Key',obj1);
- item.replace('obj2Key',obj1);
- item.on('replace',function(key, oldO, newO){
- Ext.Msg.alert('提示','当前被替换的对象的name是:'+oldO.name+'<br>其key是:'+key+'<br>新对象的name是:'+newO.name);
- });
- item.replace('obj2Key',obj2);
17、线程运行实例:
- var task ={
- run:function(){
- Ext.Msg.alert('提示','线程已经运行!我将每次运行将重复5次!但10秒后我将停止!');
- },
- interval:1000,
- repeat:5,
- duration:10000
- };
- var task1 = new Ext.util.TaskRunner();
- task1.start(task);
18、获得文本块的高和宽示例:
- var t = new Ext.util.TextMetrics('id01',5);
- Ext.Msg.alert("测试","通过getSize('the text')取得的文本块的宽度是:"+t.getSize('the text').width+
- "<br>通过getHeight('new text test')取得的文本块的高度是:"+t.getHeight('new text test')+
- "<br>measure('id01','重新测试方法',3)方法测试"+Ext.util.TextMetrics.measure('id01','重新测试方法',3).width);
19、键盘绑定对象示例:
- var el = Ext.get("id01");
- var nav = new Ext.KeyNav(el,{
- "left" : function(e){
- alert('向左的按键被按下了');
-
- },
- "right" : function(e){
- alert('向右的按键被按下了');
-
- },
- "enter" : function(e){
- alert('回车键被按下了');
-
- },
- scope : el
- });
- nav.enable();