1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    65
    Answers
    1
    Vote Rating
    4
    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,032
    Answers
    390
    Vote Rating
    185
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    65
    Answers
    1
    Vote Rating
    4
    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,032
    Answers
    390
    Vote Rating
    185
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1

Tags for this Thread