ext portal+dwr+spring实现个性主页面拖拉效果的核心代码

1. 个性化主页设置，左边是一棵树，左边是一个portal.点击树加载到portal中去，实现了与数据库的交互.
2. ccom.dzf.indexset= function (config){
3. Ext.apply( this ,config);
4. this .init();
5. };
6. Ext.extend(com.dzf.indexset,Ext.util.Observable,{
7. init: function (){
8. this .createWin();
9. },
10. createWin: function (){
11. var proxy= this ;
12. var win= new Ext.Window({
13. height:450,
14. width:800,
15. items:[{
16. xtype: 'tabpanel' ,
17. border: false ,
18. activeTab:0,
19. defaults:{
20. height:380
21. },
22. items:[{
23. title: '主页设置' ,
24. layout: 'column' ,
25. border: false ,
26. items:[{
27. columnWidth:.2,
28. title: '模块列表' ,
29. defaults:{
30. height:380
31. },
32. items:[ this .getTree()]
33. },{
34. xtype: 'portal' ,
35. columnWidth:.8,
36. id: 'portalset' ,
37. defaults:{
38. height:380
39. }
40. }]
41. },{
42. title: '设置密码'
43. }]
44. }],
45. buttons:[{
46. text: '确定' ,
47. handler: function (){
48. win.close();
49. var portal=Ext.getCmp(proxy.panelid);
50. //portal.desto;
51. items=portal.items.items[0].destroy();
52. //for(vari=0;i<items.length;i++){
53. //varp=items[i].items.items;
54. //items[i].doLayout();
55. for(varj=0;j<p.length;j++){
56. count++;
57. }
58. //}
59. //portal.doLayout();
60. new com.dzf.index({
61. panelid: 'center-panel' ,
62. margins: '35555' ,
63. style: 'padding:0px10px0px10px'
64. });
65. }
66. }]
67. });
68. win.show();
69. },
70. getTree: function (){
71. var tree= new Ext.tree.TreePanel({
72. border: false ,
73. onlyLeafCheckable: false ,
74. checkModel: "multiple" ,
75. id: 'tree' ,
76. autoScroll: true ,
77. enableDD: false ,
78. containerScroll: true ,
79. rootVisible: false ,
80. loader: new Ext.tree.DWRTreeLoader({
81. dwrCall:indexportalService.getUserModule,
82. getParams: function (node){
83. return {};
84. },
85. baseAttrs:{
86. uiProvider:Ext.tree.TreeCheckNodeUI
87. }
88. }),
89. tools:[{
90. id: 'refresh' , //根据id的不同会出现不同的按钮
91. handler: function (){
92. var tree=Ext.getCmp( 'extExample-tree-checkboxTree' );
93. tree.root.reload(); //让根节点重新加载
94. tree.body.mask( '数据加载中……' , 'x-mask-loading' ); //给tree的body加上蒙版
95. tree.root.expand( true , false , function (){
96. tree.body.unmask(); //全部展开之后让蒙版消失
97. indexportalService.getPortalColumns(com.dzf.indexset.prototype.BuildPortColumn);
98. });
99. }
100. }]
101. });
103. var root= new Ext.tree.AsyncTreeNode({
104. text: '根' ,
105. draggable: false
106. });
108. tree.setRootNode(root);
109. root.expand( true , false , function (){
110. indexportalService.getPortalColumns(com.dzf.indexset.prototype.BuildPortColumn);
111. });
112. //root.loadComplete(true,false,function(){
113. //indexportalService.getPortalColumns(com.dzf.indexset.prototype.BuildPortColumn);
114. //});
115. treeCheckAction= function (node,checked){
116. var id=node.id;
117. var title=node.text;
118. var portlet=Ext.getCmp(id+ "set" );
119. if (checked){
120. if (portlet){
121. return ;
122. }
123. var count=0;
124. var portal=Ext.getCmp( "portalset" ).items.items;
125. for ( var i=0;i<portal.length;i++){
126. var p=portal[i].items.items;
127. for ( var j=0;j<p.length;j++){
128. count++;
129. }
130. }
131. if (count<=4){
132. var order=0;
133. var parent=Ext.getCmp( "portalcolumn" +node.attributes.userid
134. +node.attributes.modulecolumn+ "set" );
135. var panel= new Ext.ux.Portlet({
136. id:id+ "set" ,
137. title:title
138. });
139. if (!parent){
140. parent=Ext.getCmp( "portalset" ).items.items[0];
141. }
142. parent.add(panel);
143. parent.doLayout();
144. order=parent.items.items.length-1;
145. var params={
146. id:id,
147. order:order,
148. columnwidth:parent.columnWidth
149. };
150. indexportalService.savePortlet(params);
151. } else {
152. node.ui.checkbox.checked= false ;
153. Ext.MessageBox.alert( "提示" , "你最多能选择5个！" )
154. }
155. } else {
156. com.dzf.indexset.prototype.removePorlet(portlet);
157. }
158. }
159. tree.on( "check" ,treeCheckAction, this );
160. return tree;
161. },
162. tools:[{
163. id: 'close' ,
164. handler: function (e,target,panel){
165. com.dzf.indexset.prototype.removePorlet(panel);
166. }
167. }],
168. removePorlet: function (panel){
169. //Ext.Msg.confirm('删除模块','您确认要删除"'+panel.title+'"吗?',
170. //function(btn,
171. //text){
172. //if(btn=='yes'){
173. var id=panel.id;
174. var columnid=panel.ownerCt.id;
175. var params={
176. id:id,
177. columnid:columnid
178. };
179. //发送删除数据的请求
180. indexportalService.removePorlet(params, function (data){
181. var json=Ext.util.JSON.decode(data);
182. if (json.success){
183. var id=panel.id;
184. var parent=panel.ownerCt;
185. parent.remove(panel, true );
186. parent.doLayout();
187. if (id.indexOf( "set" )>0)
188. id=id.substring(0,id.indexOf( "set" ));
189. Ext.getCmp( "tree" ).getNodeById(id).ui.checkbox.checked= false ;
190. } else {
191. Ext.Msg.alert( 'WebMessage' ,panel.title+ '删除失败！' );
192. }
193. });
194. //}else{
195. //return;
196. //}
197. //});
198. },
199. BuildPortColumn: function (data){
200. var jsonData=Ext.util.JSON.decode(data);
201. for ( var i=0;i<jsonData.length;i++){
202. var columnid=jsonData[i].fuserprocolumn_id+ "set" ;
203. var columnwidth=jsonData[i].fuserprocolumn_width/100;
204. var portal=Ext.getCmp( "portalset" );
205. var PortalColumn= new Ext.ux.PortalColumn({
206. id:columnid,
207. columnWidth:columnwidth,
208. style: 'padding:10px010px10px' ,
209. defaults:{
210. tools:com.dzf.indexset.prototype.tools,
211. height:60
212. }
213. });
214. portal.add(PortalColumn);
215. portal.doLayout();
216. }
217. indexportalService
218. .getPortalPortlet(com.dzf.indexset.prototype.BuildPortletSet);
219. },
220. BuildPortletSet: function (data){
221. var jsonData=Ext.util.JSON.decode(data);
222. for ( var i=0;i<jsonData.length;i++){
223. var columnid=jsonData[i].fuserprocolumn_id+ "set" ;
224. var id=jsonData[i].modelcode+ "set" ;
225. var title=jsonData[i].modelname;
226. var order=jsonData[i].fuserprofile_order;
227. var parent=Ext.getCmp(columnid);
228. if (!parent){
229. parent=Ext.getCmp( "portalset" ).items.items[0];
230. }
231. var panel= new Ext.ux.Portlet({
232. id:id,
233. title:title
234. });
235. parent.add(panel);
236. parent.doLayout();
237. if (id.indexOf( "set" )>0)
238. id=id.substring(0,id.indexOf( "set" ));
239. Ext.getCmp( "tree" ).getNodeById(id).ui.checkbox.checked= true ;
240. }
241. }
242. })
245. protal源码改了下可以进行移动保存
247. Ext.ux.Portlet=Ext.extend(Ext.Panel,{
248. anchor: '100%' ,
249. collapsible: true ,
250. draggable: true ,
251. cls: 'x-portlet'
252. });
253. Ext.reg( 'portlet' ,Ext.ux.Portlet);
255. Ext.ux.PortalColumn=Ext.extend(Ext.Container,{
256. layout: 'anchor' ,
257. autoEl: 'div' ,
258. defaultType: 'portlet' ,
259. cls: 'x-portal-column'
260. });
261. Ext.reg( 'portalcolumn' ,Ext.ux.PortalColumn);
263. Ext.ux.Portal=Ext.extend(Ext.Panel,{
264. layout: 'column' ,
265. autoScroll: true ,
266. cls: 'x-portal' ,
267. defaultType: 'portalcolumn' ,
269. initComponent: function (){
270. Ext.ux.Portal.superclass.initComponent.call( this );
271. this .addEvents({
272. validatedrop: true ,
273. beforedragover: true ,
274. dragover: true ,
275. beforedrop: true ,
276. drop: true
277. });
278. },
280. initEvents: function (){
281. Ext.ux.Portal.superclass.initEvents.call( this );
282. this .dd= new Ext.ux.Portal.DropZone( this ,
283. this .dropConfig);
284. },
286. beforeDestroy: function (){
287. if ( this .dd){
288. this .dd.unreg();
289. }
290. Ext.ux.Portal.superclass.beforeDestroy.call( this );
291. }
292. });
293. Ext.reg( 'portal' ,Ext.ux.Portal);
295. Ext.ux.Portal.DropZone= function (portal,cfg){
296. this .portal=portal;
297. Ext.dd.ScrollManager.register(portal.body);
298. Ext.ux.Portal.DropZone.superclass.constructor.call( this ,
299. portal.bwrap.dom,cfg);
300. portal.body.ddScrollConfig= this .ddScrollConfig;
301. };
303. Ext.extend(Ext.ux.Portal.DropZone,Ext.dd.DropTarget,{
304. ddScrollConfig:{
305. vthresh:50,
306. hthresh:-1,
307. animate: true ,
308. increment:200
309. },
311. createEvent: function (dd,e,data,col,c,pos){
312. return {
313. portal: this .portal,
314. panel:data.panel,
315. columnIndex:col,
316. column:c,
317. position:pos,
318. data:data,
319. source:dd,
320. rawEvent:e,
321. status: this .dropAllowed
322. };
323. },
325. notifyOver: function (dd,e,data){
326. var xy=e.getXY(),portal= this .portal,px=dd.proxy;
328. //casecolumnwidths
329. if (! this .grid){
330. this .grid= this .getGrid();
331. }
333. //handlecasescrollwherescrollbarsappearduringdrag
334. var cw=portal.body.dom.clientWidth;
335. if (! this .lastCW){
336. this .lastCW=cw;
337. } else if ( this .lastCW!=cw){
338. this .lastCW=cw;
339. portal.doLayout();
340. this .grid= this .getGrid();
341. }
343. //determinecolumn
344. var col=0,xs= this .grid.columnX,cmatch= false ;
345. for ( var len=xs.length;col<len;col++){
346. if (xy[0]<(xs[col].x+xs[col].w)){
347. cmatch= true ;
348. break ;
349. }
350. }
351. //nomatch,fixlastindex
352. if (!cmatch){
353. col--;
354. }
356. //findinsertposition
357. var p,match= false ,pos=0,c=portal.items.itemAt(col),items=c.items.items;
359. for ( var len=items.length;pos<len;pos++){
360. p=items[pos];
361. var h=p.el.getHeight();
362. if (h!==0&&(p.el.getY()+(h/2))>xy[1]){
363. match= true ;
364. break ;
365. }
366. }
368. var overEvent= this .createEvent(dd,e,data,col,c,match&&p
369. ?pos
370. :c.items.getCount());
372. if (portal.fireEvent( 'validatedrop' ,overEvent)!== false
373. &&portal.fireEvent( 'beforedragover' ,overEvent)!== false ){
375. //makesureproxywidthisfluid
376. px.getProxy().setWidth( 'auto' );
378. if (p){
379. px.moveProxy(p.el.dom.parentNode,match?p.el.dom: null );
380. } else {
381. px.moveProxy(c.el.dom, null );
382. }
384. this .lastPos={
385. c:c,
386. col:col,
387. p:match&&p?pos: false
388. };
389. this .scrollPos=portal.body.getScroll();
391. portal.fireEvent( 'dragover' ,overEvent);
393. return overEvent.status;;
394. } else {
395. return overEvent.status;
396. }
398. },
400. notifyOut: function (){
401. delete this .grid;
402. },
404. notifyDrop: function (dd,e,data){
405. delete this .grid;
406. if (! this .lastPos){
407. return ;
408. }
409. var c= this .lastPos.c,col= this .lastPos.col,pos= this .lastPos.p;
411. var dropEvent= this .createEvent(dd,e,data,col,c,pos!== false
412. ?pos
413. :c.items.getCount());
415. if ( this .portal.fireEvent( 'validatedrop' ,dropEvent)!== false
416. && this .portal.fireEvent( 'beforedrop' ,dropEvent)!== false ){
418. dd.proxy.getProxy().remove();
419. dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
420. if (pos!== false ){
421. c.insert(pos,dd.panel);
422. } else {
423. c.add(dd.panel);
424. }
426. /**
427. *取得当前portlet在portalcolumn中的索引
428. */
429. var index=0;
430. var portletId=dd.panel.id;
431. if (pos!= false ){
432. var portlets=c.items;
433. for ( var i=0;i<portlets.length;i++){
434. if (c.items.itemAt(i).id===portletId){
435. index=i;
436. break ;
437. }
438. }
439. } else {
440. if (pos.toString()== '0' ){
441. index=0;
442. } else {
443. index=c.items.length-1;
444. }
445. }
447. c.doLayout();
449. //更新移动后的Portlet
450. var params={
451. id:dd.panel.id,
452. columnid:c.id,
453. forder:index
454. };
455. indexportalService.movePortlet(params);
457. this .portal.fireEvent( 'drop' ,dropEvent);
459. //scrollpositionislostondrop,fixit
460. var st= this .scrollPos.top;
461. if (st){
462. var d= this .portal.body.dom;
463. setTimeout( function (){
464. d.scrollTop=st;
465. },10);
466. }
468. }
469. delete this .lastPos;
470. },
472. //internalcacheofbodyandcolumncoords
473. getGrid: function (){
474. var box= this .portal.bwrap.getBox();
475. box.columnX=[];
476. this .portal.items.each( function (c){
477. box.columnX.push({
478. x:c.el.getX(),
479. w:c.el.getWidth()
480. });
481. });
482. return box;
483. },
485. //unregisterthedropzonefromScrollManager
486. unreg: function (){
487. //Ext.dd.ScrollManager.unregister(this.portal.body);
488. Ext.ux.Portal.DropZone.superclass.unreg.call( this );
489. }
490. });