Page 1 of 3 123 LastLast
Results 1 to 10 of 30

Thread: Adding a Checkbox in a Grid row and connect it to JSON?

  1. #1

    Default Adding a Checkbox in a Grid row and connect it to JSON?

    I have a grid, and I am trying to add a CheckBox for each row, where the user can check the checkbox to set a value in the database using JSON.

    First of all, I am a bit new to extJS, so please be patient with me.

    So far I have this code: var linje = new Ext.grid.CheckboxSelectionModel();

    and I add it to the grid just fine. The problem, however, is that I can only select one row at a time, no multi select.
    The second problem, how do I add a listener and connect it using JSON to set/unset a value in the database?

    If anyone needs any sample code or screenshots, let me know.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Use an Ext.ux.grid.CheckColumn instead of an Ext.grid.CheckboxSelectionModel if the checkbox represents data in your store.

    (include ext/examples/ux/CheckColumn.js)

  3. #3

    Default

    Quote Originally Posted by Condor View Post
    Use an Ext.ux.grid.CheckColumn instead of an Ext.grid.CheckboxSelectionModel if the checkbox represents data in your store.

    (include ext/examples/ux/CheckColumn.js)
    I see no ux folder. I am using extJS 2.X
    Is that for extJS 3?

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    For Ext 2.x:
    Create a new CheckColumn.js file and copy the Ext.grid.CheckColumn code from examples/grid/edit-grid.js to it.

  5. #5

    Default

    Quote Originally Posted by Condor View Post
    For Ext 2.x:
    Create a new CheckColumn.js file and copy the Ext.grid.CheckColumn code from examples/grid/edit-grid.js to it.
    Great. But how can I add a handler that updates a variable in a database using JSON upon clicking on the checkbox?

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    CheckColumn updates the record in the store when clicked.

    The store will fire an update event for this that you can use to update the database (a JsonWriter with autoSave:true would automatically do this - but this is not available on Ext 2).

  7. #7

    Default

    Quote Originally Posted by Condor View Post
    CheckColumn updates the record in the store when clicked.

    The store will fire an update event for this that you can use to update the database (a JsonWriter with autoSave:true would automatically do this - but this is not available on Ext 2).
    So far it is not displaying correctly. Can you point me in a more direct way? Here is my code:

    Code:
     
    Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
    this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
    };
    Ext.grid.CheckColumn.prototype ={
    init : function(grid){
    this.grid = grid;
    this.grid.on('render', function(){
    var view = this.grid.getView();
    view.mainBody.on('mousedown', this.onMouseDown, this);
     
    }, this);
    },
    onMouseDown : function(e, t){
    if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
    e.stopEvent();
    var index = this.grid.getView().findRowIndex(t);
    var record = this.grid.store.getAt(index);
    record.set(this.dataIndex, !record.data[this.dataIndex]);
     
    }
    },
     
     
    renderer : function(v, p, record){
    p.css += ' x-grid3-check-col-td';
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
     
    }
    };
     
    var linje = new Ext.grid.CheckColumn({
    header: "Vis?",
     
    dataIndex: 'aktiv',
    width: 40
     
    });

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    OK, and how are you using linje in your grid? It should be both a plugin an a column.

    Also, 'aktiv' needs to be a field in your store record.

  9. #9

    Default

    Quote Originally Posted by Condor View Post
    OK, and how are you using linje in your grid?
    Like this:

    Code:
     
    var userCM = new Ext.grid.ColumnModel([
       new Ext.grid.RowNumberer(),
                           
       {
        id: 'company_id',
        header: "Identify",
        dataIndex: 'company_id',
        width: 100,
        sortable: true,
        hidden: true
       },
                          linje ,
                            {
        header: "Firmanavn", 
        width: 200, 
        sortable: true,
        dataIndex: 'company_name'
       },{
    and so on.

  10. #10

    Default

    Quote Originally Posted by Condor View Post
    OK, and how are you using linje in your grid? It should be both a plugin an a column.

    Also, 'aktiv' needs to be a field in your store record.
    Aktiv is a field already, and it is being correctly sent using JSON:

    {"response":{"value":{"items":[{"aktiv":"0","company_id":"44","company_id2":"44","company_name":"Danieland so on

Page 1 of 3 123 LastLast

Similar Threads

  1. Can Ext.Ajax connect to GWT RPC method that returns JSON?
    By richardcatlin in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 29 Sep 2010, 3:31 PM
  2. Adding Checkbox Column to a grid
    By mannyk in forum Ext Designer: Help & Discussion
    Replies: 2
    Last Post: 23 Aug 2010, 10:00 PM
  3. Row editor grid Adding new row
    By mayurid in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 18 Jul 2010, 8:42 PM
  4. Adding a row to a grid
    By shajeerkt in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 17 Oct 2009, 12:44 AM
  5. Adding Id's to Row's in Grid
    By Vikram1507 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 17 Mar 2009, 6:20 AM

Tags for this Thread

Posting Permissions

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