`
luck332
  • 浏览: 86386 次
  • 性别: 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
评论
发表评论

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

相关推荐

    EXT2+DWR+SPRING实现树

    "EXT2+DWR+SPRING实现树"这个项目很可能是结合了这三个技术来构建一个Web应用，其中EXT2可能被用作服务器端的文件系统，用于存储和管理数据。DWR则作为前端与后端交互的桥梁，使得JavaScript可以实时获取和更新...

    ext2.0+Hibernate+dwr+spring列子

    这个名为"ext2.0+Hibernate+dwr+spring列子"的项目，就是一个很好的实例，展示了如何将这些技术结合在一起，实现一个基础的CRUD（创建、读取、更新、删除）操作。下面我们将详细探讨这些技术及其相互作用。 首先，...

    OA办公自动化管理系统（Struts1.2+Hibernate3.0+Spring2+DWR）

    公文管理、申请审批、公告管理、会议管理、权限管理、个人办公、客户管理、人事等等。项目技术：Struts1.2 + Hibernate3.0 + Spring2 +DWR。java毕业设计 jsp毕业设计 ssh毕业设计

    ext+dwr+spring案例

    这个案例中，EXT 提供了丰富的用户界面组件，DWR (Direct Web Remoting) 实现了浏览器与服务器之间的异步通信，而Spring框架则作为整个应用的依赖注入和管理核心。 EXT 是一个JavaScript库，它提供了大量的可定制的...

    ext+Json+dwr+spring+hibernate整合项目实例与资源

    这个"ext+Json+dwr+spring+hibernate整合项目实例与资源"就是一个典型的案例，它展示了如何将这五个关键技术融合在一起，以实现一个功能强大的前端和后端交互系统。让我们详细探讨这些技术及其整合方式。 1. **...

    掏钱学EXT2.0+DWR中文文档+Spring Framework 开发参考手册

    EXT2.0、DWR和Spring Framework是Java开发领域中的三个关键技术和框架，它们在构建高效、可扩展的Web应用程序中发挥着重要作用。下面将详细解释这三个技术，并探讨它们在实际开发中的应用。 EXT2.0是EXT JS的一个...

    EXT + DWR + Struts + Hibernate + Spring Demo

    EXT + DWR + Struts + Hibernate + Spring 是一个经典的Java Web开发框架组合，它们共同构建了一个强大、灵活且高效的Web应用程序。以下是对这些技术及其在Demo中的应用的详细解释： 1. **EXT**：EXT（现称为Sencha...

    Ext+dwr+spring做的例子程序

    【标题】"Ext+dwr+spring做的例子程序"是一个整合了三个关键技术的示例应用，主要展示了如何在Java Web开发中结合使用EXTJS（Ext）前端框架、Direct Web Remoting (DWR) 和Spring框架。这三个技术在现代企业级应用...

    struts2+hibernate+spring+dwr整合

    Struts2、Hibernate、Spring 和 DWR 是四个在Java Web开发中非常重要的框架，它们各自在不同的领域提供了强大的功能，并且能够通过整合实现更高效、更灵活的应用开发。接下来，我们将详细探讨这些技术以及它们如何...

    ext+json+dwr+spring+hibernate整合项目实例与相关资源

    本项目实例是关于"ext+json+dwr+spring+hibernate"的整合，这是一个常见的技术栈组合，用于创建功能丰富的Web应用程序。下面将详细解释这些技术及其整合方式。 1. **EXT**：EXT是一个基于JavaScript的富客户端框架...

    ext2+spring+hibernate+dwr.rar_dwr MenuManage.js_ext2 ja

    "ext2.0+Hibernate+dwr+spring列子" 文件可能是项目的源代码，包含了具体实现这些技术集成的示例代码。 现在，让我们深入探讨一下这些技术： 1. **Ext JS（ext2）**：这是一个用于构建富互联网应用程序（RIA）的...

    疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发（part01）

    《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是疯狂Java体系丛书之一，前8章基本以XHTML、JavaScript和DOM编程为主，无须任何基础即可阅读；第9章以后的内容则需要掌握Spring、Hibernate等Java ...

    Struts1.2+Hibernate3.0+Spring2+DWR OA 办公自动化管理系统

    本系统采用经典的SSH（Struts1.2、Hibernate3.0、Spring2）框架与DWR（Direct Web Remoting）技术进行构建，实现了后端与前端的高效交互。 **Struts1.2** 是一款基于MVC（Model-View-Controller）设计模式的Java ...

    ssh+ext+json+dwr技术实现的动态树

    这个名为“ssh+ext+json+dwr技术实现的动态树”的项目结合了这些技术，为我们提供了一个生动的示例，展示了如何在实际项目中有效地整合它们。 SSH（Spring、Struts、Hibernate）是Java Web开发的三大框架，它们各自...

    spring+ext+dwr.rar_ext dwr_ext java_java 用户管理_spring e_spring ex

    《Spring+Ext+DWR整合应用详解：用户管理与实战》 在当今的Web开发领域，Spring、Ext和Direct Web Remoting (DWR) 是三种非常重要的技术，它们各自在不同的层面发挥着关键作用。Spring作为Java企业级应用的框架，...

    struts2+hibernate+spring+dwr（用户注册）

    Struts2、Hibernate、Spring 和 DWR 是四个在 Java Web 开发中广泛应用的框架和技术，它们结合在一起可以构建高效、可维护的用户注册系统。以下是对这些技术的详细解释及其在用户注册中的应用： 1. **Struts2**：这...

    OA办公自动化管理系统（Struts1.2+Hibernate3.0+Spring2+DWR）.rar

    SpringBoot 毕业设计，SpringBoot 课程设计，基于SpringBoot+Vue开发的，含有代码注释，新手也可看懂。ssm整合开发，小程序毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：...

    struts2+spring+hibernate+dwr

    Struts2、Spring、Hibernate和DWR是Java Web开发中常用的四大框架，它们各自负责不同的功能，协同工作能构建出高效、灵活的企业级应用。在这个小实例中，开发者结合这四个框架来展示了一个完整的后端架构。 Struts2...

    ext + dwr proxy

    具体来说，`dwrproxy.js`可能是这个示例的核心文件，它实现了EXT和DWR之间的代理配置和通信。 在EXT中，DWR通常被用来作为后端数据源，为EXT的组件如Grid、Tree或Form提供数据。`dwrproxy.js`文件可能包含了以下...

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