Results 1 to 8 of 8

Thread: Drag and Drop write to database : Coding BrainFreeze

  1. #1
    Sencha User
    Join Date
    Jan 2010
    Posts
    168

    Default Drag and Drop write to database : Coding BrainFreeze

    I am using the code from Saki's examples and have created my drag and drop grids.

    http://examples.extjs.eu/ddgrids.js

    I am successfully able to drag and drop data from one grid to the other.

    The trick now is that, when I drop a row into the Drop Target Grid, I want to write that row to the database.

    In Saki's code he has the following line.

    Code:
       /**
       * Called when records are dropped on this grid
       * @param {Ext.grid.GridPanel} srcGrid The source grid
       * @param {Array} records Array of dropped records
       */
       ,onRecordsDrop:Ext.emptyFn
    I am assuming i can replace Ext.emptyFn with a real function to write to database. Problem is I am freezing up when trying to implement. Would I do something like this?

    Code:
    onRecordsDrop: function () {
           var record = this.getSelectionModel().getSelectedValues();
           store.save(record);
    }

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    create a function, and look at what is passed. It should pass the record, send that to the server via ajax request or something.

  3. #3
    Sencha User
    Join Date
    Jan 2010
    Posts
    168

    Default I did this and am thinking what you said

    I guess where I am having my freeze is that I have really only sent form data via Ajax - ie

    form.IsValid;
    form.GetValues.submit(
    Ajax call

    Can you give me a hint on how to get values of the dropped record?

    if I do this, it did not give me the whole record just the first column value

    Code:
        ,onRecordsDrop: function () {
            var record =  this.selModel.getSelections(); 
            this.store.save(record);       
        }
    As well extjs blows up because I have not defined a writer for the store. Setting that up now.

  4. #4

  5. #5
    Sencha User
    Join Date
    Jan 2010
    Posts
    168

    Default Failing something 101 here

    Code:
        ,onRecordsDrop: function () {
            var record =  this.selModel.getSelections();
            this.dropAjax(record);        
        }
        ,dropAjax: function (record) {
            Ext.Ajax.request({
                url : '?c=deliverydetail&m=setDetail'
                ,params : {
                    tallyID: record.tallyID
                    ,skuID: record.skuID
                }
                ,method: 'POST'
                ,success: ''
                ,failure: ''
            });
        }
    When I drop the record into the dropGrid, it fires the AJAX call, but my record is null so it doesn't do anything.

    I am failing something here to pick up the values of the record I just dropped into the grid. I am sure it is 101.....

  6. #6
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    The selection model doesn't really have a selection. You can drag and drop before a selection is made.

    take a look at my drag and drop example at http://extjsinaction.com/examples/chapter14

    It doesn't have the ajax request built in, but there should be a comment with a placeholder.

  7. #7
    Sencha User
    Join Date
    Jan 2010
    Posts
    168

    Default Still not quite there

    I looked at the example and looked back at you book chapters.

    I have stuck with my original DD code from Saki's example and am getting the data passed, but cannot pick it up. I output to console.log and have attached screenshot.

    Will keep hacking at it, but how do I extract the values of "data" - I can see them but cannot get them into a param that I can send with my Ajax call.

    Saki's Code:

    Code:
    ,onContainerDrop:function(dd, e, data) {
            if(dd.grid !== this.grid) {
                this.grid.store.add(data.selections);
                Ext.each(data.selections, function(r) {
                    dd.grid.store.remove(r);
                });
                this.grid.onRecordsDrop(dd.grid, data.selections);
                return true;
            }
            else {
                return false;
            }
        } // eo function onContainerDrop
    My Code
    Code:
    ,onRecordsDrop: function (grid,data) {
            console.log(data);
            var tallyID = data.tallyID
            Ext.Ajax.request({
                url : '?c=deliverydetail&m=setDetail'
                ,params : {
                    tallyID : tallyID
    
                }
                ,method: 'POST'
                ,success: ''
                ,failure: ''
            });
    i have tried several ways to get at this data, this cut of code is just the latest. For var tallyID=data.tallyID, it comes up null.
    Attached Images Attached Images

  8. #8
    Sencha User
    Join Date
    Jan 2010
    Posts
    168

    Default SOLVED: Thanks Jay for the help getting my head on this one.

    Ajax is not setup to send array yet if multiple ID's are dropped, but I figured out the object was an array and how to crack it.

    Thanks again!

    ,onRecordsDrop: function (grid, data) {

    for($i=0; $i<data.length;$i++) {
    var tid = data[$i]['id'];
    }

    Ext.Ajax.request({
    url : '?c=deliverydetail&m=setDetail'
    ,params : {
    ,tallyID: tid
    }
    ,method: 'POST'
    ,success: ''
    ,failure: ''
    });
    }
    }

Posting Permissions

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