1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    65
    Answers
    1
    Vote Rating
    3
    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
    4,900
    Answers
    369
    Vote Rating
    176
    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
    3
    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
    4,900
    Answers
    369
    Vote Rating
    176
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi