1. #1
    Ext User sonic64's Avatar
    Join Date
    Apr 2007
    Location
    Casablanca, Morocco
    Posts
    112
    Vote Rating
    0
    sonic64 is on a distinguished road

      0  

    Default Adding and Removing rows dynamically from a grid

    Adding and Removing rows dynamically from a grid


    Hello,

    I need to add and remove rows dynamically from a grid that I populate using Json Data. I looked in the documentation of Ext's class: Yahoo.ext.grid.Grid and I could not find any method that adds or remove rows; For removing records, the closest I found is a method called getRowsById. I will then have to iterate through all the records in my database to match the id of the record I want to remove. As for adding, I have no idea what I could use to dynamically add a record to the grid...

    Any suggestions will greatly be appreciated.

    Thanks


  2. #2
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Hi,

    To delete a row use the data store's remove() function:

    Code:
    var rows = selectionModel.getSelections();
    for(var i=0;i<rows.length;i++)
      ds.remove(rows[i]);
    To add a row see the edit-grid.html example:

    Code:
    var tb = new Ext.Toolbar(gridHead, [{
            text: 'Add Plant',
            handler : function(){
                var p = new Plant({
                    common: 'New Plant 1',
                    light: 'Mostly Shade',
                    price: 0,
                    availDate: new Date(),
                    indoor: false
                });
                grid.stopEditing();
                ds.insert(0, p);
                grid.startEditing(0, 0);
            }
        }]);

  3. #3
    Ext User sonic64's Avatar
    Join Date
    Apr 2007
    Location
    Casablanca, Morocco
    Posts
    112
    Vote Rating
    0
    sonic64 is on a distinguished road

      0  

    Default


    thanks Fay for your prompt answer. I will try your suggestions out and let you know..

    Ext is so large and rich that I find it hard sometimes to find the exact things I need.

    Thanks

  4. #4
    Ext User sonic64's Avatar
    Join Date
    Apr 2007
    Location
    Casablanca, Morocco
    Posts
    112
    Vote Rating
    0
    sonic64 is on a distinguished road

      0  

    Default


    about adding rows, the insert does update the grid but not the records in the Json Data. I am doing something wrong? Same goes for grid inline editing example in the ext demo.

  5. #5
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Sonic,

    You are going to have to post your grid changes back to the server. See http://extjs.com/forum/showthread.ph...ight=post+data for an example of afterEdit.

    Code:
    grid.on('afteredit', gridAfterEdit, this, true);
    
    function gridAfterEdit(grid, row, field, rowIndex, columnIndex){
        Ext.MessageBox.alert('asdf', 'asdf');
    };
    Not too sure what your requirements are but I think this will do it after each Cell edit which might be a bit over the top.

    Alternatively, you could add a Post/Update button (see 'Add Plant' button in edit-grid.js example) and put code behind this to iterate through the rows checking the dirty flag and only posting back the modified rows.

    Fay

  6. #6
    Ext User sonic64's Avatar
    Join Date
    Apr 2007
    Location
    Casablanca, Morocco
    Posts
    112
    Vote Rating
    0
    sonic64 is on a distinguished road

      0  

    Default


    Hello,

    Thanks Fay for your suggestions...I read the examples you pointed me to, but I am a little confused as to how I can actually implement a button 'Add record' that will send the info about the new record back to the server:

    This is my code so far:

    In my js, I add:

    Code:
    var gridHead = grid.getView().getHeaderPanel(true);
        var tb = new Ext.Toolbar(gridHead, [{
            text: 'Add Record',
            handler : function(){
                var p = new Rec({
                    id: 'New id 1',
                    interpret: 'New Interpret',
                    title: 'New title'
                });
                grid.stopEditing();
                ds.insert(0, p);
                grid.startEditing(0, 0);
            }
        }]);
    And this is my update php file:
    Code:
    <?php
    // connect to the database
    $id = $_POST['id'];
    $field = $_POST['field'];
    $newValue = $_POST['newValue'];
    
    $link = mysql_pconnect("localhost", "root", "") or die("Could not connect");
    mysql_select_db("cdcol") or die("Could not select database");
     
    $query = "UPDATE cds SET ".$field."='".$newValue."' WHERE id=".$id; 
    
    $rs = mysql_query($query);
    ?>
    Now, there's this code I too from the tutorial:
    Code:
    Ext.grid.EditorGrid.prototype.onEditComplete = function(ed, value, startValue){
        this.editing = false;
        ed.un("specialkey", this.onEditorKey, this);
        if(value != startValue){
            var r = this.dataSource.getAt(ed.row);
            var field = this.colModel.getDataIndex(ed.col);
            if(this.fireEvent("afteredit", this, r, field, ed.row, ed.col, startValue, value) !== false){
                r.set(field, value);
            }
        }
        this.view.focusCell(ed.row, ed.col);
    };
    
    And:
    
    afteredit:function(grid, record, field, row, column, oldValue, newValue){
                alert(record.data['id']+":"+oldValue+"-->"+newValue);
                var conn = new Ext.data.Connection(); 
                conn.request({ 
                    url: 'gridupdate.php', 
                    params: { 
                        id: record.data['id'], 
                        field: field, 
                        newValue: newValue 
                    } 
                }); 
                record.set(field, newValue);
                return false;
            }
    My problem is that I don't know how to incorporate this last piece of code into my js.

    Any help will be enormously appreciated!!!

    Thanks

  7. #7
    Ext User
    Join Date
    Apr 2007
    Posts
    7
    Vote Rating
    0
    Elfstone is on a distinguished road

      0  

    Default Working code

    Working code


    Hi I

  8. #8
    Ext User sonic64's Avatar
    Join Date
    Apr 2007
    Location
    Casablanca, Morocco
    Posts
    112
    Vote Rating
    0
    sonic64 is on a distinguished road

      0  

    Default


    Thanks for your answer...but I got as far as you did in the code...What I am aloso trying to do is get the insert new button to insert in the database. I do manage to update existing records with the same code you provided (taken from Micha's tutorial), but when a new record is created, it is not updated at the database level.


    I tried this, but it did not work:
    Code:
     var tb = new Ext.Toolbar(gridHead, [{
            text: 'Add Record',
            handler : function(){
                var p = new Rec({
                    id: '31',
                    interpret: 'New Interpret',
                    title: 'New title'
                });
                grid.stopEditing();
                ds.insert(0, p);
                grid.startEditing(0, 0);
    
        grid.on('afteredit', this.afteredit, this, true);
            
            afteredit:function(grid, record, field, row, column, oldValue, newValue){
                alert(record.data['id']+":"+oldValue+"-->"+newValue);
                var conn = new Ext.data.Connection(); 
                conn.request({ 
                    url: 'michagridupdate.php', 
                    params: { 
                        id: record.data['id'], 
                        field: field, 
                        newValue: newValue 
                    } 
                }); 
                record.set(field, newValue);
                return false;
            } 
    
            }
    
        }]);

  9. #9
    Ext User
    Join Date
    Apr 2007
    Posts
    7
    Vote Rating
    0
    Elfstone is on a distinguished road

      0  

    Default


    It is not updated because it

  10. #10
    Ext User sonic64's Avatar
    Join Date
    Apr 2007
    Location
    Casablanca, Morocco
    Posts
    112
    Vote Rating
    0
    sonic64 is on a distinguished road

      0  

    Default


    Oops! Thanks you so much, I did not realize that:
    So instead of using update, I use insert. I am not sure how to autoincrement the id:
    I have so far:
    PHP Code:
    <?php
    // connect to the database
    $id $_POST['id'];
    $field $_POST['field'];
    $newValue $_POST['newValue'];

    $link mysql_pconnect("localhost""root""") or die("Could not connect");
    mysql_select_db("cdcol") or die("Could not select database");
     
    $query "INSERT INTO cds VALUES(' ', ".$field."='".$newValue."' , ".$field."='".$newValue."'); 
    $rs = mysql_query($query);
    ?>

    I am not sure about the my $query?

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