ExtJs学习
第一章
使用var定义的是局部变量，不使用var定义的是全局变量。
定义一个对象：var obj = new Object(); var obj = {};
定义一个数组：var arr = new Array(); var arr = [];
(10/3).toFixed(2);格式化成二位小数3.33
var position= maxWidth||obj.x||NaN||200;代码为从左到右找到合法的值就停止（合法批不为0、null、undefined、‘’、NaN），这里值为200，把默认值放到最后一个即可保证一定不会参数错误。
对任意东西取二次非，就会收获一个布尔值。
varobj = {}; alert(!!obj);为true
vara; alert(!!a);为false
如果原来对象非空，返回true，否则返回false
alert(animalinstanceof Animal)对象类型相同返回true
alert(typeof animal)返回类型object
如果不知道一个对象中有哪些属性，又想把所有属性全部拿出来看下，则使用[]运算符
varobj = {}; obj.name=”aa”; alert(obj.name); alert(obj[‘name’]);
(function(){alert(‘会自动执行的函数。’)})();
varfn = (a=10 , function(){alert(a*10);});弹出100，fn为100
alert(eval(“2+3”)); 弹出5
eval(“alert(‘Helloeval’)”); 弹出Hello eval
eval(“(functionsay(){alert(‘Hi Baby’);})”); 弹出Hi Baby
Ext.apply(p2 , p1);把对象p1复制到p2，只能是object
Document.getElementByName()、document.getElementByTagName()返回的是数组，而且是有顺序的。
第二章
创建标签的方法只有一个document.createElement();
插入标签有二个：appendChild()、insertBefore();
替换标签有一个：replaceChild();
删除标签有一个：removeChild();
Ext使用了3个核心工具类封装了对HTML的操纵：Ext.Element、Ext.DomHelper、Ext.DomQuery
使用Ext.get()获取到的是Ext.Element的实例，而不再是原生的
Ext.getDom()才是最终超级兼容的方法，它统一了从包装类Ext.Element获取标签和从DOM树中获取标签二种操作。
DomHelper使用：
Varstr = ‘
- aa ’; str += ‘
- bb ’;str += ‘
- cc
Ext.DomHelper.append(‘myDiv’, str);
Varobj = {
Tag: ‘ul’,
children: [
{tag: ‘li’ , html : ‘aaa’},
{tag: ‘li’ , html : ‘bbb’}
]
}
Ext.DomHelper.append(‘myDiv’ , obj);
Ext.DomHelper.insertHtml(‘afterBegin’ , Ext.getDom(‘myDiv’) , str);
afterBegin:在
afterEnd：在 后面插入
beforeBegin：在
beforeEnd：在 前面插入
Ext.DomHelper.overwrite(‘myDiv’ , str);
overwrite会把指定标签中的内容全部覆盖掉。并不会把标签本身也覆盖掉。
var tpl =Ext.DomHelper. createTemplate(“
tpl.overwrite(‘myDiv’ , {content : ‘aa’});
Ext.DomQuery. selectNode(“*”);
也可以写成 Ext.query(“div”); 元素选择器 p52
Ext.DomQuery.selectNode(“ div[@class=’x-window-tl’]”)属性选择器：获取 class等于’x-window-tl’ 的节点内的所有元素 p54
Ext.query(“div:first-child”); 伪类选择器 ，展示了选中大量节点的情况。 P55
Ext.DomQuery.selectNode(“ div{padding-left=’6px’}”);CSS 值选择器 ，CSS值 padding-left等于6px
Ext.fly() 只适用于“一次性操作”的场合。
Ext.get() 有缓存机制，内存占用会大一些。
去除数组对象重复元素的好方法（元素为对象）：
Function nodupIEXml(cs){
Vard = ++key , r;
cs[0].setAttribute”_nodup”, d);
r= [cs[0]];
for(vari = 1 , len = cs.length ; i < len ; i ++){
varc = cs[i];
if(!c.getAttribute(“_nodup”)!= d){
c.setAttribute(“_nodup”, d);
r[r.length]= c;
}
}
for(var i = 0 , len = cs.length; i cs[i].removeAttribute(“_nodup”); } return r; } 第三章 CSS从内到外：content （实际的内容）、 padding（填充）、border （边框）、 margin（边距） labelSeparator:’ 在FormPanel中，表单项默认都是对齐到左上角，如果需要让这些项目都居中对齐，可以在 FormPanel中加上这样一个配置项： bodyStyle:{ ‘padding’: ’80 100’ } 切换主题： Ext.util.CSS.swapStyleSheet(‘default-skin’,’../ext-3.4.0/resources/css/xthieme-gray.css’); 第四章 Js可以函数嵌套，而Java不能。 Window：顶级作用域。 通过return一个函数的方式，可以让函数“穿越”作用域的限制，从而让外层作用域能够“触摸”到本来无法触摸的“内层”函数和变量。 call和apply都能让函数获取执行。 myFunc.call({} , var1 , var2 , var3…); myFunc.apply({} , [var1 , var2 ,var3]); function fn(a , b){return a + b;} fn.call({} , 1 , 2); fn.apply({} , [1 , 2]); 函数可以被当作数据看待，显然也可以动态地被添加、删除。 var obj = {}; obj.sayHello = function(){alert(“Hi baby!”);} obj.sayHello(); delete obj.sayHello(); js函数原生的属性：arguments、callee、caller、length、prototype length：函数字义的形参个数。 Arguments是一个对象，而这样可以把对象转换成数组： varargs = Array.prototype.slice.call(arguments); callee:指向函数自己 fact(n){ if(n==1)return 1; else{return n*arguments.callee(n-1);} } 定时器： setTimeout：在指定时间之后执行一次指定的函数。clearTimeout取消 setInterval：不断执行函。clearInterval取消 var d= new Date(); alert(d.toLocaleString());获取格式化好的本地时间。 在定时器中给函数传递参数： varfn = function(username){document.body.innerHTML=username;} window.setInterval(function(){ fn(“aa”); },1000); 自己写回调工具： varcreateCallback = function(fn , args){ return function(){fn.call(fn,args);} } Window.setInterval(createCallback(fn,”aaa”),1000); 以后遇到需要“回调”而且需要传递参数的情况，就可以用这个工具函数了。 电子钟： varupdateClock = function(){ Ext.fly(‘clock’).update(new Date().format(‘g:I:sA’)); } var task = {run : updateClock, interval : 1000}; var runner = new Ext.util.TaskRunner(); runner.start(task); 也可以用TaskMgr： Ext.TaskMgr.start({ Run:function(){ Ext.fly(‘clock’).update(newDate().format(‘g:i:s A’)); }, Interval:1000 }); Animal =function(name){this.name = name;} Animal.prototype.sayHello = function(){alert(‘aaa’);} var a1 = new Animal(‘aa’);a1.sayHello(); var a2 = new Animal(‘bb’);a2.sayHello(); 这种方式比在Animal实例方法里面写sayHello函数的优点：只在构造函数Animal的prototype里面“存储”一份sayHello函数，然后所有Animal类的实例都会共享这份代码。 prototype:原型 向prototype上添加、删除属性会“立即”影响到所有实例。 通过向构造函数的prototype上增加属性，可以立即影响到这个类的所有实例。添加上去的属性是被当做“实例属性”对待的，利用了JavaScript的“原型查找”机制，这么做可以大量节约资源。其实，除了节约资源外，向构造函数的原型上添加自定义的属性和方法也是扩展JavaScript内置对象的重要手段。 Array原生方法： concat()：连接二个或多个数组，并返回结果。 Join()：把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔。 pop()：删除并返回数组的最后一个元素。 push()：向数组末尾添加一个或更多元素，并返回新的长度。 shift()：删除并返回数组的第一个元素。 splice()：删除元素并向数组添加新元素。 unshift()：向数组开头添加一个或更多元素，返回新的长度。 扩展工具函数indexOf查找数组中是否包含指定的对象： Array.prototype.indexOf = function(o){ for(vari = 0,len=this.length;i if(this[i]== o) return I; } return -1; } 扩展工具函数remove删除指定位置上的元素： Array.prototype.remove =function(o){ var index = this.indexOf(o); if(index != -1){ this.splice(index ,1);//第二个参数表示：删除多少个元素 } return this; } 扩展String： blink()：显示闪动字符串（ie、Chrome, or Safari不能用） bold()：粗体显示。 charCodeAt()：返回在指定位置的字符的Unicode编码。 fontcolor：使用指定颜色来显示字符串。 fontsize：使用指定尺寸来显示字符串。 italics：斜体显示。 link()：将字符串显示为链接。 small()：小字号显示。 strike()：删除线显示。 sub()：把字符串显示为下标。 sup()：显示为上标。 toLowerCase()：小写。 toUpperCase()：大写。 replace()：暗藏用法 第一个参数可以是正则表达式，第二个参数可以是函数： function regReplace(){ var str = “我是猪，我是猪”; alert(str.replace(/我/g , function(){ alert(arguments); return “你”; })); } String.escape(“sfsd’\/”);对字符串中的‘、 \等进行转义操作。 var date = new Date(); alert(date.format(‘Y-m-d H:i:s’)); 2011-03-06 00:45:39 var date = new Date().add(Date.DAY , 1); alert(date.between(date.add(Date.DAY , -1) , date.add(Date.DAY , 1))); 扩展Function： 创建回调createCallback： Window.setInterval(fn.createCallback(‘aaa’) , 1000);回调函数最终都是在顶级作用域window中被调用的。 创建代理createDelegate： Function fn=function(){ alert(‘aa’);} Fn.createDelegate({name:’aaaa’})();弹出aa 实现不断弹出对话框：window.setInterval(fn.reateDelegate({name:’aa’}) , 1000); 创建代理createInterceptor： Var fn =function(){alert(‘原来的函数’);} Var fcn =function(){alert(‘拦截函数先运行’);} fn.createInterceptor(fcn)();只有拦截器的返回值为真才会去运行原来的函数 创建代理createSequence： fn1.createSequence(fn2)();顺序执行，函数fn2总在fn1执行之后运行。 闭包： 1. 在函数A内部定义一个函数B。 2. 通过调用A把B的引用返回出来，赋值给其他作用域中的变量C。 3. 通过C执行B。 Function A(){var B = function(){}; return B;} Var C = A(); C(); 模拟私有属性： Var person =function(){ Var id = ‘root’,name = ‘root’; Return { getId: function(){return id;}, getName: function(){return name;} } }(); 除了通过getId和getName二个方法，没有任何其他代码能够接触到这二个属性，这二个属性就成了person的私有属性。 第五章 Ext.onReady(function(){ }); Var btn = document.createElement(‘input’); Btn.setAttribute(‘type’ , ‘button’); Btn.setAttribute(‘value’ , ‘对讲机按钮’); Btn.addEventListener(‘click’ ,function(e){ Document.body.innerHTML += “ },true); Btn.addEventListener(‘click’, function(e){ Document.body.innerHTML += “ } , true); 给一个按钮添加并发事件。 Element.addEventListener(type, listener , useCapture); Element.removeEventListener(type, listener , useCapture); Element表示需要添加或者删除事件监听器的HTML元素 Type表示需要监听的事件名称如click Listener事件发生时要执行的函数 IE的事件监听不同： Btn.attachEvent(‘onclck’ ,function(){} , true); Btn.detachEvent(‘onclick’ ,function(){} , true); 事件名前都要加个on 可以这样来进行浏览器兼容： If(document.addEventListener){} Else if(document.attachEvent){} Ext的listeners的配置项single：假如配置为true则监听器运行一次后就把自己删除。 suspendEvents()：挂起事件 resumeEvents()：恢复事件 Ext.getCmp(‘dataForm’).getForm().loadRecord(record);可以直接加载一条记录。 自定义事件： Listeners:{ ‘show’ : function(){this.fireEvent(‘myEvt’);}//触发myEvt事件 } Win.addEvent(‘myEvt’);//添加事件名 Win.on(‘myEvt’, function(){ Alert(‘我的自定义的事件’); }); Ext.get();获取到一个Element对象 假如标签所在的嵌套结构整体上已经是“孤儿”，那么通过offsetParent属性就无法取到值。 使用Ext扩展的Ext.type工具函数可以准确判定如下12种类型的对象：（string、number、boolean、date、function、object、array、regexg、element、nodelist、textnode、whitespace）。还定义了一系列的快捷方式：isFunction()、isNumber()、isString()。 clean： 为传递进来的数组创建一个副本，该副本剔除了所有错误了值。（0、false、null、undefined、‘’、NaN），必须定义新的变量来接受返回值。 Ext.each()：在找到对象后return false，后续无效循环就不会再执行。提高效率 flatten();将嵌套的多维数组合并成一个一维数组。 max()：获取最大的元素 mean()：求数组中元素平均值 min()：求最小的元素 pluck()：从数组中的每个元素中提取属性的值 sum()：元素求和 toArray()：将任何可迭代的对象转换成数组 unique()：为传递的数组创建一个过滤掉重复值的拷贝 zip()：将N个集合压缩在一起 第六章 动态创建
通知班主任，家长到了”;
通知学生，家长到了”;