1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    8
    Vote Rating
    0
    sanantone is on a distinguished road

      0  

    Default GroupingGrid Drag & Drop Target

    GroupingGrid Drag & Drop Target


    I have two grouping grids in a panel and need to drag and drop multiple rows in either direction. The grids work but the dd proxy indicates there are no drop targets.

    Any pointers would be really appreciated. I know this topic is common ('beaten to death' I think is the way Jay Garcia recently put it) but I've spent a couple days reading forum posts, all three ExtJS books etc. and clearly just don't GET IT! I've seen a reference to a thread by Animal that might have the solution but I can't pull it up using his user and any obvious keywords...

    Both grids are xtyped extensions of GridEdiorPanel

    Example of right grid:
    Code:
    CPNR.grids.CollectionSamplesGrid = Ext.extend(Ext.grid.EditorGridPanel, {
        enableDragDrop: true,
        clicksToEdit: 1,
        border: false,
        loadMask: true,
        stripeRows: true,
        layout: 'fit',
        sm: new Ext.grid.RowSelectionModel({
            singleSelect: false
        }),
        view: new Ext.grid.GroupingView({
            forceFit: true,
            autoFill: true,
            markDirty: true,
            startCollapsed: false,
            showGroupName: false,
            hideGroupedColumn: true,
            emptyGroupText: 'There are no collected items',
            groupTextTpl: '{text} ({[values.rs.length]})'
        }),
        cm: new Ext.grid.ColumnModel({
            columns: [
                ...
            ],
            editors: {
                ...
            },
            getCellEditor: function(col, row){
                ...
            }
        }),
        initComponent: function() {
            this.store = this.buildStore();
            CPNR.grids.CollectionSamplesGrid.superclass.initComponent.call(this);
        },
        buildStore: function(){
            return {
                xtype: 'collectionsamplesstore'
            }
        },
        add: function(rec){
            var store = this.store;
            var sortInfo = store.sortInfo;
            
            if (Ext.isArray(rec)){
                Ext.each(rec, function(rObj, ind) {
                    if (! (rObj instanceof Ext.data.Record)){
                        rec[ind] = new this.store.recordType(rObj);
                    }
                });
            } else if (Ext.isObject(rec) && ! (rec instanceof Ext.data.Record)){
                rec = new this.store.recordType(rec);
            }
            
            store.add(rec);
            store.sort(sortInfo.field, sortInfo.direction);
        },
        loadData: function(d){
            return this.store.loadData(d);
        },
        load: function(o){
            return this.store.load(o);
        },
        removeAll: function(){
            return this.store.removeAll();
        },
        remove: function(r){
            return this.store.remove(r);
        },
        getSelected: function(){
            return this.selModel.getSelections();
        },
        tools: [
            ...
        ],
        fbar: {
            ...
        }
    });
    
    Ext.reg("collectionsamplesgrid", CPNR.grids.CollectionSamplesGrid);
    The code for the panel extension:

    Code:
    CPNR.grids.initDropZone = function(grid){
        grid.dropTarget = grid.getView().mainBody;
        grid.dropZoneEl = grid.getView().scroller.dom;
        grid.dropZone = new Ext.dd.DropZone(grid.dropZoneEl, {
            ddGroup: 'collectionDD',
            getTargetFromEvent: function(){
                return grid.dropTarget;
            },
            onNodeOver: function(){
                return Ext.dd.DropZone.prototype.dropAllowed;
            }
        });
    }
    
    CPNR.panels.CollectionPanel = Ext.extend(Ext.Panel, {
        layout: 'fit',
        initComponent: function() {
            this.items = [
                {
                    xtype: 'container',
                    flex: 1,
                    layout: 'hbox',
                    layoutConfig: {
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'collectionrulesgrid',
                            title: 'To Collect',
                            id: 'LeftGrid',
                            border: true,
                            flex: 1,
                            listeners: {
                                render: CPNR.grids.initDropZone
                            }
                        },
                        {
                            xtype: 'collectionsamplesgrid',
                            title: 'Already Collected',
                            id: 'RightGrid',
                            border: true,
                            flex: 1,
                            listeners: {
                                render: CPNR.grids.initDropZone
                            }
                        }
                    ]
                }
            ];
            CPNR.panels.CollectionPanel.superclass.initComponent.call(this);
        }
    });
    
    Ext.reg("collectionpanel", CPNR.panels.CollectionPanel);

  2. #2
    Sencha User
    Join Date
    Sep 2009
    Posts
    8
    Vote Rating
    0
    sanantone is on a distinguished road

      0  

    Default


    Clearly was over analyzing the original problem

    Solution:

    Code:
    CPNR.grids.GridDropZone = function(grid, config){
        this.grid = grid;
        CPNR.grids.GridDropZone.superclass.constructor.call(this, grid.view.scroller.dom, config);
    }
     
    Ext.extend(CPNR.grids.GridDropZone, Ext.dd.DropZone, {
        onContainerOver: function(dd, e, data){
            return dd.grid !== this.grid ? this.dropAllowed : this.dropNotAllowed;
        },
        onContainerDrop: function(dd, e, data){
            if (dd.grid !== this.grid){
                this.grid.store.add(data.selections);
                this.grid.store.sort('sort_field', 'ASC');
                Ext.each(data.selections, function(rowIdx) {
                    dd.grid.store.remove(rowIdx);
                });
                dd.grid.store.sort('sort_field', 'ASC');
                this.grid.onRecordsDrop(dd.grid,  data.selections);
                return true;
            } else{
                return false;
            }
        },
        containerScroll: true
    });
     
    CPNR.grids.CollectionSamplesGrid = Ext.extend(Ext.grid.EditorGridPanel, {
        enableDragDrop: true,
        clicksToEdit: 1,
        border: false,
        loadMask: true,
        stripeRows: true,
        layout: 'fit',
        sortDef: [{field: 'sort_f1', direction: 'ASC' },{field: 'sort_f2', direction: 'ASC'}],
        sm: new Ext.grid.RowSelectionModel({
            singleSelect: false
        }),
        view: new Ext.grid.GroupingView({
            forceFit: true,
            autoFill: true,
            markDirty: true,
            startCollapsed: false,
            showGroupName: false,
            hideGroupedColumn: true,
            emptyGroupText: 'There are no collected items',
            groupTextTpl: '{text} ({[values.rs.length]})'
        }),
        cm: new Ext.grid.ColumnModel({
            columns: [
                ...
            ],
            editors: {
                ...
            },
            getCellEditor: function(col, row){
                ...
            }
        }),
        initComponent: function() {
            this.store = this.buildStore();
            CPNR.grids.CollectionSamplesGrid.superclass.initComponent.call(this);
        },
        onRender: function(){
            CPNR.grids.EventsCollectionSamplesGrid.superclass.onRender.apply(this, arguments);
            this.dz = new CPNR.grids.GridDropZone(this, {ddGroup: this.ddGroup || 'GridDD'});
        },
        onRecordsDrop: function(source, records){
            this.dropSource = source;
            this.getStore().sort(this.sortDef);
        },
        buildStore: function(){
            return {
                xtype: 'collectionsamplesstore'
            }
        },
        add: function(rec){
            var store = this.store;
            var sortInfo = store.sortInfo;
            
            if (Ext.isArray(rec)){
                Ext.each(rec, function(rObj, ind) {
                    if (! (rObj instanceof Ext.data.Record)){
                        rec[ind] = new this.store.recordType(rObj);
                    }
                });
            } else if (Ext.isObject(rec) && ! (rec instanceof Ext.data.Record)){
                rec = new this.store.recordType(rec);
            }
            
            store.add(rec);
            store.sort(sortInfo.field, sortInfo.direction);
        },
        loadData: function(d){
            return this.store.loadData(d);
        },
        load: function(o){
            return this.store.load(o);
        },
        removeAll: function(){
            return this.store.removeAll();
        },
        remove: function(r){
            return this.store.remove(r);
        },
        getSelected: function(){
            return this.selModel.getSelections();
        },
        tools: [
            ...
        ],
        fbar: {
            ...
        }
    });
    
    Ext.reg("collectionsamplesgrid", CPNR.grids.CollectionSamplesGrid);

Similar Threads

  1. Custom drag&drop - target recognition
    By colo in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 3 Mar 2010, 7:26 AM
  2. Grid rows sorting by drag and drop. Drop target problem.
    By santail in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 25 Nov 2009, 12:41 AM
  3. Drag N Drop Target Outside of ExtJS?
    By Joyfulbob in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 15 Jun 2009, 5:40 AM
  4. GroupingGrid - Drag'N'Drop and Window
    By KimSchneider in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 27 Feb 2009, 12:24 AM
  5. drag and drop on defined drop target/zone only
    By deeptii in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Nov 2007, 3:17 PM

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi