MyApp=function(){vardata;//data is private and can't be accessed from outside.return{init:function(){console.log('init');//Initialize application here},getData:function(){returndata;}};}();Ext.onReady(MyApp.init,MyApp);
Observable观察者模式
Ext.util.Observable使用events实现在多个objects之间解耦
事件触发流程：state changes -> fire event -> notified
12345678910111213141516
varMyClass=Ext.extend(Ext.util.Observable,{constructor:function(config){this.addEvents('datachanged');//specify the events we're going to fire},update:function(){this.fireEvent('datachanged',this,arguments.length);}});// To subscribe to an eventvarc=newMyClass();c.on('datachanged',function(obj,num){console.log(num);});c.update(2,8,'some');//3
Person=Ext.extend(Object,{constructor:function(first,last){this.firstName=first;//propertythis.lastName=last;},getName:function(){returnthis.firstName+' '+this.lastName;}});Developer=Ext.extend(Person,{getName:function(){if(this.isCoding){return'Go Away!';}else{// Access the superclass getName methodreturnDeveloper.superclass.getName.call(this);}}});varp=newDeveloper('John','Smith');console.log(p.getName());//John Smithp.isCoding=true;console.log(p.getName());//Go Away!
prototype中的会被share，特别要注意{}会被多个子类共享修改，小心！！
123456789101112131415161718
MyClass=Ext.extend(Object,{// This object literal is now shared between all instances of MyClass.baseParams:{},foo:function(){this.baseParams.bar='baz';}});Ext.onReady(function(){vara=newMyClass();varb=newMyClass();a.foo();// Modifying baseParams in a affects baseParams in b.console.log(b.baseParams);});
apply 复制所有property
applyIf 对于重复的property则不复制
12345678910
varperson={name:'John Smith',age:30,hobby:'Rock Band'};Ext.applyIf(person,{hobby:'Coding',city:'London'});// hobby is not copied over
varstop=false;vartask={run:function(){if(!stop){console.log(newDate());}else{runner.stop(task);// we can stop the task here if we need to.}},interval:1000// every 1 seconds};varrunner=newExt.util.TaskRunner();runner.start(task);
vartask=newExt.util.DelayedTask(function(){console.log(Ext.getDom('myInputField').value.length);});// Wait 500ms before calling our function. If the user presses another key // during that 500ms, it will be cancelled and we'll wait another 500ms.Ext.get('myInputField').on('keypress',function(){task.delay(500);});
延时函数：
12345678
vartask=newExt.util.DelayedTask(function(){console.log(Ext.getDom('myInputField').value.length);});// Wait 500ms before calling our function. If the user presses another key // during that 500ms, it will be cancelled and we'll wait another 500ms.Ext.get('myInputField').on('keypress',function(){task.delay(500);});
1234
varwhatsTheTime=function(){alert(newDate());};whatsTheTime.defer(3000);//Wait 3 seconds before executing.
Dom Querying or Traversal(query, select, findParent)
is 测试element是否符合selector
123456789101112
//向上找parent:Ext.fly('elId').findParent('div');//returns a dom nodeExt.fly('elId').up('div');//返回Ext.Element//查找Ext.fly('elId').select('div:nth-child(2)');//返回CompositeElementExt.fly('elId').select('div:nth-child(2)',true);//返回Array of elementsExt.query('div:nth-child(2)');//返回Array of dom nodes//返回Ext.Element，第二参数为true则返回dom nodeExt.fly('elId').child('p.highlight');//任意深度的single childExt.fly('elId').down('span');//直接single child
el.on('click',function(e,t){// e is a normalized event object (Ext.EventObject)// t the target that was clicked, this is an Ext.Element. });el.un('click',this.handlerFn);
Ext.fly('actions').on('click, function(e,t) { switch(t.id) { case ''btn-edit':// handle the eventbreak;case'btn-delete':// handle the eventbreak;}});
configuration option:
123456789
el.on('click',function(e,t){// handle click},this,{delegate:'.clickable',// will filter target to be a descendant with the class 'clickable'single:true,// 只响应一次，然后自动删除buffer:1000,// 延时1s，如果在时间间隔内多次触发会覆盖delay:1000,// 延时1s，不会覆盖target:el.up('div')// only handles the event when it has bubbled up to the first 'div'.});
// changes the height to 200px and animates with default configurationExt.fly('elId').setHeight(200,true);// changes the height to 150px and animates with a custom configurationExt.fly('elId').setHeight(150,{duration:.5,// animation will have a duration of .5 seconds// will change the content to "finished"callback:function(){this.update("finished");}});
1234567891011
getPadding('lrtb');//返回四个方向padding之和//同时得到x,y坐标varelXY=Ext.fly('elId').getXY()//elXY is an arrayExt.fly('elId').setXY([20,10])//得到相对位置varelOffsets=Ext.fly('elId').getOffsetsTo(anotherEl);//设置位置setLocation(15,32)
