1. #1
    Ext User
    Join Date
    Jun 2008
    Posts
    10
    Vote Rating
    0
    mundy is on a distinguished road

      0  

    Default Checkbox in a Grid Column (not for selection)

    Checkbox in a Grid Column (not for selection)


    I've done a bit of searching the forums and Google on this, but haven't had much luck.

    What I want to do is place a checkbox column into my grid, not for row selection but to show a value.

    I'll describe what I have so far...

    Basically its just a very basic Grid that lists users for a small intranet I'm making. It shows things like name, email, login, job title etc... One of the fields is "disabled" which if yes means their account is disabled and cannot be used.

    What I want to be able to do is use a checkbox in this column to first display the account disabled state (on/off, true/false etc) and second tie a listener to it so that when the user toggles it, update the users account etc.

    Is this possible? From my searching all I've found is discussion and how-tos on using the CheckboxSelectionModel class, which isn't what I'm after.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Could you just use a renderer? A renderer lets you alter what is displayed in a cell when the grid is rendered.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Jun 2008
    Posts
    10
    Vote Rating
    0
    mundy is on a distinguished road

      0  

    Default


    Hmm... I never thought of that (still somewhat new to Ext)

    I'll give it a go.

  4. #4
    Ext User
    Join Date
    Jun 2008
    Posts
    10
    Vote Rating
    0
    mundy is on a distinguished road

      0  

    Default


    I'm having some issues... I'm not even 100% sure I'm doing this right.

    Here is my code for the column:
    Code:
    {header: "Disabled", dataIndex: 'disabled', width: 70,
                renderer: function(value, cell) {
                    var cb = new Ext.form.Checkbox(
                        {
                            hideLabel: true,
                            renderTo: cell,
                            checked: value
                        }
                    );
                }
    }
    Using this code, the grid and the headers load but no data is shown.

    What am I doing wrong?

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      1  

    Default


    Lower level

    Code:
    renderer: function(value, cell)
    {
       return '<input type="checkbox" />';
    }
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext User
    Join Date
    Jun 2008
    Posts
    10
    Vote Rating
    0
    mundy is on a distinguished road

      0  

    Default


    oh ok...

    Would I then be able to use ext to add listeners etc to that checkbox?

    EDIT:

    Wait nevermind, I'm pretty sure I just answered my own question. Thanks for the help evant =)

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Isn't the Ext.grid.CheckColumn (from examples/grid/edit-grid.js) much better suited for this?

  8. #8
    Ext User
    Join Date
    Jun 2008
    Posts
    10
    Vote Rating
    0
    mundy is on a distinguished road

      0  

    Default


    It appears you are correct.

    I can't for the life of me find CheckColumn in the API documentation though. Am I missing something?

    It clearly works in this example:
    http://extjs.com/deploy/dev/examples...edit-grid.html

    Thanks for that Condor

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's not an "official" class, just an example.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It's not that useful though. You can't getChecked, or checkAll or uncheckAll which is what you might need to do with a column of checkboxes.

    What about this: http://extjs.com/forum/showthread.php?t=31036 ?