Results 1 to 3 of 3

Thread: Rendering a checkbox in a row edit grid

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Answers
    4
    Vote Rating
    0
      0  

    Default Answered: Rendering a checkbox in a row edit grid

    I haven't been able to get any of the solutions I have located via searching to work so am looking for guidance as to how to make a boolean column draw as a checkbox on a grid which implements a rowedit plugin.

    The solution I have (included below) uses the images from the default theme menu, it requires me to enter an absolute path name to the image because it's not in the css file itself which is a terrible kludge. I have tried using the x-grid-3-check-col style but failed to get that to work - the element showed that no background image was in the final style even thought it was applied, that stumped me, no idea why or what to try next.

    Anyway - here is a short class you might be able to look at and fix - or if you have renderer you can post that would be great too.

    Thanks,

    PHP Code:
    Ext.define('MyApp.renderer.Checkbox', {
        
        
    renderBool: function(val,p) {
    //        p.tdCls += ' x-grid3-check-col-td'; 
    //           return '<div class="x-grid3-check-col'+(val==true?'-on':'-on')+'">'+val+' </div>';
        
    //        return "<input type='checkbox' disabled='true' " + (val ? "checked='checked'" : "") + " ondblclick='return true;'>";
            
    //return '<span class="x-grid3-check-col'+(val==true?'-on':'')+'">'+val+'</span>';        
            
    //        return "<div class='x-grid3-check-col' style='x-grid3-check-col-on'> </div>";
            
            
    var checkedImg initClientHomeURL+'/ext-4.0.7-gpl/resources/themes/images/default/menu/checked.gif'// really really not happy about this.
            
    var uncheckedImg initClientHomeURL+'/ext-4.0.7-gpl/resources/themes/images/default/menu/unchecked.gif';  
            var 
    cb ''
                
    '<div style="text-align:center;height:13px;overflow:visible">'
                
    '<img style="vertical-align:-3px" src="'
                
    + (val checkedImg uncheckedImg)
                + 
    '"'
                
    ' />'
                
    '</div>'
            
    ;
            return 
    cb;
        } 
            
    }); 

  2. Have you tried the CheckColumn that is in the examples/ux/ directory?

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1536
      0  

    Default

    Have you tried the CheckColumn that is in the examples/ux/ directory?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Answers
    4
    Vote Rating
    0
      0  

    Default Awesome

    Thanks Mitchell - you hit the nail on the head - it didn't even occur to me that this example would be using the same mechanism to render the checkbox.
    Cheers!

Posting Permissions

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