2012-09-10 57 views
0

嘿,拖动并从电网到树下拉不添加树节点

我希望能够从网格拖动项目(书签)在树上(类别),但我不希望将删除的书签项添加到类别树中作为新节点,我不希望它从网格中删除。我只想抓住dropnode事件并更新书签的类别标识。

这怎么办?我已经走到这一步,是这样的:
http://jsfiddle.net/suamikim/A3T6W/

Ext.onReady(function() { 
    // define model for tree 
    Ext.define('Category', { 
     extend: 'Ext.data.Model', 

     fields: [ 
      { name: 'id',   type: 'int' }, 
      { name: 'parentCatId', type: 'int' }, 
      { name: 'name',   type: 'string' } 
     ] 
    }); 

    // define model for grid 
    Ext.define('Bookmark', { 
     extend: 'Ext.data.Model', 

     fields: [ 
      { name: 'id',  type: 'int' }, 
      { name: 'catId', type: 'int' }, 
      { name: 'title', type: 'string' }, 
      { name: 'url',  type: 'string' } 
     ] 
    }); 

    // Create the tree-panel 
    var catTree = Ext.create('Ext.tree.Panel', { 
     itemId: 'catTree', 

     title: 'Categories', 
     flex: 0.5, 
     hideHeaders: true, 
     rootVisible: false, 
     allowDeselect: true, 

     viewConfig: { 
      plugins: { 
       ptype: 'treeviewdragdrop', 
       dropGroup: 'bkmDDGroup', 
       enableDrag: false, 
       appendOnly: true 
      } 
     }, 

     store: Ext.create('Ext.data.TreeStore', { 
      model: 'Category', 
      proxy: { 
       type: 'memory', 
       reader: { 
        type: 'json', 
        root: 'categories' 
       } 
      } 
     }), 

     root: [], 

     columns: [{ 
      xtype: 'treecolumn', 
      dataIndex: 'name', 
      flex: 1 
     }], 

     listeners: { 
      afterrender: function(tree) { 
       var root = tree.getRootNode(); 

       // load static data 
       root.appendChild([{ 
         id: 0, 
         parentCatId: -1, 
         name: 'Cat1', 
         expanded: true, 
         categories: [{ 
           id: 2, 
           parentCatId: 0, 
           name: 'Cat1.1', 
           categories: [] 
          },{ 
           id: 3, 
           parentCatId: 0, 
           name: 'Cat1.2', 
           categories: [] 
         }] 
        },{ 
         id: 1, 
         parentCatId: -1, 
         name: 'Cat2', 
         categories: [] 
       }]); 

       // select the first item 
       tree.getSelectionModel().select(root.getChildAt(0)); 
      }, 

      selectionChange: function(model, selected, opts) { 
       bkmGrid.filterBookmarks((selected && selected[0]) ? selected[0].get('id') : -1); 
      } 
     } 
    }); 

    // Create the grid-panel 
    var bkmGrid = Ext.create('Ext.grid.Panel', { 
     itemId: 'bkmGrid', 

     title: 'Bookmarks', 
     flex: 1, 

     viewConfig: { 
      plugins: { 
       ptype: 'gridviewdragdrop', 
       dragGroup: 'bkmDDGroup' 
      } 
     }, 

     store: Ext.create('Ext.data.Store', { 
      model: 'Bookmark', 
      proxy: { 
       type: 'memory' 
      }, 
      data: [ 
       { id: 0, catId: 0, title: 'bkm1', url: 'http://www.url1.com' }, 
       { id: 1, catId: 0, title: 'bkm2', url: 'http://www.url2.com' }, 
       { id: 2, catId: 1, title: 'bkm3', url: 'http://www.url3.com' }, 
       { id: 3, catId: 1, title: 'bkm4', url: 'http://www.url4.com' }, 
       { id: 4, catId: 2, title: 'bkm5', url: 'http://www.url5.com' }, 
       { id: 5, catId: 3, title: 'bkm6', url: 'http://www.url6.com' } 
      ] 
     }), 

     columns: [{ 
       text: 'Title', 
       dataIndex: 'title', 
       flex: 0.7 
      },{ 
       text: 'URL', 
       dataIndex: 'url', 
       flex: 1, 
       renderer: function(value, meta) { 
        meta.tdAttr = 'data-qtip="' + value + '"'; 
        return '<a href="' + value + '">' + value + '</a>'; 
       } 
     }], 

     filterBookmarks: function(catId) { 
      var store = this.getStore(); 

      store.clearFilter(); 
      if (catId >= 0) { 
       store.filter('catId', catId); 
      } 
     } 
    }); 

    // Create window which holds the dataview 
    Ext.create('Ext.window.Window', { 
     width: 500, 
     height: 300, 

     layout: { 
      type: 'hbox', 
      align: 'stretch' 
     }, 

     items: [ catTree, bkmGrid ] 
    }).show(); 
}); 

这引发以下异常树上滴下书签后:
“遗漏的类型错误:对象的翻译:有没有方法“updateInfo时'“

在appendChild方法中抛出异常,最后根本不应该调用它。因此,异常并不重要,但我如何防止树在尝试添加新节点后放弃?

感谢

+0

我已经在我的应用程序中这样做了....解决方案非常复杂,希望我有时间向您展示。 – Reimius

+0

正如你在我的答案中所看到的那样,它根本就没有那么复杂;) – suamikim

回答

3

我只是找到了一个解决方案,它看起来像这样: http://jsfiddle.net/suamikim/A3T6W/4/

的“神奇”之处,只是删除beforedrop监听记录阵列。删除之前我救数组我的树(this.droppedRecords)的自定义配置对象,以便能够在下拉式监听器再次访问数据:

viewConfig: { 
     plugins: { 
      ptype: 'treeviewdragdrop', 
      dropGroup: 'bkmDDGroup', 
      enableDrag: false, 
      appendOnly: true 
     }, 
     listeners: { 
      beforedrop: function(node, data, overModel, dropPos, opts) { 
       this.droppedRecords = data.records; 
       data.records = []; 
      }, 
      drop: function(node, data, overModel, dropPos, opts) { 
       var str = ''; 
       Ext.iterate(this.droppedRecords, function(record) { 
        str += record.get('title') + ' (id = ' + record.get('id') + ') dropped on ' + overModel.get('name') + '\n'; 
       }); 
       alert(str); 

       this.droppedRecords = undefined; 
      } 
     } 
    }, 

就是这样。

谢谢