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
    7
    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
    7
    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?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar