1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    11
    Vote Rating
    1
    reselbob is on a distinguished road

      0  

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

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


    Hi:

    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,
    Bob

  2. #2
    Sencha Premium Member danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    383
    Vote Rating
    69
    danguba is a jewel in the rough danguba is a jewel in the rough danguba is a jewel in the rough

      0  
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    11
    Vote Rating
    1
    reselbob is on a distinguished road

      0  

    Default


    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
    Posts
    11
    Vote Rating
    1
    reselbob is on a distinguished road

      1  

    Default


    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 Member danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    383
    Vote Rating
    69
    danguba is a jewel in the rough danguba is a jewel in the rough danguba is a jewel in the rough

      0  

    Default


    Great work figuring that out mate! Thumbs up!
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Posts
    6
    Vote Rating
    0
    tecnosencha is on a distinguished road

      0  

    Default


    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
    constructor:
    ...
    //this.callParent(arguments)

    processEvent:
    /*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'];
    //alert('value='+value);
    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
    unchecked.gif
    checked.gif
    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

    End!



Thread Participants: 2

Tags for this Thread