FineUI 官方论坛

标题: fineui什么时候能加上TreePanel的拖拽功能？ [打印本页]
作者: の‵℡閊鳮﹌    时间: 2013-11-16 17:25
标题: fineui什么时候能加上TreePanel的拖拽功能？
  1. // JScript 文件
  2. Ext.namespace('Ext.test');

  4. Ext.test.Panel = function() {

  6.   this.right = new Ext.Panel({
  7.         ddGroup: 'TreePanelDDGroup',
  8.                 border : true,
  9.                 id : 'right',
  10.                 title:'Panel',
  11.                 bodyStyle : 'padding: 5px',
  12.                 defaults : {
  13.                 bodyStyle : 'padding-left: 5px'
  14.                 }
  15.       });

  17.   this.left = new Ext.tree.TreePanel({
  18.         ddGroup: 'TreePanelDDGroup',
  19.         rootVisible: false,
  20.         width: 200,
  21.         split:true,
  22.         enableDD:true,
  23.         title: "Drag Tree"
  24.         /*loader:new Ext.tree.TreeLoader({
  25.            dataUrl:"Dtree.aspx"
  26.         }),
  27.         root:new Ext.tree.AsyncTreeNode({
  28.            id:'rootid',
  29.            text:'公司'
  30.         })*/
  31.     });
  32.    
  33.     //this.left.expandAll();

  35.   function buildTree(config){
  36.     if (!config) return null;
  37.     var c = config.children;
  38.     config.leaf = c ? false : true;
  39.     var child, node = new Ext.tree.TreeNode(config);
  40.     if (node && c && c.length) {
  41.       for (var i = 0; i < c.length; i++) {
  42.         child = buildTree(c[i]);
  43.         if (child) node.appendChild(child);
  44.         }
  45.       }
  46.     return node;
  47.     }

  49.   

  51. var rootDrag = buildTree({
  52.     id : 'rootDrag',
  53.     text: 'rootDrag',
  54.     children: [
  55.       {id: 1, text: 'childnode1'},
  56.       {id: 2, text: 'childnode2'},
  57.       {id: 3, text: 'childnode3'},
  58.       {id: 4, text: 'childnode4'},
  59.       {id: 5, text: 'childnode5'}                        
  60.       ]
  61.     });

  63.   this.left.setRootNode(rootDrag);

  65.   this.right.on('render', this.onRightRender, this);
  66.   
  67.   Ext.test.Panel.superclass.constructor.call(this, {
  68.                                 renderTo : 'pageContainer',
  69.                                 bodyStyle : 'padding: 5px',
  70.                                 height : 500,
  71.                                 width : 760,
  72.                                 title : 'Demo',
  73.                                 layout : 'table',
  74.                                 defaults : {
  75.                                         height : 200,
  76.                                         width : 200
  77.                                 },
  78.                                 items : [this.left, this.right]
  79.                         });
  80. };

  82. Ext.extend(Ext.test.Panel, Ext.Panel, {
  83.                         onRightRender : function(cmp) {
  84.                                 var sourcePanelDropTarget = new Ext.dd.DropTarget(cmp.body.dom,
  85.                                                 {
  86.                                                     ddGroup: 'TreePanelDDGroup',
  87.                                                         notifyDrop : function(ddSource, e, data) {
  88.                                                             Ext.MessageBox.alert(data.node);
  89.                                                                 cmp.add(new Ext.Panel({
  90.                                                                         boder:true,
  91.                                                                         id:data.node,
  92.                                                                         bodyStyle : 'padding: 5px',
  93.                                                 defaults : {
  94.                                                 bodyStyle : 'padding-left: 5px'
  95.                                                 }
  96.                                             }));
  97.                                                                 cmp.doLayout();
  98.                                                             data.node.parentNode.removeChild(data.node);
  99.                                                                 return (true);
  100.                                                         }
  101.                                                 });
  102.                         }
  103.                 });

  105. Ext.onReady(function() {
  106.                         Ext.QuickTips.init();
  107.                         var panel = new Ext.test.Panel();
  108.                 });
复制代码
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="dragTreedropPanel.aspx.cs" Inherits="dragTreedropPanel" %>

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head id="Head1" runat="server">
  7.     <title>无标题页</title>
  8.     <link href="ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
  9.     <script src="ExtJS/adapter/ext/ext-base.js" type="text/javascript"></script>
  10.     <script src="ExtJS/ext-all.js" type="text/javascript"></script>
  11.     <script src="js/JScript.js" type="text/javascript"></script>   
  12. </head>
  13. <body>
  14. <div id="pageContainer"></div>
  15. </body>
  16. </html>
复制代码







欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/) Powered by Discuz! X3.4