Search code examples
javascriptextjsextjs3

ExtJS 3 DataGrid: How to make inactive the last checked item in header menu


Subj.

In my case, I can remove all the check boxes - this is wrong. It should be like an Sencha GXT CheckBox Grid: https://i.sstatic.net/rhRCr.png

Description: 1) Datagrid is rendered 2) Click on the sorting menu, choice "Columns" 3) Hide some columns in any order (4 of 5, for example) 4) The last menu item should become inactive like on the screenshot.

The last - I meant that it is not item with id = (colCount - 1).


Solution

  • GridView is responsible for handling Header menus and this includes Columns menu. But GridView doesn't have the behavior you asked for.

    To accomplish this behavior, you should implement it.

    As i mentioned above, menus controlled by view, if you check docs and source, you'll notice that view has a property named colMenu which points the column show/hide menu. and you can listen it's events to implement the behavior.

    here how i accomplished this behavior:

    ...
    // we need to wait until the grid is rendered, because colMenu doesn't exist
    // until the grid and its view is rendered.
    grid.on( 'afterrender', function() {
    
        this.view.colMenu.on( 'itemclick', function( item, e ){
    
            // active will contain visible columns
            var active = [], i;
    
            // iterate through all menu items to find checked ones
            for ( i = 0; i < this.items.items.length, i++ ) {
                if ( this.items.items[ i ].checked ) active.push( this.items.items[ i ] );
            };
    
            // if there is only one active one, disable it
            if ( active.length == 1 ) {
                active[ 0 ].disable();
    
            // if there is more then one, enable the disabled ones
            } else if ( active.length > 0 ) {
                for( i = 0; i < active.length; i++ ) {
                    if ( active[ i ].disabled ) active[ i ].enable();
                }
            }
    
        // buffer is important for our itemclick event listener.
        // it'll wait 100ms after default itemclick event to finish its job.
        }, this.view.colMenu, { buffer : 100 } );
    } );