学习和笔记extjs使用Ext extend进行继承的一个有趣问题

Ext.extend在Ext的使用过程中，偶然发现了一个有趣的问题，和大家共下。先看arr，initvarBaseClass=Ext.extend(Ext.util.Observable,{arr:init:BaseClass，initarr1varSubClass1=Ext.extend(BaseClass,{init:function(){}BaseClass，initvarSubClass2=Ext.extend(BaseClass,{init:function(){}functionextTest()varc1=newSubClass1();alert(c1.arr);1，1，varc2=newSubClass2();alert(c2.arr);2，1,2}在执行extTest函数时，收到的两个alert别是11,2，而且，如果不断的执行extTest函数，得到的值会不断的增加，这是什么原因呢？问题肯定是处在Ext.extend方法上，加载debug版本的，对这个方法进行单步跟Ext.override看来在那个for环之中，只是将overrides各个属性进行简单赋值操作，但是，对于本例中出现的数组，赋值只能传递对数组的，也就是说SubClass1和SubClass2将共个数组，因为他们的是同一个数组，varBaseClass=Ext.extend(Ext.util.Observable,{arr:null,init:function()this.arr=[];//initarr}varSubClass1=Ext.extend(BaseClass,{init:function(){SubClass1.superclass.init.call(this);//callbaseclass'sinitfunction}varSubClass2=Ext.extend(BaseClass,{init:function(){SubClass2.superclass.init.call(this);//callbaseclass'sinitfunction}functionextTest()varc1=newSubClass1();varc2=newSubClass2();}误”，郁闷了好长时间才发现原因，因此给大家提个醒。Ext.extend用法以及代码解Ext.extendExt的继承机制，这个函数的代码相当难懂。要明白这个函数的代码，首functionSuperClassMyClass。下面的两种方式MyClassMyClass=Ext.extend(SuperClass,{/**/Ext.extend(MyClass,SuperClass,{/*varvara=function(id){this.id=id;}totype=tostring:returnreturn}b=function(id){b.superclass.constructor.call(this,id);}Ext.extend(b,a,{tostring:function(){returnString.format("b:{0}",}varobj1=newa("obj1");varobj2=newb("obj2");varvara=function(id){this.id=id;}totype=tostring:returnreturn}b=Ext.extend(a,{tostring:function(){returnString.format("b:{0}",}varobj1=newa("obj1");varobj2=newb("obj2");BaseClassBaseClass=function()this.f1=function(){alert("f1inbase");}this.f2=function(){alert("f2inbase");}}ChildClass=function(){}Ext.extend(ChildClass,BaseClass,{f1:function(){alert("f1inf3:function(){alert("f3inchild");}varb=newChildClass();Ext.extendExt.extendputsthepropertiesspecifiedinthe3rdargumentintothesubclass's也就是说：第三个参数里面的函数被放置在了子类的prototypeChildClass.superclass.constructor.call(this);这句上，BaseClassf1ChildClassChildCtotypeJavaScript的原型继承的了解，可以知道，实prototypeoverride的功能的。BaseClassBaseClass=function()BaseCtotype={f1:function(){alert("f1in}JavaScriptfunctionfunctionExtend(subFn,superFn){subFtotype=newsuperFn()subFtotype.constructor=subFn}functionthis.say1=function(){}}functionthis.say2=function(){}}vartiger=newsubFnprototypesuperFnExt.extendExt.extend函数中用到了Ext.override，这个函数把第二个参数中的所有对象到第一prototypeExt.override函数的代码：Ext.overrideExt.override=function(origclass,varp=for(varmethodinoverrides){p[method]=overrides[method];}}}Ext.extend@param{Objectsubclass子类，用于继承（该类继承了父类所有属性，并最终返@param{Objectsuperclass@param{Objectoverrides（该参数可选）*@methodfunctionextend//inlinevario=function(o){for(varmino){this[m]=}returnfunction(sb,sp,if(typeofsp=='object'){overrides=sp;sp=sb=function(){sp.apply(this,}varF=function(){},sbp,spp=totype;F.prototype=spp;sbp=totype=newF();if(spp.constructor==Ototype.constructor){}sb.overridesb.override=function(o){Ext.override(sb,o);sbp.override=io;Ext.override(sb,overrides);returnsb;functionfunction//inlinevarinlineOverride=function(o){for(varmino){this[m]=}returnfunction(subFn,superFn,if(typeofsuperFn=='object')//subFn（subFn这里放的是父类的构造函数overrides参数相当于被忽略掉overrides=superFn=subFn=function(){superFn.apply(this,arguments);}varF=},subFnPrototype,superFnPrototype=superFtotype;F.prototype=superFnPrototype;subFnPrototype=subFtotype=newF();subFnPrototype.constructor=subFn;subFn.superclass=superFnPrototype; Ototype.constructor){superFnPrototype.constructor=}subFn.override=function(obj){Ext.override(subFn,obj);subFnPrototype.override=inlineOverride;Ext.override(subFn,overrides);return23Ext.extendfunction//inlinevarinlineOverride=function(o){for(varmino){this[m]=}returnfunction(superFn,varsubFn=function(){superFn.apply(this,arguments);varF=},subFnPrototype,superFnPrototype=F.prototype=subFnPrototypesubFtotypenewF();subFnPrototype.constructor=subFn.superclass=superFnPrototype;subFn.override=function(obj){Ext.override(subFn,obj);subFnPrototype.override=Ext.override(subFn,return从注释中可以看到，做的工作很简单，只是定义一个subFn函数，这个函数中会调用subFnprototypeoverrideExt.override(subFn,overrides);把overridessubFnprototype中。Ext.extendfunction//inlinevarinlineOverride=function(o){for(varmino){this[m]=}returnfunction(subFn,superFn,varF=},subFnPrototype,superFnPrototype=F.prototype=subFnPrototypesubFtotypenewF();subFnPrototype.constructor=//superclasssuperFnPrototypesubFn.superclass=superFnPrototype;//subFnsubFnPrototype添加overridesubFn.override=function(obj){Ext.override(subFn,obj);subFnPrototype.overridesubFnPrototype.override=Ext.override(subFn,return过程与两个参数的时候相差无几，只是两个参数的时候，subFn这样大家就对这个函数很明白了吧，也可以知道Ext.extendifif(superFnPrototype.constructor==Ototype.constructor){superFnPrototype.constructor=superFn;}这段代码我在改写的Ext.extend中省略掉了。原因在于我尝试了多次，发现参数为两个Object3Object但是发现superFnfunctionObject(){}IEFF下都是如此。那么我就不是很清YUI拖放支上一篇/下一 2007-10-1315:28:51/个人分类：AJAX技查看(9)/评论(0)/评分(00要支持拖放功能，必须包含如下文件!--!/span> #000000">Namespacesourcefile!/span> style="COLOR:#000000">-->!scriptsrc "yahoo.js" >script> !--!/span>!spanstyle="COLOR:#000000">Dependencysourcefiles!/span>!spanstyle="COLOR:#000000">-->!scriptsrc "dom.js >script!scriptsrc "event.js" >script> !--!/span>!spanstyle="COLOR:#000000">DragandDropsourcefile!/span>!spanstyle="COLOR:#000000">-->!scriptsrc "dragdrop.js >scriptDOMID，也可以提供一个元素对象。vardd1 newYAHOO.util.DD("element1"//alternatively,useanelement//var//vardd1=newelement1是通过改变元素的样式属性实现的，DOM动的元素通常比较大。一个解决方法是使用一个元素，通常是一个小一些元素，在鼠标移动时跟着移动。YUL个YAHOO.util.DD而不是一个YAHOO.util.DD即可。vardd2 newYAHOO.util.DD("element2"这种情况下，元素element2可以拖动，但是响应拖动时，实际上是YUL拖放组件自动创建的元素在移动，可以参考APIationforYAHOO.util.DD获取关于如何和样式元素的信息。当element2放置到目标位置时，元素将被隐藏。vardd3 newYAHOO.util.DDTarget("element3"上述示例中，element3element3拖放YAHOO.util.DragDropMgr也可以简写为YAHOO.util.DDM,用来配置拖放交互，比如当一个鼠标成为一个拖动的延迟时间。//setsthetimedelaybetweenamousedownand//drageventto1200milliseconds:YAHOO.util.DragDropMgr.clickTimeThresh= 1200;APIationforthisobject可以获取选项设置信息使用每个拖放对象都属性一个或多个组。拖放只有在被拖动的元素和目标元素default//Nogroupspecifiedsodd0isassignedtothe"default"groupvardd0= newYAHOO.util.DD("elementid0");//dd1isamemberofvardd1 newYAHOO.util.DD("elementid1","group1"//dd2isamemberofvardd2 newYAHOO.util.DD("elementid2","group2"//dd3isamemberofbothgroup1andvardd3= newYAHOO.util.DD("elementid3","group1");dd3.addToGroup("group2");//groupscanberemovedviascriptasdd1.removeFromGroup("group1"可选作为拖动，而不是使用缺省的拖动。vardd= newYAHOO.example.DD("dragDiv1"," test",{dragElId:"existing Div"})YAHOO.util.DD(包括YAHOO.util.DragDrop可用属性):YAHOO.util.DD(包括YAHOO.util.DD可用属性):resizeFrame,centerFrame,dragElId所有这些属性都可以通过类的属性进行，详情参见API文档Interesting大多数情况下，拖放支持都要求写代码响应交互过程中的关键。当开始拖动时，当拖动一个对象进入另一个对象时等等。YUL的拖放支持提供激活方法，可以提供自定义的实现来决定当这些发生时的处理方式。 描述onMouseDown鼠标，鼠标不总是会导致一个拖动操作

onInvalidDrop当被拖动的对象落在一个无效的目标对象时激活此。 在拖动开始后鼠标释放时激活此。 点模式和相交模//setDragandDroptoIntersectYAHOO.util.DDM.mode=//setDragandDroptoPointmodeYAHOO.util.DDM.mode=使用相交模式的主要特性是可能会导致在一次拖动中同时有多个拖放对象相互压盖。这意味着onDragEnter，特别是onDraer可能被激活多id，id响应时应用程序的逻辑复杂性可能造成显著的性能影响，特别是响应onDrag,onDraer时，因此通常需要优化你的onDrag和onDra DOM本越高，因此如果你遇到性能问题，考虑使用YAHOO.util.DD代替用于计算拖动的距离是否满足触发startDrop的条件记录mousedown相对于linked元素的位移，用于实现令拖动元素相对于鼠标静止移动的效dragOut,DDDDDD对象的dragEnter、draer、dragOut、dragDrop和invalidDrop等；在handleMouseMove和handleMouseUphandleMouseUp方法调用时isDrop为真，此时当前DD只会触发dragDrop而不是dragEnter或draer。当isDrop为假时反之。dragOut在两种情况下都有可能触发。每 上的mousemove和mouseup触发时都可能被调用，要注意其对性能的影响,,缓存oTarget的linked元素的Region，useCache控制是否每次都重新计算一次pt是否在否则，返回当前拖动元素在constraint和tick影响下的Region是否与oTargetstartDrag(x,y)触发startDrag的方触发当前DD对象的b4StartDrag和startDragstopDrag(e,silent)触发endDrag的方法触发b4EndDrag、endDrag和mouseUp；计算deltaX和deltaY创建一个timer，在一段时间后触发dragStart，这个时间默认是一秒。这个timer可能会在handleMouseMove(e)在范围中mousemove当拖动时鼠标超出windowhandleMouseUpIE中当这种情况发生时，mousemove利用startX和startY判断当前拖动的距离是否满足触发startDrag触发当前DD对象的b4Drag、drag并调用fireEvents 范围中mouseuphandleMouseMove。注释说是为了得到draer，但为什么要得到这个呢？fireEvents方法；触发endDragrefreshCache(groups)DDlinked元素位置的缓存如果groupsDD对象的缓存。handleWasClicked(nodeid)nodeidDD对象的拖动柄在node和它的所有父节元素上用isHandle方法测试。getLocation(oDD)oDDlinkedRegionverify(el)elDOM中regDragDrop(oDD,sGroup)DD对象在DragDrop.init中被调用。,在DragDrop.removeFromGroupregHandle(sDDId,sHandleId)DD的拖动柄在DragDrop.setHandleElId中被调用。,,内部保存了一个ygDragDropDDishandle(sDDIdsHandleId)判断拖动柄getDDById(id)idDD对象主要是根据stopPropagation和preventEvent_addListeners()使此模块可以在Event之前加载而不出错如果Event和 否则，它会每10毫秒尝试调用自身一次，如果 加载完成后再尝试2000次都没有检测到Event则放弃。调用分别 的mouseup、mousemove和window的unload、resize上相应方法在DragDrop.unreg_onUnload()unload处理方法，调用unregAll它通过augment继承了EventProvideronsubscribeDragDrop(idsGroupconfig)构造函数调用init。 ()linked元素getDragEl()drag元素init(id,sGroup,config)调用把handleMouseDown到id的mousedown；创建config.events中的对象。,用deltaX和deltaY计算保持鼠标相对于拖动元素静止的坐标；用constraint和tick修正坐标。,,把handleOnAvailable在id的available中；在不能触发startDrag的元素类型列表中加入A；调用applyConfig。handleOnAvailable()available的处理器resetConstraints和onAvailable,,setInitPosition(diffXdiffY)linked元素的初始位置把现在的坐标减去diff得到初始坐标；调用setStartPosition把现在的坐标减去diff得到初始坐标；调用setStartPosition。如果id是一个dom元素且没有id属性，则为之生成；在DDM中此拖动柄。setOuterHandleElId(id)linked元素外的拖动柄如果id是一个dom元素且没有id属性，则为之生成；在id的mousedown上handleMouseDown；在DDM中此拖动柄。注销此DD对象linked元素的mousedown；DDM中注销此对象。DDM中的lockhandleMouseDown(e,oDD)linked元素的mousedown的处理方法根据primaryButtonOnly判断鼠标的按键类型是否正确；触发b4MouseDown和mouseDown，如果其中有一个返回false，则此方法立刻返回；DDMDDDD对象的位置信息缓存；如果是合法的点击，保存此时的DD位置作为startDrag的起始位置并调用DDM根据点击元素列表和DDM的wasValidClicked判断通过delta、constraint和tick等修正的坐标。setXTicks(iStartXiTickSize)计算水平间隔点数组setYTicks(iStartYiTickSize)计算垂直间隔点数组setXConstraint(iLeft,iRight,iTickSize)设置水平方向约束setYConstraint(iUp,iDown,iTickSize)设置垂直方向约束使用initPageX和initPageYDD元素的位置时，使用initPage和lastPage计算历史的偏移值，是当前linked元素的位置为lastPagelastPageinitPage，从而保持元素的位移状态；重新计算constraint。getTick(valtickArray)tickArray中选择离valtoString()id继承DragDroptoStringYAHOO.util.DDlinked元素随着光标移动的DragDropatuoOffset(iPageX,iPageY)setDelta(iDeltaXiDeltaY)delta值alignElWithMouse(e,iPageXiPageY)根据光标位置定位dragiPage减去此基准坐标就能得出用于调整left和top的新值；调用cachePosition和autoScroll。,autoScroll(xyhw)drag窗口一个预定的距离（IE8030applyConfig()scrollb4MouseDown()startdelta值b4Drag()setDragElPos移动元素toString()idYAHOO.util.DD新创建的元素随着光标移动的DragDrop实新创建的是否与linked元素的形状一样DD(id,sGroup,config)构造函数调用init和initFrame。判断body和bodyfirstChild50毫秒在执行自己一次；在IE中新创建的有可能被select戳穿，所以在里面加个透明的iframe；它还在里面加了个有背景颜色的fakeapplyConfig()resizeFrame、centerFramedragElIdshowFrame(iPageX,iPageY)调整的大小和位置并显示它长宽加边框等于linkedb4StartDrag()showFrameendDrag()linked元素移动到dragxt的组件结构分析,Ext相信大家看了Ext2.0后,印象最深的应该是Ext的组件模式,很好的规范了组件设计,Ext的所有组件都是扩展于 ponent,而后子类扩展和集成形成了一个单根的组件树.Ext中使用组件的方式很不一样,可以看一个例子.varvarformPanel=newExtform.FormPanel({items:[{xtype:'hidden',name:' },fieldLabel: name:'name',allowBlankname:'name',allowBlank:false},fieldLabel权限',xtype:'combo',name:'auth'},fieldLabel帐号',name:'account'},fieldLabel:'name:'vtype:'},'fieldLabel启用xtype:'checkbox',name:'enabled'如此这样就能实现一个包含了很多元素的表单,itemsitemsxtype属性,xtype属性就是描述组件类的其实Ext里面的组件(Panel,FormDatepicker等等),在定义完Class之后,都会把自己ponentMgr里面.简单看一个box的组件, ponent.js文件的最后一行可 ,##//#registerType:function(xtype,cls){#types[xtype]=cls;#cls.xtype=xtype;#},##//#create:function(config,#returnnewtypes[config.xtype||defaultType](config);#}#};#}();#//thiswillbecalledalot##//shorthandtokeepthebytes#Extreg registerType这个方法,方法很简单xtypeclstypes里面,而后看到create我们应该会明白了,以后想创建组件的时候,就调用create({xtype:'box'})OK了items里面的元素是怎么创建的吧,formExt.Container类,////ponent:if(typeofcomp== }elseif(}return//ponent:恩,基本就是这样了,Ext/*************************附件是我弄的一个Ext的组件结构图,还附有各个组件的说明,希望大家喜欢,大家快下Ext2.0参照网上一个Ext2.0富客户端项目的登陆面板代码而写的,文字性的东西就不多说,代码里有完整的注释.如还不明白,欢迎讨论htt 源码地址: 或 共享里也提供。login.html !metahttp-equiv="Content-Type"content="text/html;charset=utf- title登录系统title!linkrel="stylesheet"type="text/css"href="plugins/extjs/ext-2.0/resources/css/ext- !!!typetype="text/javascript"typesrc="plugins/extjs/ext-2.0/adapter/ext/ext-base.js">!/scriptsrc="plugins/extjs/ext-2.0/ext-all.js">!/script.js">!/script='plugins/extjs/ext-2.0/resources/images/default/;;!/script{background:url(images/user.gif)no-repeat1px2px {background:url(images/key.gif)no-repeat1px2px :color}!/style!body!scriptsrc="javascript/adminLogin.js"type="text/javascript">!/script!divid="win"class="x-hidden">!/div!/body!/html!/head;;:20px:;r{!styletype="text/css"=Extform.FtotypeadminLogin.js*@author**使用Ext2.0LoginPanel=function(){varwin,f;varbuildForm=function()f=newExtform.FormPanel(给面板的body元素指定自定义的CSSbodyStyle:'padding- labelAlign://指 labelWidth: labelPad:frame:defaults:allowBlank:width:items:[给元素添加CSScls:name:fieldLabel帐号},cls:name:'password',fieldLabel:' blankText:' inputType:'password'varbuildWin=function()win=newExt.Window(把该面板绑定于win这个DIVel:title登陆系统width:height:layout:collapsible:true,defaults:{border:items:11005columnWidth://items:buttonAlign:buttons:[text登陆handler:},text:'重置',handlerreset},text:' handler:linkvarlogin=function()执行当前表单面板的submitf.form.submit({waitMsg:'正在登 submiturl:method://数据验证通过时发生的动作success:function(form,action){window.location.hrefmanage.ejf';//failure:function(form,action)Ext.MessageBox.alert('警告',actionresult.errors.msg);}清空当前表单面板内的数据varreset=function(){ varlink=function() returninit:function(){}}DOM加载完毕后,在LoginPanel作用域内执行LoginPanel.init.Ext.onReady(LoginPanel.init,LoginPanel);Ext2.0使用:Ext2.0中取消了组件的构造方法，你完全可以在ponent中执行自己的构造逻辑。假Asp.NetExt控件的各个方法的生GridExt2.0中可以更加方便的实现。12341234567*@authorEasyNet.UserGrid=Ext.extend(Ext.grid.GridPanel,{serviceURL:'',loadMask:8msg:加载用户信息 Fit: ponent:varurl=this.serviceURL;this.store=new:new url:url+ baseParams:fields:filter: reader:newroot:totalRecords:record:id: },{name:'LoginName', :{name:'UserName', :{name: ',type:'int', : {name:'RegDate',type:'date',format:'Y-m-d', : this.cm=new'dataIndex:'dataIndex:},header:'用 dataIndex:},header: dataIndex: if(v== return男 '}},header:dataIndex:this.cm.defaultSortable=varsearchBtn=newtext查找vardelBtn=newtext删除this.tbar=[searchBtn,varstore=this.bbar=newstore:disyMsg:'显示用户信息{0}-{1}/'paramNames:start:limit:} loadData:varparams=params.pageIndex=params.pageSize=onSearch:if(this.searchWindow=new onDelete:varsls=varcount=sls.length;if(count== varsurl=vargrid=this; :' :' buttons: icon: fn:function(btn, if(btn== varfilter=''; if(i== filter=new filter=filter+','+ varstore=new:new url:surl+ store.load({params:{filter:'IDIN('+filter}}}1123456789*@authorEasyNet.SearchUserWindow=Ext.extend(Ext.Window,{width:350,height:250,resizable:false,layout:'form',in:true,bodyStyle:'padding:5px;',buttonAlign:'right',:'closeAction:'hide',buttons:[{text确定},text取消ponent:function(){this.items=[{layout:'column',baseCls:'x- items:[{layout:'form',baseCls:'x- items:[{hideLabel:true,xtype:name:},xtype:name:},xtype:name: },layout:baseCls: items:xtype::'maxLength:name:},xtype::'maxLength:name:},xtype::'width:name:},xtype::'width:name: onRender:function(ct,this.buttons[1].on('click',this.onCancel,this); onSearch: onCancel:if(this.closeAction==this elseif(this.closeAction== returnloginName:this.find('name',bDate:thisfind('name',eDate:this.find('name', varo=varfilter='Status=1';if(o.ckLoginName&&o.LoginName=filter+=Stringformat('ANDLoginNameLIKE\'%{0}%\'', if(o.ckUserName&&o.userName=filter+=Stringformat('ANDUserNameLIKE\'%{0}%\'', if(o.ckDate&&o.bDate=''&&o.eDate=''&&o.eDate>=filter+=String.format('ANDRegDateBETWEEN\'{0}\'AND\'{1}\'',o.bDate,}returnfields:'*',filter:filter}loadData:function(){this.searchTo.store.baseParams=this.getCondition();}}自ExtJs的DragonFist贡献了他的创作js文件Ext_In///<referencepath="MyPath/to/Ext_Inlisense.js"注意：path是指Ext_Inlisense.js文件所在路径Extjs将以下代码另存为.html<linkrel="stylesheet"type="text/css"href="plugins/extjs/ext-2.0/resources/css/ext-all.css"/><style@importurl("plugins/extjs/ext-2.0/resources/css/ext-<scripttype="text/javascript"src="plugins/extjs/ext-<scripttype="text/javascript"src="plugins/extjs/ext-2.0/ext-<scripttype="text/javascript">s=function(ele){for(varainif((typeofeval("Ext."+a)=="function")||(typeof.wrin("<b><fontcolor='red'>Ext."+a+"类型为："+typeofeval("Ext."+a)+"成员函数有： </font></b><br/>");}if(typeof.wrin("<br/>");}}}Ext.apply：functionExt.emptyFn：functionExt.applyIf：functionExt.addBehaviors：functionExt.id：functionExt.extend：functionExt.override：functionEspace：functionExt.urlEncode：functionExt.urlDecode：functionExt.each：functionbine：functionExt.escapeRe：functionExt.callback：functionExt.getDom：functionExt.getDoc：functionExt.getBody：functionExt.getCmp：functionExt.num：functionExt.destroy：functionExt.removeNode：functionExt.type：functionExt.isEmpty：functionExt.value：functionExt.ns：functionExt.util：objectExt.grid：objectExt.dd：objectExt.tree：objectExt.data：objectExt.form：objectExt.BasicForm：functionExt.override：functionExt.FormPanel：functionExt.override：functionExt.Action：functionExt.类型为：objectExt.state：objectExt.lib：objectExt.Ajax：objectExt.override：functionExt.layout：objectExt.app：objectExt.ux：objectExt.DomHelper：objectcreateTemExt.Temte类型为：function成员函数有Ext.Temte类型为：function成员函数有TemExt.DomQuery：objectExt.select：functionExt.query：functionExt.EventManager：objectExt.onReady：functionExt.EventObjectImpl：functionExt.EventObject：objectExt.Element：functionExt.get：functionExt.fly：functionExt.select：functionExt.get：functionExt.fly：functionExt.Fx：objectpositeElement：functionpositeElementLite：functionExt.override：functionExt.select：functionExt.Ajax：objectExt.override：functionExt.Updater：functionExt.override：functionExt.UpdateManager：functionExt.override：functionExt.TaskMgr：objectExt.encode：functionExt.decode：functionExt.XTemte类型为：function成员函数有Ext.override：functionExt.KeyNav：functionExt.KeyMap：functionExt.StoreMgr：objectExt.get：functionExt.each：functionExt.override：functionponentMgr：objectExt.get：functionExt.reg：functionponent：functionExt.override：functionExt.Action：functionExt.Layer：functionExt.override：functionExt.Shadow：functionponent：functionExt.override：functionExt.SplitBar：functionExt.override：functionExt.Container：functionExt.override：functionExt.Viewport：functionExt.override：functionExt.Panel：functionExt.override：functionExt.Window：functionExt.override：functionExt.WindowGroup：functionExt.WindowMgr：objectExt.get：functionExt.each：functionExt.DataView：functionExt.override：functionExt.ColorPalette：functionExt.override：functionExt.DatePicker：functionExt.override：functionExt.TabPanel：functionExt.override：functionExt.Button：functionExt.override：functionExt.ButtonToggleMgr：objectExt.SplitButton：functionExt.override：functionExt.Button类型为：function成员函数有Ext.override：functionExt.CycleButton：functionExt.override：functionExt.Toolbar：functionExt.override：functionExt.Button：functionExt.override：functionExt.SplitButton：functionExt.override：functionExt.Button类型为：function成员函数有Ext.override：functionExt.PagingToolbar：functionExt.override：functionExt.Resizable：functionExt.override：functionExt.Editor：functionExt.override：functionExt.MessageBox：objectExt.Msg：objectExt.Tip：functionExt.override：functionExt.ToolTip：functionExt.override：functionExt.QuickTip：functionExt.override：functionExt.QuickTips：objectExt.BasicForm：functionExt.override：functionExt.FormPanel：functionExt.override：functionExt.LoadMask：functionExt.ProgressBar：functionExt.override：functionExt2.0ExtManagerExtExt的所有组件都是扩展于 ponent,而后子类扩展和集成形成了一个单ExtjsvarformPanel=newitems:xtype:name:'fieldLabel:'name:fieldLabel:xtype:name:fieldLabel:name:fieldLabel:'name:'vtype:'fieldLabel:xtype:name:}如此这样就能实现一个包含了很多元素的表单,itemsitemsjsonitemsxtypextype其实Ext里面的组件(Panel,FormDatepicker等等),在定义完Class之后,都会把自己到 ponentMgr里面.简单看一个box的组件,在ponent.jsjs 而在,ComponentMgr.jsjs//registerType:function(xtype,types[xtype]=cls.xtype=//create:function(config,returnnewtypes[config.xtype||}//thiswillbecalledalot//shorthandtokeepthebytes16.Ext.reg registerTypextypeclstypescreate我们应该会明白了,以后想创建组件的时候,就调用create({xtype:'box'})OKitemsformExt.Containerjs//ponent:if(typeofcomp== }else }return//ponent: ponentMgr.create(config,ExtExt做了一个基于ext的ajax小例子，包括从前台到的完整调用。jsp加上ext的框架。hibernate-annotationsspringdwrservletjson数据给extgriddwr的数据(dwr的部分和官方公布的方法一样)以及grid的处理jarjar.jpgjar包添加。数据库部分请根据create.sql来生成。1，在ext框架中，可以利用Ext.Panel的autoLoad属性来加载你需要的公共画面。比如你的logo，还有你的 首先，在jsp或者html页面上给出一个位置来放置你准备放置的。然后在js中间：Javavar = autoLoad:{url:'temte/Footer.html',callback:function(){},scope:this}4.5.autoLoadurlcallback在装载完毕之后干些什么，scopeJava 创建登录是需要使用的表 form newdefaultType:labelAlign: labelWidth: autoHeight: true,/* 单提交时的等待信息在这个表单之内显示，而不是弹出框*/ fieldLabel: fieldLabel:' inputType buttons:text:handler:/*表示表单提交的时候的路径。waitMsg:'户...', 表示提交过程中间的等待信息。/*服务器返回错误的信息之后我们调用的方法。onFailure}text:handler:} onFailure= action.failureType检查出了提交数据的错误，••表示客户端的数据异常*/ 用户校验成功之后的动 gotoUrl onLoginSuccess createSequencecreateInterceptorjsaop。保证一个函数的调用顺序*/Java 设置提示消息的显示方 Ext.form.Ftotype.msgTarget４、讲一下gridPanel这个控件在创建之后都有哪些可以触发，以及我们如何来设置这样的触发。察看以下gridPanel的源码，我们发现有如下的这么多 可以触发Java// @event raw eventfor简单的描述，相信大家都看得懂，就不 @param{Ext.EventObject}

//这个是 @event rawdblclickevent forth entiregrid. @param{Ext.EventObject} @event rawcontext eventfortheentire @param{Ext.EventObject} @event rawmousedownevent fort entiregrid. @param{Ext.EventObject} @event rawmouseupevent fortheentiregrid.*e @event rawmouseoverevent fort entiregrid.*e rawmouseoutevent forth entiregrid. @param{Ext.EventObject} @event rawkeypressevent forth entiregrid. @param{Ext.EventObject} @event rawkeydownevent fortheentiregrid. @param{Ext.EventObject} // @event acell @param @param{Number} @param{Number} @param{Ext.EventObject} @event beforea @param @param{Number} @param{Ext.EventObject} @event beforeaheader isclic @param @param{Number} @param{Ext.EventObject} @event when cell function following function(grid,rowIndex,columnIndex, record the fieldName= aIndex(columnIndex);//Get fieldname @param @param{Number} @param{Number} @param{Ext.EventObject} @event Fireswhen acell isdoubleclicked @param{Grid} @param{Number} @param{Number} @param{Ext.EventObject} @event Fireswhen arow isclic {Grid} a is {Grid} @param{Ext.EventObject} @event Fireswhen aheaderis {Grid} @param{Ext.EventObject} aheader{Grid}{Number}{Ext.EventObject} **t*** a is{Grid}{Number}{Ext.EventObject} @event Fireswhen acell isrig @param{Grid} @param{Number} @param{Number} @param{Ext.EventObject} @event Fireswhen aheaderis ightclicked {Grid} @param{Ext.EventObject} @event Fireswhen thebodyeleme isscrolled** a* ** @event Fireswhen theusermovesacolumn** @event Fires the @param{Grid} @param{Object}An and然后是我们怎么样来设置这些Java 设置ｇｒｉｄ的双击grid.on("rowdblclick", row 5.5，由 来使用dwr的数Java 由ｄｗｒ提供的数据创建适合ｇｒｉｄ使用的数 recordType=Ext.data.Record.create([//给出一个数据的结构 "id",type: "title",type: "content",type: "name",map:"",type: "",map:"author.", newExt.data.DWR newremoteSort: ds.load({params:{start:0,limit:10}, ext-basedefaultPostHeader:'application/x-www-form-tomcat,FilterhttpServletRequest.setCharacterEncoding("utf-urf-8,但是去获得请求中的数据(中文)，还是乱码。postext-basedefaultPostHeader:'application/x-www-form-urlencoded;charset=utf-utf-ext的表单提交是默认使用什么方式的，是否一定要指定编码方式？：JavaEye文章 ECLIPSE把所JSUTF-8格式，注意，是文件改为UTF-8，然后里面运行的非英文字符就第一种情况是因为浏览器没有将post方法请求的编码类型信息'application/x-www-form-urlencoded;charset=utf-8'放在HTTP请求头里发送出去,参考此: 第二种情况,很有可能你在httpServletRequest.setCharacterEncoding("utf-8")之前调用了httpServletRequest.getParameter(s)方法或httpServletRequest.getReader()方法或httpServletRequest.getInputStream()方法之一,导致你的httpServletRequest.setCharacterEncoding("utf-8")无效,可以参考 第三种情况,我只知道Http 默认的是ISO-8859-1,ext的我不知道,如果在客户端设置application/x-www-form-urlencoded;charset=utf-8,那么在服务器端不用httpServletRequest.setCharacterEncoding("utf-8"),httpServletRequest也是按照utf-8方式,这里Java1.varwin=new windowform.htmlform.htmlJava1.varform=new form.htmlformrenderwinform,form1,form2form.htmlExt.Windowwin,也可能是简单点说，index.html(load)>window(load)>这个window，可能是window1.html里的产生的，也可能是window2.html产生formform1.htmlform2想做一个网页,点击"新增"div将下面的页面都覆盖,div,内容为一个FormPanel,form提交到"server.php"页面,页面根据操作结果返回true,或者false,如果falseForm在接到返回信息后,truedestroy本身,否则显示错误信息,应该怎么做?form=newExt.FormPanel({labelWidth://title:'AddaNewPartnerProfile',bodyStyle:'padding:5px5px0',width:defaults:{width:150},items:[{fieldLabel:'Name',name:'name',},newExt.form.NumberField({fieldLabel:'Priority',allowBlank:buttons:[{text://应该是在这里写些什么text:handler:function(){}submit(Objectoptions):BasicFormShortcuttodoasubmitaction.options:Theoptionstopasstotheaction(seedoActionfor再看doActionsuccessThecallbackthatwillbeinvokedafterasuccessfulresponse.NotethatthisisHTTPsuccess(thetransactionwassentandreceivedcorrectly),buttheresultingresponsedatacanstillcontaindataerrors.Thefunctionispassedthefollowingparameters:form:Theformthatrequestedtheactionaction:Ext.form.ActionTheActionclass.Theresultpropertyofthisobjectmaybeexaminedtoperformcustomsuccess(failure)handlerformactionaction.result就是buttons:[{text:varaaa=form.getForm().submit({waitMsg:'SavingData...',success:function(form,action){action.result就是服务端返回的结果,json}text:'Cancel',handler:function(){}FormPanel的urlsubmit({url'server.php'})js代码：vartask={run:aaa,interval:5000}//turnonvalidationerrorsbesidethefieldgloballyExt.form.Ftotype.msgTarget='side';varcm=new vards=new:newExt.data.Httpreader:new vargrid=newExt.grid.GridPanel({}5数据格式： AddNewPartnerProfiledivJavavar =.gevarobj =.body;var =var =Cover.style.height Cover.style.width width Cover.style.disy renderFormPanelJavaform //code add 取得的页面大小不对,无论是用scrollHeight,Height等,取得的heightIE,FF死的数值都不起作用,maskDiv的高度只能到当前窗口的高度,不能包括滚动条FormPanelFormheight,width0,innerHeight,innerWidthFormPanelleft,topIEFFExt.MessageBox.alert()一样大家可以看下点击按钮后打开的FormPanel,我增加了3个field,但是第一个ID仅是用来做edit的时候存当前记录的ID,提交的时候供服务器使用的,应该textboxhidden,labelhidden这份目的在于对TabPanel类进行一次快速介绍。所提及的知识都是来自我对TabPanel范例、Ext源码和API文档的学习。到本文最后，你应该完成好一TabPanel，TabPaneltab，URLtabStep1:创建HTML会用下列HTML，和Ext一齐构建一个基本的结构。这些内容到一个tptut.hemlext-all.css,ext-base.js,和ext-all.jsExttab_actions.js:Java<title>TabPanel<!-- CSS