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的实例，而不再是原生的<div>标签。使用el.dom才能获取到原生的<div>对象。

         Ext.getDom()才是最终超级兼容的方法，它统一了从包装类Ext.Element获取标签和从DOM树中获取标签二种操作。

 

         DomHelper使用：

         Varstr = ‘<ul><li>aa</li>’; str += ‘<li>bb</li>’;str += ‘<li>cc</li></ul>’;

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

<tag></tag>

afterBegin:在 <tag>后面插入

afterEnd：在</tag> 后面插入

beforeBegin：在<tag> 前面插入

beforeEnd：在</tag> 前面插入

 

Ext.DomHelper.overwrite(‘myDiv’ , str);

overwrite会把指定标签中的内容全部覆盖掉。并不会把标签本身也覆盖掉。

 

var tpl =Ext.DomHelper. createTemplate(“<li>{content}</li>”);

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<len;i++){

         cs[i].removeAttribute(“_nodup”);

}

return r;

}

第三章

CSS从内到外：content （实际的内容）、 padding（填充）、border （边框）、 margin（边距）

 

labelSeparator:’<fontcolor=”red”>>></font>’ 分隔符不仅仅可以是默认的冒号，还可以用 HTML标签。

 

在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<len;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 += “<br/>通知班主任，家长到了”;

},true);

Btn.addEventListener(‘click’, function(e){

                   Document.body.innerHTML += “<br/>通知学生，家长到了”;

} , 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个集合压缩在一起

 

第六章

         动态创建<script>标签：

         Var headTag = document.getElementByTagName(“HEAD”)[0];

         Var scriptTag = document.createElement(“script”);

         scriptTag.type = “text/javascript”;

         scriptTag.src = “data.js”;

         headTag.appendChild(scriptTag);

        

第七章

         Join的使用：字符串连接效率（IE用Join效率更高，FireFox刚好相反）

Var arr = [‘var fn =function(){’];

         If(条件1){arr.push(‘alert(“Hi,大漠。”)’);}

         Else{arr.push(‘alert(“Hi,漠漠”)’);}

         Arr.push(‘}’);

         Eval(arr.join(‘’));

 

         Sort的使用：

         Var fn = function(a,b){

                   If(typeof(a) == ‘string’){

                   Return a.localeCompare(b);

}

Return a-b;

}

Var arr = [‘张三’ , ‘李四’ , ‘王五’];

Arr.sort(fn);

 

         decode：JSON字符串转换成JS对象

         encode：JS对象转换成JSON字符串

 

         创建Record：

         Var user = Ext.data.Record.create([

                   {name : ‘userName’},{name : ‘age’}

]);

Var record = new User({username : ‘aa’ , age : 25});

Store.add(record);

         建议不要使用构造函数创建实例

 

         Ext.apply({} , this.data)创建一个全新的js对象。

         深拷贝：Ext.decode(Ext.encode(this.data))

 

         Store过滤：

         单条件过滤

         Store.filter(‘name’ , val , true , true);

         多条件联合过滤

         Store.filter([

                   {property:’name’ , value : name , anyMatch : true, caseSensitive : true},

                   {property:’age’ , value : age}

]);

         多条件排序

         Store.sort([{field:’name,direction:’asc’},{field:’age’ ,direction:’desc’}] , ‘desc’);

 

         HttpProxy：使用Http方式从服务端加载数据。

         MemoryProxy：直接加载代码中直接定义的数据。

         变换HttpProxy的url：store.proxy.setUrl(‘a.json’); store.load();

        

         DataReader有三个子类：ArrayReader、JsonReader、XmlReader。

         有关JsonStore的root配置项：在使用JsonStore从后台加载数据时，一般需要配置root选项，这是由于JsonStore在解析JSON对象的时候必须知道从对象哪个属性开始解析。

        

         Ext的Cookie：

         Ext.onReady(function(){

                   Ext.state.Manager.setProvider(newExt.state.CookieProvider({

                            //此cookie7天后失效

                            Expires :new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 7))

}));

MyWin = Ext.extend(Ext.Window , {

         stateEvents : [‘resize’],

         getState : function(){

                   return {width: this.getWidth() , height : this.getHeight()};

},

applyState :function(state){

         MyWin.superclass.applyState.call(this, state);

}

});

var win = new MyWin({

         id : ‘myWin’,

         title : ‘StateFul’,

         width : 400,

         heght : 300,

         stateful : true

});

Win.show();

}

 

第八章

         typeOf能判断6中类型：number、string、boolean、object、function、undefined

         Ext.type(o);Ext扩展的函数，比typeOf更强大。

         Person.superclass.constructor.call(this, config);利用Animal的构造函数把config提供的属性都拷贝到Person的实例上去。