Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Cannot D&D in grid with CellSelectionModel

  1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    21
    Vote Rating
    0
      0  

    Default Cannot D&D in grid with CellSelectionModel

    First off: Nice work with this framework! It seems really comfortable, judging from my first 2 days of working with it

    I encountered a problem with the CellSelectionModel though. The EditorGrid e.g. by default uses the CellSelectionModel, rather than the RowSelectionModel. This model cannot be used with the grid's enableDragDrop : true - option:
    It will raise the following error: sm.isSelected is not a function in the getDragData() - function when starting to drag a row (or rather cell).

    Intializing the grid:
    Code:
    var grid = new Ext.grid.EditorGrid(Ext.get(this.id), {
    	ds: ds,
    	cm: cm,
    	//enableColLock:false,
    	enableColumnMove : true,
    	enableDragDrop : true
    });
    The EditorGrid's CellSelectionModel just does not have the isSelected()-method.

    I suggest to give the choice of -by default- either drag complete rows or single cells when fixing the CellSelectionModel to work with D&D.


    If you want to use D&D in your EditorGrid, use a simple work-around: Supply a RowSelectionModel to the ctor, by adding the following Config-Option:
    Code:
    sm: new Ext.grid.RowSelectionModel()

  2. #2
    Ext User TaunT's Avatar
    Join Date
    Nov 2008
    Location
    Russia / Saint-Petersburg
    Posts
    13
    Vote Rating
    0
      0  

    Default no solutions?

    hi, I have the same problem
    use CellSelectionModel && enableDragDrop, but it dos't work
    year of the post 2007 ! it's stiil not solved? table has three columns, I want to do that dragging only works if the user clicks the mouse on one of them

    need help )

    ----
    sorry for bad english

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    Are you still using Ext 1.x? Or are you using Ext 2.x or 3.x?

    ps. CellSelectionModel is still using the cellmousedown event in all Ext versions, which effectively kills D&D.
    You could override CellSelectionModel.initEvents to make it use the cellclick event instead.

  4. #4
    Ext User TaunT's Avatar
    Join Date
    Nov 2008
    Location
    Russia / Saint-Petersburg
    Posts
    13
    Vote Rating
    0
      0  

    Default

    tried this on extjs 2.2 & on extjs 3.0

  5. #5
    Ext User TaunT's Avatar
    Join Date
    Nov 2008
    Location
    Russia / Saint-Petersburg
    Posts
    13
    Vote Rating
    0
      0  

    Default

    PHP Code:
            var grid = new Ext.grid.GridPanel({
                id: 'gridPanel',
                renderTo: 'mainPanelGrid',
                enableDragDrop: <?=($this->arrayGridSettings["enableDragDrop"]?"true":"false");?>,
                ddGroup: 'mygrid-dd',  
                ddText: '<?=SYSTEM_MODULE_CORE_GRIDPANEL_DND?>',
                enableHdMenu: false,
                frame: false,
                border: false,
                autoHeight: true,
                autoWidth: true,
                store: store,
                autoExpandColumn: 'name',
                autoExpandMin: 300,
                autoExpandMax: 700,
                layout:'fit',
                trackMouseOver: false,
                cm: cm,
                viewConfig: {
                    forceFit: true,
                    autoScroll: true,
                    getRowClass: function(record, index) {
                        if(index%2>0) rowcls='grid-row-selected';
                        else if(index==<?=($this->gridRowsCount-1)?>) rowcls='grid-row-end';
                        else rowcls='';
                           return rowcls;
                       }
                }
                ,sm: new Ext.grid.CellSelectionModel({  
                    listeners: {  
                        cellselect: function(sm, iRow, iCell){ 
                            if (iCell!=0) sm.clearSelections();
                        },
                    }
                })
             });

            var ddrow = new Ext.dd.DropTarget(grid.getView().mainBody, {  
                ddGroup : 'mygrid-dd',  
                notifyDrop : function(dd, e, data){  
                    var sm = grid.getSelectionModel();  
                    var rows = sm.getSelections();  
                    var cindex = dd.getDragData(e).rowIndex; 
                        
                    var record = store.getAt(cindex);
                       var row1 = record.get('id');
                       var sorttype1 = record.get("sorttype");
                       
                     if (sm.hasSelection()) {  
                         
                        for (i = 0; i < rows.length; i++) {  
                            sorttype2=store.getById(rows[i].id).data.sorttype;
                            if (sorttype1==sorttype2) { 
                                store.remove(store.getById(rows[i].id));  
                                store.insert(cindex,rows[i]);  
                                row2=store.getById(rows[i].id).data.id;
                            }    
                        }  
                        if (sorttype1==sorttype2) {
                            Ext.Ajax.request({
                                url: '<?=$this->arrayGridSettings["sortLinkDND"];?>',
                                   params: {itemid_from: row2, itemid_to: row1 <? foreach ($this->arrayGridSettings["sortAdds"] as $key=>$sortAdd) {echo ", ".$key.": '".$sortAdd."' ";} if ($this->arrayGridSettings["sorttype"]) {echo ", sorttype: "?>sorttype1<?;} ?>}
                            }); 
                            sm.selectRecords('');
                        }
                    } 
               
                    // new classes after d&d
                       for(i=0; i<gridData.length; i++) {            
                          var row = grid.getView().getRow(i);
                        var element = Ext.get(row);
                           if (i%2==0) {
                               if(i!=<?=($this->gridRowsCount-1)?>) {
                                   element.removeClass('grid-row-end');
                                element.removeClass('grid-row-selected');
                               } else {
                                   element.removeClass('grid-row-selected');
                                   element.addClass('grid-row-end');
                               }
                           } else {
                               element.removeClass('grid-row-end');
                            element.addClass('grid-row-selected');
                        }
                    }
                }    
                        
            });

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    Try:
    Code:
    sm: new Ext.grid.CellSelectionModel({
    	initEvents : function(){
    		this.constructor.prototype.initEvents.call(this);
    		this.grid.un("cellmousedown", this.handleMouseDown, this);
    		this.grid.on("cellclick", this.handleMouseDown, this);
    	},
    	...
    })

  7. #7
    Ext User TaunT's Avatar
    Join Date
    Nov 2008
    Location
    Russia / Saint-Petersburg
    Posts
    13
    Vote Rating
    0
      0  

    Default

    d.isSelected is not a function

  8. #8
    Ext User TaunT's Avatar
    Join Date
    Nov 2008
    Location
    Russia / Saint-Petersburg
    Posts
    13
    Vote Rating
    0
      0  

    Default

    why developers of ExtJS can't make listeners "cellselect"
    and in handleMouseDown : function(g, rowIndex, e) include cellIndex ?

  9. #9
    Ext User TaunT's Avatar
    Join Date
    Nov 2008
    Location
    Russia / Saint-Petersburg
    Posts
    13
    Vote Rating
    0
      0  

    Default my bad english :(

    I think I had explained that I wanted
    I need to drag-and-drop the rows will only work if the user click on one of the cell in row, but not for any

  10. #10
    Sencha User
    Join Date
    Apr 2009
    Posts
    22
    Vote Rating
    0
      0  

    Default @ Taunt

    Hi Taunt,

    Have a look at this post.

    https://extjs.com/forum/showthread.php?t=6832

    This helped me get an editable grid with drag and drop.

    Hope it helps you too.

    R.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •