【文章內(nèi)容簡(jiǎn)介】 )清除約束使用initPageX和initPageY計(jì)算邊界值。resetConstraints()重置約束當(dāng)手工改動(dòng)過(guò)DD元素的位置時(shí)，使用initPage和lastPage計(jì)算歷史的偏移值，是當(dāng)前l(fā)inked元素的位置為lastPage，再使用lastPage減去偏移值得到新的initPage，從而保持元素的位移狀態(tài)；重新計(jì)算constraint。getTick(val, tickArray)在tickArray中選擇離val最近的點(diǎn)toString()打印id繼承DragDrop，只覆蓋了toString方法。scroll如果為真，當(dāng)元素拖動(dòng)的窗口邊界時(shí)會(huì)自動(dòng)滾屏。atuoOffset(iPageX, iPageY)setDelta(iDeltaX, iDeltaY)設(shè)置delta值setDragElPos(iPageX, iPageY)alignElWithMouse(e,iPageX, iPageY)根據(jù)光標(biāo)位置定位drag元素調(diào)用一次setXY，然后緩存了此元素在left和top為零時(shí)的基準(zhǔn)坐標(biāo)。下次調(diào)整坐標(biāo)時(shí)，可以用iPage減去此基準(zhǔn)坐標(biāo)就能得出用于調(diào)整left和top的新值；調(diào)用cachePosition和autoScroll。cachePosition(iPageX, iPageY)更新lastPageautoScroll(x, y, h, w)當(dāng)drag元素被拖動(dòng)到超出窗口邊界的位置時(shí)自動(dòng)滾屏利用拖動(dòng)元素的邊超越窗口的可視邊界時(shí)，判斷光標(biāo)離邊界的距離是否小于閥值，如果是則滾動(dòng)窗口一個(gè)預(yù)定的距離（IE為80，其他為30）；此函數(shù)在向上滾和向左滾的實(shí)現(xiàn)上故意不考慮光標(biāo)問(wèn)題，使得在邊界情況下也能表現(xiàn)正常。applyConfig()調(diào)用父類構(gòu)造函數(shù)和設(shè)置scrollb4MouseDown()記錄start和delta值b4Drag()調(diào)用setDragElPos移動(dòng)元素toString()打印idresizeFrame新創(chuàng)建的代理是否與linked元素的形狀一樣。centerFrame新創(chuàng)建代理的中心是否與光標(biāo)對(duì)齊。DDProxy(id, sGroup, config)構(gòu)造函數(shù)調(diào)用init和initFrame。createFrame()創(chuàng)建代理，如果沒(méi)有準(zhǔn)備好，則延遲50毫秒在執(zhí)行自己一次；在IE中新創(chuàng)建的代理有可能被select戳穿，所以在里面加個(gè)透明的iframe；它還在里面加了個(gè)有背景顏色的fake層，不過(guò)具體用意沒(méi)看明白它的注釋。initFrame()調(diào)用createFrameapplyConfig()調(diào)用父類構(gòu)造函數(shù)和設(shè)置resizeFrame、centerFrame和dragElIdshowFrame(iPageX, iPageY)調(diào)整代理的大小和位置并顯示它_resizeProxy()調(diào)用代理大小長(zhǎng)寬加邊框等于linked元素的大小。b4MouseDown()記錄start和delta值不知道為啥要覆蓋DD的，兩個(gè)方法好像一樣。b4StartDrag()調(diào)用showFrameb4EndDrag()隱藏代理endDrag()把linked元素移動(dòng)到drag元素的位置上toString()打印idxt的組件結(jié)構(gòu)分析,附Ext組件結(jié)構(gòu)圖 , 印象最深的應(yīng)該是Ext的組件模式,很好的規(guī)范了組件設(shè)計(jì),用Manager的統(tǒng)一管理,., 而后子類擴(kuò)展和集成形成了一個(gè)單根的組件樹(shù).Ext中使用組件的方式很不一樣,可以看一個(gè)例子.varformPanel=new({items:[{xtype:39。hidden39。,name:39。domainId39。},{fieldLabel:39。姓名39。,name:39。name39。,allowBlank:false},{fieldLabel:39。權(quán)限39。,xtype:39。bo39。,name:39。auth39。},{fieldLabel:39。帳號(hào)39。,name:39。account39。},{fieldLabel:39。Email39。,name:39。39。,vtype:39。39。},{fieldLabel:39。啟用39。,xtype:39。checkbox39。,name:39。enabled39。}]})。如此這樣就能實(shí)現(xiàn)一個(gè)包含了很多元素的表單, items里面定義了表單要顯示的輸入框等組件,但是items里面僅僅是簡(jiǎn)單的json對(duì)象,怎么能顯示出來(lái)各種不同的表單元素呢?我們注意到items的每一個(gè)元素幾乎都有一個(gè)xtype屬性,這個(gè)xtype屬性就是描述組件類的關(guān)鍵.其實(shí)Ext里面的組件(Panel, Form Datepicker等等), 在定義完Class之后, . 簡(jiǎn)單看一個(gè)box的組件, :(39。box39。,)。而在, //privateregisterType:function(xtype,cls){types[xtype]=cls。=xtype。},//privatecreate:function(config,defaultType){returnnewtypes[||defaultType](config)。}}。}()。//thiswillbecalledalotinternally,//shorthandtokeepthebytesdown=其實(shí)是執(zhí)行了registerType 這個(gè)方法,方法很簡(jiǎn)單, 把xtype這個(gè)名字和對(duì)應(yīng)的cls放到types里面, 而后看到create 我們應(yīng)該會(huì)明白了, 以后想創(chuàng)建組件的時(shí)候,就調(diào)用 create({xtype: 39。box39。}) 就OK了那么我們看看items里面的元素是怎么創(chuàng)建的吧, , 恩,就在這個(gè)類里呢:1.//private2.lookupComponent:function(p){3.if(typeofp==39。string39。){4.return(p)。5.}elseif(!){6.return(p)。7.}8.returnp。9.},10.11.//private12.createComponent:function(config){13.return(config,)。14.},恩,基本就是這樣了, 希望對(duì)大家理解Ext有所幫助/************************* ***********************/附件是我弄的一個(gè)Ext的組件結(jié)構(gòu)圖, 還附有各個(gè)組件的說(shuō)明, 希望大家喜歡, 大家快下呀.... ,文字性的東西就不多說(shuō),歡迎討論源碼下載地址: 或:52317037共享里也提供下載。效果如下圖所示:: html xmlns = head meta equiv =ContentType content =text/html。charset=utf8 / title 登錄系統(tǒng) / title link rel =stylesheet type =text/css href =plugins/extjs/ / link rel =stylesheet type =text/css href = / script type =text/javascript src =plugins/extjs/ / script script type =text/javascript src =plugins/extjs/ / script script type =text/javascript src =plugins/extjs/ / script script type =text/javascript = 39。plugins / extjs / ext / resources / images / default / 39。()。 // 初始化鼠標(biāo)停留時(shí)的顯示框 = 39。side39。/ script style type =text/css .user { background : url(images/)norepeat1px2px 。 } .key { background : url(images/)norepeat1px2px 。 } .key,.user { backgroundcolor : FFFFFF 。 paddingleft : 20px 。 fontweight : bold 。 color : 000033 。 } / style / head body script src =javascript/ type =text/javascript / script div id =win class =xhidden / div / body / html /**//***@author冷雨***/LoginPanel=function(){varwin,f。varbuildForm=function(){//構(gòu)建一個(gè)表單面板容器f=new({//給面板的body元素指定自定義的CSS樣式信息bodyStyle:39。paddingtop:6px39。,//容器中元素的默認(rèn)類型defaultType:39。textfield39。,//標(biāo)簽的默認(rèn)對(duì)齊方式labelAlign:39。right39。,//指定標(biāo)簽的默認(rèn)長(zhǎng)度labelWidth:55,//標(biāo)簽與字段錄入框之間的空白labelPad:0,//窗口是否顯示背景色frame:true,//容器中組件默認(rèn)統(tǒng)一配置選項(xiàng)defaults:{//驗(yàn)證字段是否能為空allowBlank:false,//字段寬度width:158},//指定容器中的元素items:[{//給元素添加CSS樣式cls:39。user39。,//元素的名稱name:39。userName39。,//指定字段的標(biāo)簽fieldLabel:39。帳號(hào)39。,//為空時(shí)提示信息blankText:39。帳號(hào)不能為空39。},{cls:39。key39。,name:39。password39。,fieldLabel:39。密碼39。,blankText:39。密碼不能為空39。,inputType:39。password39。}]})。}。varbuildWin=function(){//構(gòu)建一個(gè)窗口面板容器win=new({//把該面板綁定于win這個(gè)DIV對(duì)象上el:39。win39。,//窗口面板標(biāo)題title:39。登陸系統(tǒng)39。,//窗口面板寬度width:265,16