Results 1 to 5 of 5

Thread: Newbie: "Dynamic" checkboxes in Grid

  1. #1
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default Newbie: "Dynamic" checkboxes in Grid

    Hi,

    I've been messing around with the Paging Grid example and have tried to modify it to display a checkbox and only the topic. What I want to do is:

    1. On rowclick, toggle the checkbox on/off.

    2. In a separate routine (not shown) determine what checkboxes have been selected.

    I can do this with tables/DHTML, but can't figure it out with Ext-Yui.

    Code:
    Ext.onReady(function(){
    
      var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({ url: 'http://www.yui-ext.com/forum2/topics-remote.php' }),
        reader: new Ext.data.JsonReader({ root: 'topics', id: 'topic_id' }, [ {name: 'title', mapping: 'topic_title'} ])
      });
        
      function renderIsSelected(value, p, record){   
        return String.format('<input type="checkbox" id="chk{0}" name="chk{1}">', record.data['topic_id'], record.data['topic_id']);       
      } 
    
      var cm = new Ext.grid.ColumnModel([
        {id: 'isselected', width:30, renderer: renderIsSelected}, 
        {id: 'topic', header: "Topic", dataIndex: 'title', width: 600 }
      ]);
    
      var grid = new Ext.grid.Grid('topic-grid', {
        ds: ds,
        cm: cm,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
      });
    
      grid.on('rowclick', function(grid, rowIndex, e) { 
        var dataId = ds.data.items[rowIndex].id;  // Ext.MessageBox.alert('', 'chk' + dataId);
        var chkBox = Ext.get('chk' + dataId); 
        if (chkBox)
        {
          chkBox.checked = !chkBox.checked; 
        }
      });    
      
      grid.render();
      ds.load();
    });
    Q1. Am I using "Ext.get('chk' + dataId)" correctly? The "if (chkBox)" statement never returns true, so I'm thinking that I've misunderstood what renderIsSelected does: I've assumed that it is creating/inserting the <input type="checkbox" ...> into the DOM...?

    Q2. Should I be using an EditorGrid instead of a Grid? (And a checkBoxEditor for the 'isselected' column?) I don't actually want the grid contents to be editable - I just want to be able to toggle the checkbox when I click on a row.

    Q3. Must the reader contain an 'isselected' field for the 'isselected' grid column to be available? Does the reader support "dynamic" fields that do not exist in the underlying data store? I've tried the following, but to no avail:

    Code:
      reader: new Ext.data.JsonReader(
        { root: 'topics', id: 'topic_id' }, 
        [
          {name: 'isselected'},
          {name: 'title', mapping: 'topic_title'}
        ])
    Any help would be appreciated. Btw, I have looked at the forum/docs/examples, and unfortunately, I am not allowed to install Firefox/Firebug on this PC - I can only use IE7.

    Thanks,

    Fay

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    Q1. Am I using "Ext.get('chk' + dataId)" correctly? The "if (chkBox)" statement never returns true, so I'm thinking that I've misunderstood what renderIsSelected does: I've assumed that it is creating/inserting the <input type="checkbox" ...> into the DOM...?
    Ext.get() returns an Element, not a DOM object, so if(chkBox) returns true if the element exists, it's not telling you whether the box is checked - you probably want to look at the chkBox.dom property to check the real DOM property of a checkbox.

    Q2. Should I be using an EditorGrid instead of a Grid? (And a checkBoxEditor for the 'isselected' column?) I don't actually want the grid contents to be editable - I just want to be able to toggle the checkbox when I click on a row.
    You don't need to use an EditorGrid.

    Q3. Must the reader contain an 'isselected' field for the 'isselected' grid column to be available? Does the reader support "dynamic" fields that do not exist in the underlying data store? I've tried the following, but to no avail:
    You do need an isselected entry in your DM. I would suggest making it type:bool. That way your click handler can look at record.data.isselected and just toggle true/false

    There is a lite version of Firebug for IE as well as some other free debuggers.

  3. #3
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    Thank you tryanDLS,

    Adding the {name: 'isselected', type: 'bool'} field to the JsonReader did the trick! I also had to update my renderIsSelected routine to reflect any changes to the field.

    I'm still a little confused why "Ext.get('chk' + dataId)" does not return an element (DOM or otherwise). I'll have to assume my original assumption was wrong so... the renderer DOES NOT insert anything in the page, it just "draws" the HTML you specify (which I guess makes sense given the word "render"!)

    Thanks again,

    Fay

    For anyone else's interest, the working code (based on the \grid\paging.html example):

    Code:
    Ext.onReady(function(){
    
      var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({url: 'http://www.yui-ext.com/forum2/topics-remote.php'}),
            reader: new Ext.data.JsonReader({root: 'topics', id: 'topic_id'}, 
            [
              {name: 'isselected', type: 'bool'},
              {name: 'title', mapping: 'topic_title'}
            ])
      });
        
      function renderIsSelected(value, p, record){      
        var id = record.data['topic_id'];
        
        if (record.data['isselected'])
          return String.format('<input type="checkbox" id="chk{0}" name="chk{1}" checked>', id, id);
        else
          return String.format('<input type="checkbox" id="chk{0}" name="chk{1}">', id, id);      
      } 
      
      var cm = new Ext.grid.ColumnModel([
        {id: 'isselected', header: "#", dataIndex: 'isselected', width:30, renderer: renderIsSelected}, 
        {id: 'topic', header: "Topic", dataIndex: 'title', width: 600 }
      ]);
    
      var grid = new Ext.grid.Grid('topic-grid', {
        ds: ds,
        cm: cm,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
      });
    
      grid.on('rowclick', function(grid, rowIndex, e) { 
        var currentRow = grid.getSelectionModel().getSelected(); 
        currentRow.data.isselected = !currentRow.data.isselected; // toggle the value of the isselected field in the current row
        
        grid.getView().refresh(); 
      });    
      
      grid.render();
      
      var gridHead = grid.getView().getHeaderPanel(true);
      var tb = new Ext.Toolbar(gridHead, [{ 
        text: 'Show Selected Items',
        handler : function(){  
          var s = '';
          
          for (var i = 0; i < ds.getCount(); i++)
          {
            if (ds.getAt(i).data.isselected)
              s += ' ' + ds.data.items[i].id;
          }
          Ext.MessageBox.alert('Results', s); 
        }
      }]);
      
      ds.load();
    });

  4. #4
    Ext User
    Join Date
    Jun 2007
    Posts
    98

    Default

    I used your code with examples/grid/pinging.html. It showed up nothing. Am I missing anything?

    Thanks in advance!

  5. #5
    Ext User
    Join Date
    Jun 2007
    Posts
    98

    Default

    Actually I have copied some of your checkbox methods. It worked in my another example.
    It's pretty cool. Thanks!

    Now my editable grid inline text field no long editable after adding this

    grid.on('rowclick', function(grid, rowIndex, e) {
    var currentRow = grid.getSelectionModel().getSelected();
    currentRow.data.isselected = !currentRow.data.isselected; // toggle the value of the isselected field in the current row

    grid.getView().refresh();
    });

    Originally the grid cell is editable by double clicking the cell and now it's not. Any inside?

Posting Permissions

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