`
luck332
  • 浏览: 84921 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

EXTDWRSpringCC++ 
阅读更多
  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. });
分享到：
| arguments,callee&caller
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics