Checkbox rendering - grid column

[jsakalos]

Which checkboxes you want to hide; checkboxes in a data cell or checkboxes of CheckboxSelectionModel?

[mjlecomte]

In the demos for array grid, edit grid, they show how to use a renderer.

[albertixcom]

wow... flash response... great
I think is on CheckBoxSelectionModel. I mean:
I need hide checkbox if customer data have field "mobile" empty. This prevent to select rows with have no mobile and future checks on ServerSide. As I eplained, application have purpose to send SMS, than customers which have no Mobile inserted can't receive SMS.

Thank U again.
PS. Tomorrow I'll buy PACK-IT book, i'm very entusiast of EXT (I like OO programing style - Javascript is poor language, but i discover him again

[albertixcom]

in reply to:

In the demos for array grid, edit grid, they show how to use a renderer.

About demos (array grid ecc) : renderer
All explamples is focused to existent column in data definition, eg: amount : change color of css depend of value of amount ecc. In my case checkbox column have purpose to select only row and have no binding data i data storage, but must interact with data store to verify value of one field.

Thanks in advice.
Alberto

[jsakalos]

You can access record argument in your renderer such as:

var mobile = record.get('mobile');
if(true !== mobile) { // or whatever condition you need
    return '';
}
else {
    return '<div class="x-grid3-row-checker">&nbsp;</div>';
} 

However, keep in mind that not displaying the checkbox will not prevent record selection. You'll need to handle it programmatically.

[mjlecomte]

I think....or thought....Checkbox was just using images, either a checked or unchecked image box. So value for field could be 1 or 0. The renderer would just show the appropriate image for the underlying value. I would have looked at using click event on that column to change the value.

[mjlecomte]

Look at the last example in this section as another inspiration source:

http://extjs.com/learn/Ext_FAQ_Grid#...ing.2C_etc..29

[albertixcom]

Hi all,
Thanks for all contributors, this thread helped to clear some points of CheckboxSelectionModel.
1) Checkbox is not really <input> tag, only css class
2) Selection of some rows is insufficent for good validation (requires serverside post validation)
3) Better and clean solution is use "renderer"
NB: I've read API docs and I can't find explanation of parameters "renderer" function (look code below) but all coments in this post was helpfully to solve problem.

Screenshot

Ext.onReady(function(){

    var myData = [
        [ 'Albert Einstein', '05411799999', '333333333'],
        [ 'Albertino Einstein', '', '333334444'],
        [ 'Alberta Einstein', '05411799997', '']
    ];

    Ext.QuickTips.init();

    var fm = Ext.form;

    var sm = new Ext.grid.CheckboxSelectionModel({
        renderer: function(v, p, record)
        {
            return (record.data.cell!='')  ? '<div class="x-grid3-row-checker">&nbsp;</div>' : '';
        }
    });
    
    var cm = new Ext.grid.ColumnModel([
        { id:'fullname', header: "Full Name", dataIndex: 'fullname', width: 220 },
        { header: "Telephone", dataIndex: 'tel', width: 120 },
        { header: "Mobile", dataIndex: 'cell', width: 120 },
        sm
    ]);

    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'fullname'},
           {name: 'tel'},
           {name: 'cell'}
        ]
    });
    
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width:600,
        height:300,
        title:'Genius Family',
        frame:true,
        sm: sm
    });
    store.loadData(myData);
});

Alberto.

[mjlecomte]

Explanation is here:
http://extjs.com/deploy/dev/docs/?cl...ember=renderer

You need to follow the link provided at the end