1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    67
    Answers
    1
    Vote Rating
    5
    jkyoutsey is on a distinguished road

      0  

    Question Unanswered: ExtJS 4.2 checkcolumn with checkbox in header (NOT CheckboxSelectionModel!)

    Unanswered: ExtJS 4.2 checkcolumn with checkbox in header (NOT CheckboxSelectionModel!)


    I do NOT want to use CheckboxSelectionModel. It doesn't work as I need. I tried that and it didn't work out to the user experience we wanted. So, I'm just using a straight checkcolumn. I want to render a checkbox in the header and respond to it's events. I want to use the artificial CSS based checkbox from ExtJS, not an actual form checkbox.

    I tried this:
    Code:
             this.columns[0].setText('<div class="' + cls.join(' ') + ' ' + Ext.baseCSSPrefix + 'column-header-text">&#160;</div>');
    I tried it with various classes to no avail. Any hints would be greatly appreciated!

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,459
    Answers
    437
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Check out the source code for the checkboxmodel selection model. In the getHeaderConfig you can see how the header for the column is set up so that is displays a CSS checkbox.

    Then a headerclick listener is set up that calls onHeaderClick.

    You can use those code snippets to extend checkcolumn and make your own header / header click listener as needed.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    67
    Answers
    1
    Vote Rating
    5
    jkyoutsey is on a distinguished road

      0  

    Default


    I've dug at this and don't see how to affect the header. I see how to configure it, but I don't see how to apply that configuration to the header. I see that the CheckboxModel calls headerCt.add(checkbox, me.getHeaderConfig()); But view.headerCt is not documented and I don't understand how the config is applied. In my case, I do NOT want to ADD but I want to REPLACE/UPDATE just the cls on view.headerCt.items.items[0]. But it's not clear how to do that and I've tried six ways to sunday to make it work with no effect...
    Something like this:
    Code:
             var cssClass = Ext.baseCSSPrefix + 'column-header-checkbox';
             if (allSelected) {
                cssClass += '-checked';
             } else if (oneOrMoreSelected) {
                cssClass += '-tristate';
             }
    debugger;
             this.getView().headerCt.items.items[0].componentCls =  cssClass;
    I'm surprised how hard this is. I would think that a checkcolumn would allow me to put a checkbox in the header with less effort.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,459
    Answers
    437
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    The below snippet only gets you so far, but might help get you started. I pulled the config from checkboxmodel's getHeaderConfig method and modified it slightly and set that as the config for the My.ux.CheckColumn class extending the ExtJS CheckColumn class:

    Code:
    Ext.define('My.ux.checkcolumn', {
        extend: 'Ext.grid.column.CheckColumn',
        alias: 'widget.mycheckcolumn',
    
    
        text : '&#160;',
        sortable: false,
        draggable: false,
        resizable: false,
        hideable: false,
        menuDisabled: true,
        cls: Ext.baseCSSPrefix + 'column-header-checkbox'
    });
    
    
    
    
    var store = Ext.create('Ext.data.Store', {
        fields : ['name', 'email', 'phone', 'active'],
        data   : {
            items : [
                { name : 'Lisa',  email : 'lisa@simpsons.com',  phone : '555-111-1224', active : true  },
                { name : 'Bart',  email : 'bart@simpsons.com',  phone : '555-222-1234', active : true  },
                { name : 'Homer', email : 'home@simpsons.com',  phone : '555-222-1244', active : false },
                { name : 'Marge', email : 'marge@simpsons.com', phone : '555-222-1254', active : true  }
            ]
        },
        proxy  : {
            type   : 'memory',
            reader : {
                type : 'json',
                root : 'items'
            }
        }
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title    : 'Simpsons',
        height   : 200,
        width    : 400,
        renderTo : Ext.getBody(),
        store    : store,
        columns  : [
            { text : 'Name', dataIndex : 'name' },
            { text : 'Email', dataIndex : 'email', flex : 1 },
            { text : 'Phone', dataIndex : 'phone' },
            { xtype : 'mycheckcolumn', text : 'Active', dataIndex : 'active', width: 30 }
        ]
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

Thread Participants: 1

Tags for this Thread