Results 1 to 6 of 6

Thread: Help: How to create a column with check box cells.

  1. #1
    Sencha User
    Join Date
    Aug 2012

    Default Help: How to create a column with check box cells.


    I am using Sencha Architect 2. I have a data grid in which one field is boolean values. Instead using a Boolean column, I want to display the cell value as a checked or unchecked value.

    I tried to find a simple example, but I have not been successful. Help please?

    Thanks in advance,

  2. #2

  3. #3
    Sencha User
    Join Date
    Aug 2012


    Danguba: Thanks!

    But, I cannot seem to locate checkcolumn in the Sencha Architect toolbox. do I need to import a file. If so, tell me please, what do I need to do?

    Thanks again for all your help. I really appreciate it.

  4. #4
    Sencha User
    Join Date
    Aug 2012


    Figured it out.

    I had to:

    1. Get the file, CheckColumn.js from the ExtJS.4.x download and put it into a directory I created, /app/ux, under the web app root.
    2. Add a loader to the Application
    3. add the setting, {"Ext.ux":"app/ux"} to the loader path
    4. copy the configuration code for the Panel in which the grid lives, ovrride the Panel, paste the configuration code into the override and then in the change the code xtype of the column that I want to have checkboxes displayed to, xtype:'checkcolumn' (I suggest that you be really careful here.)
    5. Get the css file, CheckHeader.css from the downloaded ExtJs zip file and put it into, app/css, which is a folder I created.
    6. Add a <link> tag to app.html, <link rel="stylesheet" href="app/css/CheckHeader.css">
    7. create a directory app/css/images and put the files checked.gif and unchecked.gif in the newly created, app/css/images directory. (You can find the gif files in the ExtJS zip file from download)
    8. Make sure that the field in the model, to which the grid-column is bound, is set to boolean. In my case the model field is named, inactive

    I gotta say this was hard in terms of "figuring it out time". I wonder why checkcolumn is not part of the Toolbox. it's a pretty common use case.

  5. #5
    Sencha Premium User
    Join Date
    Feb 2009
    Kragujevac, Serbia


    Great work figuring that out mate! Thumbs up!

  6. #6


    After many tries I have found this solution with SA.

    -Download CheckColumn.js from Api
    In Sencha Architect
    -Add a simple Ext.grid.column.column

    -in property tdCls add 'grid-cell-checkcolumn'

    -add this basic functions: constructor, processEvent
    copy and paste the codes of this functions from CheckColumn.js
    and remove or add comments in this lines

    /*else {
    return me.callParent(arguments);
    This because we dont'have inheritance but we are overriding default methods.

    -add a renderer: copy and paste code form CheckColumn.js
    PHP Code:
    var cssPrefix Ext.baseCSSPrefix,cls = [cssPrefix 'grid-checkheader'];
    if (value===true) {
    // i have edit this line, bacause in my project i have boolean value, but i think you can have string, number, etc    
    cls.push(cssPrefix 'grid-checkheader-checked');}return '<div class="' cls.join(' ') + '"> </div>'

    -add this icons in your project workspace
    search this icon in ExtJs 4 package

    -add a css resources file
    CheckHeader.css (you can find this in ExtJs 4 package)
    edit css inserting your path of images


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