Hybrid View

  1. #1
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default "Smart" CheckBoxSelectionModel

    "Smart" CheckBoxSelectionModel


    This modification is based on the standard grid CheckboxSelectionModel but with a twist: it will check/select specific rows when a grid loads based on a dataIndex YOU supply!

    Features:
    - Selects and checks grid rows based off JSON/XML response from server upon initial load
    - Remembers state of grid as you reorder columns
    - Checkbox clicking and Row selecting can work together, separate, or even as a combination of the two
    - Includes all functionality of both the RowSelectionModel and the CheckboxSelectionModel

    Compatibility:
    - This extension has been tested and works properly with ExtJS version 2.1 through 3.1.2
    - This extension works properly with Saki's RowAction, CellAction, and HttpProvider extensions.

    Usage:
    Code:
    var sm = new Ext.grid.SmartCheckboxSelectionModel({
         dataIndex:'checked',
         email: true, // separates checkbox clicking from row selecting
    });
    Store Data:
    All you have to do is set 'checked' to be 'true' or 'false' in your Array or JSON/XML string. For example:
    Code:
    {"totalCount":1,"data":[{"checked":"true","id":"1","location":"Atlanta","product":"Retail","car":"Luxury"},{"checked":"false","id":"2","location":"Atlanta","product":"Retail","car":"SUV"}]}
    We pass in the supplied variable and voila, the grid is rendered with specific rows pre-checked AND pre-selected. Just add the selectionModel to your reader and gridPanel and you're done.

    Options:
    - excel: if set to true, your grid selection will work like Microsoft Excel. Clicking a row selects that row. Clicking a second row, unselects the first row and selects the new row instead. Holding down CTRL or Shift selects multiple rows at once. If this option is set to false (the default), then CTRL is assumed to be held down as you click different rows.
    - email: if set to true, the checking of a checkbox and the selecting of a row will be separated out. When you click a checkbox, only the checkbox will be checked; the row itself will not become selected. This allows you to apply different actions on rows based on whether the row is checked, selected, or a combination of the two. The default is false, meaning as you click a checkbox it will also select the row, and vice-versa.
    - alwaysSelectOnCheck: if set to true, clicking a checkbox will always select the row... but selecting a row will NOT check the checkbox. The default is false, and this option works in conjunction with the email option.
    - useStateManager: if set to true, the built-in Cookie StateManager will be used, unless you are using an alternative StateManager such as Saki's Http StateManager. if set to false, the Cookie StateManager will not be used. If you are having compatibility issues with other StateManagers or just don't need that functionality for your project, set this config option to false.

    More Details:
    - All the base functionality of the standard RowSelectionModel and CheckboxSelectionModel are present, including using the UP and DOWN arrow keys to navigate (select/check) up and down the grid, using SHIFT to select multiple rows at once, clicking the checkbox header to check/select and uncheck/de-select all the rows, and simple clicking around the grid to select anything you desire.

    Latest Updates:
    v.1.8 <March 23, 2011>: new features, bug fixes, compatibility fixes
    - new events, "checked" and "beforerowdeselect", both user requested
    - new config option, "useStateManager", set to true to use the Cookie StateManager by default, or false to use your own StateManager
    - compatibility fix, the default Cookie StateManager no longer conflicts with Saki's Http StateManager
    - bug fix, the header ID is now uniquely generated as to avoid conflicts with multiple grids rendered on the same page
    - tested with ExtJS v.3.2.1; let me know if there are any issues!

    PHP Code:
    /**
     * @class Ext.grid.SmartCheckboxSelectionModel
     * @extends Ext.grid.RowSelectionModel
     *
     * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.
     * By passing in a dataIndex and a store, it can pre-check (and select) rows after it renders.
     * Included are all the standard navigation options of a RowSelectionModel, including Up/Down arrow keyMaps and Ctrl/Shift selections.
     *
     * @param    (object)    config        The configuration options, as highlighted below
     * @param   (string)    dataIndex    The field that contains the boolean true/false value for checked/selected rows        
     *
     * @copyright   June 4, 2008        <last updated: March 23, 2011>
     * @author      NoahK17        
     * @version        1.8
     */
    Ext.grid.SmartCheckboxSelectionModel Ext.extend(Ext.grid.RowSelectionModel, {
        
    /**
         * @width        (int)    The default width in pixels of the checkbox column (defaults to 20).
         */
        
    width20,
        
    /**
         * @sortable    (bool)    Set to true if you want the checkbox column to be sortable.
         */
        
    sortablefalse,
        
    /**
         * @email        (bool)   Will mimic email client functionality by separating out the selection of rows
         *                        with the checking of rows, similar to how Yahoo! or Gmail works. One could then
         *                        apply different actions on checked rows vs. selected rows.
         *                        Defaults to false. 
         */
        
    emailfalse,
        
    /**
         * @excel        (bool)   Mimics excel functionality when clicking on rows or checkboxes. If set to true,
         *                        all other rows will be deselected and unchecked except the row you most recently
         *                        clicked. If set to false, all previous selections will remain selected and/or checked
         *                        as you click around the grid (as if you were holding down CTRL and clicking).
         *                        Defaults to true. 
         */
        
    exceltrue,
        
        
    /**
         * @alwaysSelectOnCheck        
         *                (bool)  If set to true, clicking a checkbox will always select the row, working in conjunction
         *                        with the email option.
         *                        Defaults to false.
         *
         */
        
    alwaysSelectOnCheckfalse,
        
        
    /**
         * @userStateProvider        
         *                (bool)  If set to true, the selection model will attempt to use the CookieState Provider by
         *                          default, unless you are already using a different provider, such as Saki's HttpProvider,
         *                          in which case the already existing provider will be used. If set to false, no provider
         *                          will be used, which may allow for better compatibility.
         *                        Defaults to true.
         *
         */
        
    useStateProvidertrue,
        
        
    // private
        
    menuDisabled:true,
        
    fixed:true,
        
    id'checker',
        
    dataIndex''// Define the dataIndex when you construct the selectionModel, not here

        
    constructor: function()
        {
            
    // Define the header using a unique Id (e.g., ext-gen12)
            
    this.headerId Ext.id();
            
    this.header '<div id="'this.headerId +'" class="x-grid3-hd-checker"> </div>';
                    
            
    // Add some events
            
    this.addEvents(
                    
    /**
                     * @event check
                     * Fires when the checkbox is checked or unchecked.
                     * @param {SelectionModel}     this
                     * @param {Number}             rowIndex      The checked row index
                     * @param {Ext.data.Record} r             The checked record
                     * @param {Bool}             checked        The new checked value
                     */
                    
    "check"// courtesy of Sencha forum user renku
                    
                    /**
                     * @event beforerowdeselect
                     * Fires just before a row is de-selected.
                     * @param {SelectionModel}    this
                     * @param {Number}            rowIndex     The row's row index
                     * @param {Ext.data.Record} r              The row's record
                     */                
                    
    "beforerowdeselect" // user requested
            
    );
            
            
    // Call the parent
            
    Ext.grid.SmartCheckboxSelectionModel.superclass.constructor.apply(this,arguments);
        },    
        
        
    // private
        
    initEvents : function(){
            
    // Call the parent
            
    Ext.grid.SmartCheckboxSelectionModel.superclass.initEvents.call(this);
            
            
    // Assign the handlers for the mousedown events
            
    this.grid.on('render', function(){
                var 
    view this.grid.getView();
                
    view.mainBody.on('mousedown'this.onMouseDownthis);
                
    Ext.fly(view.innerHd).on('mousedown'this.onHdMouseDownthis);
            }, 
    this);        
            
    // Disable the rowNav created in our parent object, otherwise pressing DOWN will go down two rows!
            
    this.rowNav.disable();
            
    // Create our new rowNav that controls checkboxes as well
            
    this.rowNav2 = new Ext.KeyNav(this.grid.getGridEl(), {
                
    "up" : function(e){
                    if(!
    e.shiftKey){
                        if (!
    this.email) {
                            
    this.selectPreviousChecked(e.shiftKey);
                        } else {
                            
    this.selectPrevious(e.shiftKey);
                        }
                    } else if(
    this.last !== false && this.lastActive !== false) {
                        var 
    last this.last;
                        if (!
    this.email) {
                            
    this.selectRangeChecked(this.lastthis.lastActive-1);
                        } else {
                            
    this.selectRange(this.last,  this.lastActive-1);
                        }
                        
    this.grid.getView().focusRow(this.lastActive);
                        if (
    last !== false) {
                            
    this.last last;
                        }
                    } else {
                        
    this.selectFirstRow();
                        if (!
    this.email) { this.toggleChecked(0true); }
                    }
                },
                
    "down" : function(e){
                    if(!
    e.shiftKey){
                        if (!
    this.email) {
                            
    this.selectNextChecked(e.shiftKey);
                        } else {
                            
    this.selectNext(e.shiftKey);
                        }
                    } else if (
    this.last !== false && this.lastActive !== false) {
                        var 
    last this.last;
                        if (!
    this.email) {
                            
    this.selectRangeChecked(this.lastthis.lastActive+1);
                        } else {
                            
    this.selectRange(this.last,  this.lastActive+1);
                        }
                        
    this.grid.getView().focusRow(this.lastActive,true);
                        if (
    last !== false) {
                            
    this.last last;
                        }
                    } else {
                        
    this.selectFirstRow();
                        if(!
    this.email){ this.toggleChecked(0true); }
                    }
                },
                
    scopethis
            
    });
            
    // Listen for the movement of the columns  
            
    this.grid.on('columnmove', function(p){
                var 
    Ext.get(this.headerId);
                if (
    != null) {
                    if(
    t.dom.className != 'x-grid3-hd-checker'){
                        
    Ext.fly(t.dom.parentNode).removeClass('x-grid3-hd-checker');
                    }
                }
            });
            
    // If we sent a store to the selModel, auto-select rows based on dataIndex
            
    if (this.grid.store){
                
    this.grid.store.on('load', function(p){
                    
    // This block of code checks the status of the checkbox header, 
                    // and if checked, will check all other checkboxes (but not on the initial load)
                    
    var Ext.get(this.headerId);
                    if (
    != null) {
                        if(
    t.dom.className == 'x-grid3-hd-checker'){
                            if (
    this.useStateProvider) {
                                if (
    Ext.state.Manager.loaded) {
                                    var 
    hd Ext.fly(t.dom.parentNode);
                                    var 
    isChecked hd.hasClass('x-grid3-hd-checker-on');
                                    if (
    isChecked) {
                                        
    hd.addClass('x-grid3-hd-checker-on');
                                        if(!
    this.email){ this.selectAll(); }
                                        
    this.selectAllChecked(true);
                                    }
                                }
                            } else {
                                var 
    hd Ext.fly(t.dom.parentNode);
                                var 
    isChecked hd.hasClass('x-grid3-hd-checker-on');
                                if (
    isChecked) {
                                    
    hd.addClass('x-grid3-hd-checker-on');
                                    if(!
    this.email){ this.selectAll(); }
                                    
    this.selectAllChecked(true);
                                }
                            }
                        } else {
                               
    Ext.fly(t.dom.parentNode).removeClass('x-grid3-hd-checker');
                        }
                    }
                
                    
    // This block of code will pre-select checkboxes based on the dataIndex supplied,
                    // but only on the initial load.
                    
    var dataIndex this.grid.getSelectionModel().dataIndex// the dataIndex for the selectionModel
                    
    var count this.grid.store.getCount();
                    for (var 
    0len countleni++) {
                        var 
    dataIndexValue this.parseBoolean(p.data.items[i].data[dataIndex]); // the value of the dataIndex for each row
                        
    var isSelected this.isSelected(i);
                        if (
    dataIndexValue == true || isSelected) {
                            if (
    this.useStateProvider) {
                                if (!
    Ext.state.Manager.loaded) {
                                    
    // This code will only run the first time a grid is loaded 
                                    // Make sure that any "checked" rows are also selected
                                    
    if (!this.email || this.alwaysSelectOnCheck) { this.grid.getSelectionModel().selectRow(itrue); }
                                }
                            } else {
                                if (!
    this.email || this.alwaysSelectOnCheck) { this.grid.getSelectionModel().selectRow(itrue); }
                            }
                        } else if(
    isSelected) {
                            
    // Let the state.Manager check the correct rows now
                            
    if(!this.email){ this.toggleChecked(itrue); }
                        } else {
                            
    // Uncheck everything else
                            
    if(!this.email){ this.toggleChecked(ifalse); }
                        }
                    }
                }, 
    this);
            }
        },
        
        
    /**
         * private custom function written by Sencha forum user Greffin
         * 
         * this ensures that the true/false value of the dataIndex
         * is actually a boolean value and not a string
         * 
         * @param    (mixed)        value        the value you want to check
         * 
         * @access  private
         */
        
        
    parseBoolean : function(value){
            if (
    Ext.isDefined(value) && Ext.isString(value)) {
                return (
    value.toLowerCase() == 'true' true:false);
            }
            return 
    value;
        },

        
    /**
         * private function that controls the checkboxes
         *
         * @param    (int)    rowIndex    the row you want to toggle
         * @param    (bool)   c           optional flag set to either true (to check) or false (to uncheck)
         *                                if no second param, the checkbox will toggle itself
         *                                
         * @access     private                                
         */
        
    toggleChecked : function(rowIndexc){
            if (
    this.locked) { return; }
            var 
    record this.grid.store.getAt(rowIndex);
            
    // Determine if we are checking, unchecking, or toggling
            
    var checked = (typeof c === "boolean") ? : !record.data[this.dataIndex];
            
    // Set the record
            
    record.set(this.dataIndexchecked);
            
    // Fire the "check" event
            
    this.fireEvent("check"thisrowIndexrecordchecked);
        },

        
    /**
         * private functions that toggles all checkboxes on or off depending on param
         *
         * @param    (bool)    c        true to check all checkboxes, false to uncheck all checkboxes        
         * @param    (int)     e        (optional) if an exception is given, all rows will be checked/unchecked except this row        
         */
        
    selectAllChecked : function(ce){
            if (
    this.locked) { return; }
            var 
    count this.grid.store.getCount();
            for (var 
    0len countleni++) {
                if(
    c){
                    if(
    !== e){
                        
    this.toggleChecked(itrue);
                    }
                } else {
                    if(
    !== e){
                        
    this.toggleChecked(ifalse);
                    }
                }
            }            
        },
        
        
    /**
         * private function that clears all checkboxes
         * specifically used to deal with shift+arrow keys,
         * but can also be called with fast param to quickly uncheck everything
         *
         * @param    (bool)    fast    true to quickly deselect everything with no exceptions
         * 
         * @access     private
         */
        
    clearChecked : function(fast){
            if (
    this.locked) { return; }
            if (
    fast !== true) {
                var 
    count this.grid.store.getCount();
                for(var 
    0len countleni++){
                    var 
    isSelected this.isSelected(i);
                    if(!
    isSelected){
                        
    this.toggleChecked(ifalse);
                    }
                }
            } else {
                
    // Quick and dirty method to uncheck everything
                
    this.selectAllChecked(false);
            }
            
    this.last false;
        },    
        
        
    /**
         * private function used in conjuction with the shift key for checking multiple rows at once
         * 
         * @access     private
         */
        
    selectRangeChecked : function(startRowendRowkeepExisting){
            if (
    this.locked) { return; }
            if (!
    keepExisting) {
                if(!
    this.email || this.alwaysSelectOnCheck){ this.clearSelections(); }
                
    this.clearChecked();
            }    
            if (
    startRow <= endRow) {
                for(var 
    startRow<= endRowi++){
                    if(
    this.grid.store.getAt(i)){
                        
    this.toggleChecked(itrue);
                        if(!
    this.email || this.alwaysSelectOnCheck){ this.selectRow(itrue); }
                    }
                }
            } else {
                for (var 
    startRow>= endRowi--) {
                    if (
    this.grid.store.getAt(i)) {
                        
    this.toggleChecked(itrue);
                        if(!
    this.email || this.alwaysSelectOnCheck){ this.selectRow(itrue); }
                    }
                }
            }    
        },
        
        
    /**
         * private function that is used with the UP arrow keyMap
         * 
         * @access     private
         */
        
    selectPreviousChecked : function(keepExisting){
            if(
    this.hasPrevious()){
                
    // Select the next row
                
    this.selectRow(this.last-1keepExisting);
                
    // Set the focus
                
    this.grid.getView().focusRow(this.last);
                if(!
    this.email){         
                    
    // Check the current (selected) row
                    
    this.toggleChecked(this.lasttrue);
                    
    // Uncheck all other rows
                    
    this.selectAllChecked(falsethis.last);
                }
                return 
    true;
            }
            return 
    false;
        },
        
        
    /**
         * private function that is used with the DOWN arrow keyMap
         * 
         * @access     private
         */      
        
    selectNextChecked : function(keepExisting){
            if(
    this.hasNext()){
                
    // Select the next row
                
    if(!this.email){ this.selectRow(this.last+1keepExisting); }
                
    // Set the focus
                
    this.grid.getView().focusRow(this.last);
                if(!
    this.email){      
                    
    // Check the current (selected) row
                    
    this.toggleChecked(this.lasttrue);
                    
    // Uncheck all other rows
                    
    this.selectAllChecked(falsethis.last);
                }
                return 
    true;
            }
            return 
    false;
        },    
       
        
    /**
         * private function that executes when you click on any row
         * will keep other row selections active as you click around
         * 
         * @access     private
         */
        
    handleMouseDown : function(growIndexe){
            var 
    e.getTarget('.ux-row-action-item');
            if (!
    t) {
                if(
    e.button !== || this.isLocked()){
                    return;
                };
                var 
    view this.grid.getView();
                var 
    record this.grid.store.getAt(rowIndex);
                if (
    e.shiftKey && this.last !== false) {
                    var 
    last this.last;
                    
    this.selectRange(lastrowIndexe.ctrlKey);
                    if(!
    this.email){ this.selectRangeChecked(lastrowIndexe.ctrlKey); }
                    
    this.last last// reset the last
                    
    view.focusRow(rowIndex);
                } else {
                    var 
    isChecked this.parseBoolean(record.data[this.dataIndex]);
                    var 
    isSelected this.isSelected(rowIndex);
                    
                    if (
    isSelected) {
                        
    this.fireEvent("beforerowdeselect"thisrowIndexrecord);
                        
    this.deselectRow(rowIndex);
                        if(!
    this.email){ this.toggleChecked(rowIndexfalse); }
                    } else {
                        if (!
    this.excel) {
                            
    this.selectRow(rowIndextrue);
                            if(!
    this.email){ 
                                
    this.toggleChecked(rowIndextrue);
                            }
                        } else {
                            
    this.selectRow(rowIndexe.ctrlKey);
                            if(!
    this.email){
                                
    this.selectRangeChecked(rowIndexrowIndexe.ctrlKey);
                            }
                        }
                        
    view.focusRow(rowIndex);
                    }
                }
            }
        },
        
        
    /**
         * private function restricted to execute when you click a checkbox itself
         * 
         * @access     private
         */
        
    onMouseDown : function(et){
            if(
    t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
                
    e.stopEvent();
                
    // Define variables
                
    var view this.grid.getView();
                var 
    rowIndex view.findRowIndex(t);
                var 
    record this.grid.store.getAt(rowIndex);            
                var 
    isSelected this.isSelected(rowIndex);
                var 
    isChecked this.parseBoolean(record.data[this.dataIndex]);
                
    // Logic to select/de-select rows and the checkboxes
                
    if (!this.email || this.alwaysSelectOnCheck) {
                    if (
    isSelected){
                        if (!
    isChecked && this.alwaysSelectOnCheck) {
                            
    this.toggleChecked(rowIndextrue);
                        } else {
                            
    this.fireEvent("beforerowdeselect"thisrowIndexrecord);
                            
    this.deselectRow(rowIndex);
                            
    this.toggleChecked(rowIndexfalse);
                        }
                    } else {
                        
    this.selectRow(rowIndextrue);
                        
    this.toggleChecked(rowIndextrue);
                        
    view.focusRow(rowIndex);
                    }
                } else {
                    if (
    isChecked){
                        
    this.toggleChecked(rowIndexfalse);
                    } else {
                        
    this.toggleChecked(rowIndextrue);
                    }
                }
                
    view.focusRow(rowIndex);
            }
            
    // Load the state manager if one does not already exist
            
    if (this.useStateManager) {
                if (
    typeof Ext.state.Manager.getProvider().path == 'undefined') {
                    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());            
                }
                
    Ext.state.Manager.loaded true;
            }
        },
        

        
    /**
         * private function that executes when you click the checkbox header
         * 
         * @access     private
         */
        
    onHdMouseDown : function(et){
            if(
    t.className == 'x-grid3-hd-checker'){
                
    e.stopEvent();
                var 
    hd Ext.fly(t.parentNode);
                var 
    isChecked hd.hasClass('x-grid3-hd-checker-on');
                if(
    isChecked){
                    
    hd.removeClass('x-grid3-hd-checker-on');
                    if(!
    this.email || this.alwaysSelectOnCheck){ this.clearSelections(); }
                    
    this.clearChecked(true); // the true param enables fast mode
                
    } else {
                    
    hd.addClass('x-grid3-hd-checker-on');
                    if(!
    this.email || this.alwaysSelectOnCheck){ this.selectAll(); }
                    
    this.selectAllChecked(true);
                }
            }
            
    // Load the state manager if one does not already exist
            
    if (this.useStateManager) {
                if (
    typeof Ext.state.Manager.getProvider().path == 'undefined') {
                    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());            
                }
                
    Ext.state.Manager.loaded true;
            }      
        },
        
        
    /**
         * private function that renders the proper checkbox based on your dataIndex variable
         *
         * @param    (varchar)    v        the dataIndex passed into the selectionModel that contains whether a row is checked by default or not
         * 
         * @access     private
         */
        
    renderer : function(vprecord){
            
    p.css += ' x-grid3-check-col-td';
            
    this.parseBoolean(v); // make sure the v variable is a boolean value
            
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
        }
    });
    /* eof */ 
    Version History:
    v1.0 <June 4, 2008>: initial release
    v1.1 <June 5, 2008>: bug fixes and new features
    - added state.Manager functionality to ensure checked/selected state is saved after initial load
    - added more "smart" when handling shift+selecting up and down the grid
    - removed need to include the gridID parameter
    - more commenting added
    v1.2 <June 6, 2008>: bug fix
    - changed location of state.Manager to remember the state of the grid after any onClick
    v1.3 <June 9, 2008>: new features
    - the paging.Toolbar now remembers the state of the header checkbox, so records can be auto-selected as you page
    - removed need to include the store in the selection model
    v1.4 <June 23, 2008>: bug fixes and new features
    - added two new config options, "email" and "excel", see documentation for more details
    - fixed small bug if checkbox header was disabled
    - more commenting added
    v1.5 <June 24, 2008>: bug fixes and a new feature
    - added new config option, "alwaysSelectOnCheck", see documentation for more details
    - fixed bug using up and down arrow keys
    - replaced a small piece of ASCII code that was translating into an * on the forums
    v1.6 <June 26, 2008>: compatibility fix
    - added code to make this selectionModel compatible with Saki's "RowActions" plugin
    v.1.7 <July 1, 2008>: bug fix
    - added support for non-checkbox/non-blank headers; see documentation for specific usage
    Last edited by NoahK17; 28 Apr 2013 at 6:27 PM. Reason: Updated to version 1.8
    Noah
    Senior Web Developer
    NBA.com

  2. #2
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    Attached is a screenshot which shows rows being pre-selected and pre-checked based off a JSON response string from a PHP script using a MySQL server.
    Attached Images
    Noah
    Senior Web Developer
    NBA.com

  3. #3
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    4
    mystix will become famous soon enough

      0  

    Default


    eh? where's the screenshot?

  4. #4
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    Whoops, all fixed. It basically combines the functionality of a RowSelectionModel (up/down arrows, shift/ctrl selection), and a CheckboxSelectionModel (header check all/uncheck all) and the additional functionality of pre-checking/selecting rows based off the selectionModel dataIndex and saving the state as you re-order columns.

    Woohoo!

    Feel free to offer any suggestions!
    Noah
    Senior Web Developer
    NBA.com

  5. #5
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    Upgraded to v1.3 with new features:
    - If you click the header checkbox, this SmartCheckboxSelectionModel assumes that you want to select ALL records, and not just what appears on the grid. If you have 100 records, but only show 10 at a time, clicking the header checkbox will "select" all 100 records, so as you page, you will see every record checked. If you do not desire this functionality, the new block of code can easily be commented out.
    - In addition, you no longer need to manually send in the store to the selectionModel, as the store is now derived from the grid itself.

    Cheers!
    Noah
    Senior Web Developer
    NBA.com

  6. #6
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Excellent work,

    Please live example for test!!!

    Thanks in advance,

  7. #7
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    Updated to v1.4:
    - new config options, "email" and "excel"

    email: Setting email to true or false in the selection model constructor changes the default behavior of the checkboxes. If set to true, clicking a checkbox will NOT change the row selection, it will ONLY check or uncheck the checkbox itself. This mimics the way various "email clients" behave, like Yahoo! or Gmail! Having email set to true allows you to apply different actions on your grid rows based on whether they are checked OR selected. If set to false, clicking a checkbox will also select the row and vice-versa. This setting defaults to false.

    excel: Setting excel to true or false changes the way row selection works. If excel is set to true, clicking on a row will deselect all other rows, except for the row you just clicked. If set to false, all previous row selections will remain selected as you click around (just as if you were holding down CTRL and clicking a new row). This setting defaults to false.

    Cheers!
    Noah
    Senior Web Developer
    NBA.com

  8. #8
    Ext User
    Join Date
    Oct 2007
    Posts
    23
    Vote Rating
    0
    Max Ishchenko is on a distinguished road

      0  

    Default


    I'm using the SmartCheckboxSelectionModel in a grid which is hidden by default. It's located in a tab with lazy loading.
    I use loadData for loading the store, and checkboxes are checked correctly, but the rows with checked checkboxes are not selected. When clicking on the raw that was checked (but not selected) it gets checked, and the checkbox remains checked. Next clicks check/uncheck the checkbox and select/deselect the row.
    I'd like to have not only checkboxes checked, but rows selected on load.
    It seems that 'load' event listener does this, but it is not being invoked at all when using loadData (or supplying 'data' config option in store config).

  9. #9
    Ext User
    Join Date
    Oct 2007
    Posts
    23
    Vote Rating
    0
    Max Ishchenko is on a distinguished road

      0  

    Post


    My problem is solved now.
    If you use inline data for your store (i.e. 'data' config parameter) the selectionmodel won't be attached to 'load' event listeners yet. Thus, no rows will be actually selected.
    The solution is like
    Code:
    mygrid.on('render', function () {
        this.getStore().loadData(mydata)
    })

  10. #10
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    Score! Glad you figured it out
    Noah
    Senior Web Developer
    NBA.com

Similar Threads

  1. Smart tooltip
    By same66 in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 24 Feb 2011, 7:02 PM
  2. Ext.each : with remove - not smart enough
    By DaveC426913 in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 30 Nov 2010, 10:36 AM
  3. Is smart rendering possible in grid???
    By jeff77 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 10 Sep 2010, 12:03 AM
  4. Smart Ext toolbar
    By tinnt in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 20 Nov 2008, 7:04 PM
  5. GridPanel - smart rendering
    By embolooloo in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 8 Oct 2007, 7:57 PM

Thread Participants: 62

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar