jtandygod
jtandygod
2010-12-06 17:41
浏览 271

请问怎样实现多个grid之间的数据互相拖拽?

ext官方给的例子,只支持两个grid之间的数据互相拖拽,我想实现多个grid间的数据互相拖拽,请问高手怎么实现?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • iteye_5075
    iteye_5075 2010-12-06 22:46
    已采纳

    [code="java"]

    /*!

    • Ext JS Library 3.3.0
    • Copyright(c) 2006-2010 Ext JS, Inc.
    • licensing@extjs.com
    • http://www.extjs.com/license
      */
      Ext.onReady(function(){

      var myData = {
      records : [
      { name : "Rec 0", column1 : "0", column2 : "0" },
      { name : "Rec 1", column1 : "1", column2 : "1" },
      { name : "Rec 2", column1 : "2", column2 : "2" },
      { name : "Rec 3", column1 : "3", column2 : "3" },
      { name : "Rec 4", column1 : "4", column2 : "4" },
      { name : "Rec 5", column1 : "5", column2 : "5" },
      { name : "Rec 6", column1 : "6", column2 : "6" },
      { name : "Rec 7", column1 : "7", column2 : "7" },
      { name : "Rec 8", column1 : "8", column2 : "8" },
      { name : "Rec 9", column1 : "9", column2 : "9" }
      ]
      };

      // Generic fields array to use in both store defs.
      var fields = [
      {name: 'name', mapping : 'name'},
      {name: 'column1', mapping : 'column1'},
      {name: 'column2', mapping : 'column2'}
      ];

      // create the data store
      var firstGridStore = new Ext.data.JsonStore({
      fields : fields,
      data : myData,
      root : 'records'
      });

      // Column Model shortcut array
      var cols = [
      { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
      {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
      {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
      ];

      // declare the source Grid
      var firstGrid = new Ext.grid.GridPanel({
      ddGroup : 'gridDDGroup',
      store : firstGridStore,
      columns : cols,
      enableDragDrop : true,
      stripeRows : true,
      autoExpandColumn : 'name',
      title : 'First Grid'
      });

      var secondGridStore = new Ext.data.JsonStore({
      fields : fields,
      root : 'records'
      });

      // create the destination Grid
      var secondGrid = new Ext.grid.GridPanel({
      ddGroup : 'gridDDGroup',
      store : secondGridStore,
      columns : cols,
      enableDragDrop : true,
      stripeRows : true,
      autoExpandColumn : 'name',
      title : 'Second Grid'
      });

      var store3 = new Ext.data.JsonStore({
      fields : fields,
      root : 'records'
      });

      // create the destination Grid
      var grid3 = new Ext.grid.GridPanel({
      ddGroup : 'gridDDGroup',
      store : store3,
      columns : cols,
      enableDragDrop : true,
      stripeRows : true,
      autoExpandColumn : 'name',
      title : 'Second Grid'
      });

      //Simple 'border layout' panel to house both grids
      var displayPanel = new Ext.Panel({
      width : 650,
      height : 300,
      layout : 'hbox',
      renderTo : 'panel',
      defaults : { flex : 1 }, //auto stretch
      layoutConfig : { align : 'stretch' },
      items : [
      firstGrid,
      secondGrid,
      grid3
      ],
      bbar : [
      '->', // Fill
      {
      text : 'Reset both grids',
      handler : function() {
      //refresh source grid
      firstGridStore.loadData(myData);

                  //purge destination grid
                  secondGridStore.removeAll();
              }
          }
      ]
      

      });

      // used to add records to the destination stores
      var blankRecord = Ext.data.Record.create(fields);

      /****
      * Setup Drop Targets
      ***/
      // This will make sure we only drop to the  view scroller element
      var firstGridDropTargetEl =  firstGrid.getView().scroller.dom;
      var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
              ddGroup    : 'gridDDGroup',
              notifyDrop : function(ddSource, e, data){
                      var records =  ddSource.dragData.selections;
                      Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
                      firstGrid.store.add(records);
                      firstGrid.store.sort('name', 'ASC');
                      return true
              }
      });
      
      // This will make sure we only drop to the view scroller element
      var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
      var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
              ddGroup    : 'gridDDGroup',
              notifyDrop : function(ddSource, e, data){
                      var records =  ddSource.dragData.selections;
                      Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
                      secondGrid.store.add(records);
                      secondGrid.store.sort('name', 'ASC');
                      return true
              }
      });
      
      var gridDropTargetEl3 = grid3.getView().scroller.dom;
      var gridDropTarget3 = new Ext.dd.DropTarget(gridDropTargetEl3, {
              ddGroup    : 'gridDDGroup',
              notifyDrop : function(ddSource, e, data){
                      var records =  ddSource.dragData.selections;
                      Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
                      grid3.store.add(records);
                      grid3.store.sort('name', 'ASC');
                      return true
              }
      });
      

      });

    [/code]

    点赞 评论

相关推荐