1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    178
    Vote Rating
    2
    Answers
    4
    renganathan is on a distinguished road

      0  

    Default Unanswered: How to hide certain checkbox in a CheckboxSelectionModel ?

    Unanswered: How to hide certain checkbox in a CheckboxSelectionModel ?


    I tried the following code but is not working

    can somebody help me how to do that?

    i am using extjs4.1

    Code:
            var TBScabModel = new Ext.selection.CheckboxModel( 
            {
                listeners        :
                {
                    checkOnly    : true,
                    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) 
                    {
                        metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
                        var html = '';
                        if (record.get('relation') == 'parent') 
                        {
                           html = '';
                        } 
                        else 
                        {   
                            html = '<div class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
                        }
                        
                        return html;
                    },
                    selectionchange: function(model, record, options)
                    {  
                        if (model.getCount()) 
                        {
                            Ext.getCmp('addtoTB').enable();
                        } 
                        else 
                        {
                            Ext.getCmp('addtoTB').disable();
                        }
                    }
                    ,scope: this
                }
            });
    Thanks,

    RENGANATHAN M G

  2. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Try this:
    Code:
    Ext.create('Ext.grid.Panel', {
        ...
        selType: 'checkboxmodel',
        selModel: {
            renderer: function(){
                var baseCSSPrefix = Ext.baseCSSPrefix;
                metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
                return record.get('relation') == 'parent' ? '' : '<div class="' + baseCSSPrefix + 'grid-row-checker">&#160;</div>';
            }
        },
        ...
    });

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    178
    Vote Rating
    2
    Answers
    4
    renganathan is on a distinguished road

      0  

    Default How to hide certain checkbox in a CheckboxSelectionModel ?

    How to hide certain checkbox in a CheckboxSelectionModel ?


    Hi ,

    Thanks for your prompt reply.

    unfortunately this code is not working for me



    Quote Originally Posted by vietits View Post
    Try this:
    Code:
    Ext.create('Ext.grid.Panel', {
        ...
        selType: 'checkboxmodel',
        selModel: {
            renderer: function(){
                var baseCSSPrefix = Ext.baseCSSPrefix;
                metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
                return record.get('relation') == 'parent' ? '' : '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>';
            }
        },
        ...
    });
    Thanks,

    RENGANATHAN M G

  4. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      1  

    Default


    Here is my full example. It works well with Ext 4.1.1 and Chrome 20. In this example, you will see, rows with price greater than 50 will not show checkbox:
    Code:
    Ext.onReady(function() {
        Ext.define('Company', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'company'},
               {name: 'price',      type: 'float', convert: null,     defaultValue: undefined},
               {name: 'change',     type: 'float', convert: null,     defaultValue: undefined},
               {name: 'pctChange',  type: 'float', convert: null,     defaultValue: undefined},
               {name: 'lastChange', type: 'date',  dateFormat: 'n/j h:ia', defaultValue: undefined}
            ],
            idProperty: 'company'
        });
    
        // sample static data for the store
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
    
        // create the data store
        var store = Ext.create('Ext.data.Store', {
            model : 'Company',
            data: myData
        });
    
        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            height: 350,
            width: 600,
            selType: 'checkboxmodel',
            selModel: {
                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                    var baseCSSPrefix = Ext.baseCSSPrefix;
                    metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
                    return record.get('price') > 50 ? '' : '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>';
                },
            },
            title: 'Array Grid',
            renderTo: Ext.getBody(),
            columns: {
                items: [{
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                },{
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                },{
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'change',
                    hidden   : true
                },{
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'pctChange',
                    hidden   : true
                },{
                    text     : 'Last Updated',
                    width    : 100,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                }]
            }
        });
    });

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    235
    Vote Rating
    0
    chandan.behura is on a distinguished road

      0  

    Default


    Hi,
    I did not worked for me.
    I have done something like that

    Code:
    var sm = Ext.create('Ext.selection.CheckboxModel');
    .........
        store: 'ABC',
         selModel : sm,
          enableColumnResize:false,
            columns: [ 
                       {
                     menuDisabled: true,
                dataIndex: 'shippingConditionValue',
                text: 'All',
                flex: 1
            } ],
             selType: 'checkboxmodel',
             .....
    });

  6. #6
    Sencha User
    Join Date
    Apr 2014
    Posts
    15
    Vote Rating
    0
    Answers
    1
    anant.choubey is on a distinguished road

      0  

    Default Worked For me

    Worked For me


    Hi,

    The solution from vietits worked for me.

    Thanks a lot.