1. #1
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,679
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default Ext.ux.grid.Search

    Ext.ux.grid.Search


    hi together,

    i made some minor fixes about the position of this ux inside the toolbar, to make it work with ext3.0. without these, the item appears on the right end of the toolbar. changes marked red.

    original topic:http://extjs.com/forum/showthread.php?t=23615

    note: this is not the latest version of the 2.x plugin!

    @saki: feel free to implement these changes, if you are porting the latest version to 3.0.


    kind regards, tobiu

    Code:
    /**
     * Search plugin for Ext.grid.GridPanel, Ext.grid.EditorGrid ver. 2.x or subclasses of them
     *
     * @author    Ing. Jozef Sakalos
     * @copyright (c) 2008, by Ing. Jozef Sakalos
     * @date      17. January 2008
     * @version   $Id: Ext.ux.grid.Search.js 728 2008-02-19 01:56:32Z jozo $
     *
     * @license Ext.ux.grid DragSelector is licensed under the terms of
     * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
     * that the code/component(s) do NOT become part of another Open Source or Commercially
     * licensed development library or toolkit without explicit permission.
     * 
     * License details: http://www.gnu.org/licenses/lgpl.html
     */
    
    Ext.namespace('Ext.ux', 'Ext.ux.grid');
    
    /**
     * @class Ext.ux.grid.Search
     * @extends Ext.util.Observable
     * @param {Object} config configuration object
     * @constructor
     */
    Ext.ux.grid.Search = function(config) {
        Ext.apply(this, config);
        Ext.ux.grid.Search.superclass.constructor.call(this);
    }; // eo constructor
    
    Ext.extend(Ext.ux.grid.Search, Ext.util.Observable, {
        /**
         * @cfg {String} searchText Text to display on menu button
         */
         searchText:'Search'
        /**
         * @cfg {String} searchTipText Text to display as input tooltip. Set to '' for no tooltip
         */ 
        ,searchTipText:'Type a text to search and press Enter'
        /**
         * @cfg {String} selectAllText Text to display on menu item that selects all fields
         */
        ,selectAllText:'Select All'
        /**
         * @cfg {String} position Where to display the search controls. Valid values are top and bottom (defaults to bottom)
         * Corresponding toolbar has to exist at least with mimimum configuration tbar:[] for position:top or bbar:[]
         * for position bottom. Plugin does NOT create any toolbar.
         */
        ,position:'bottom'
        /**
         * @cfg {String} iconCls Icon class for menu button (defaults to icon-magnifier)
         */
        ,iconCls:'icon-magnifier'
        /**
         * @cfg {String/Array} checkIndexes Which indexes to check by default. Can be either 'all' for all indexes
         * or array of dataIndex names, e.g. ['persFirstName', 'persLastName']
         */
        ,checkIndexes:'all'
        /**
         * @cfg {Array} disableIndexes Array of index names to disable (not show in the menu), e.g. ['persTitle', 'persTitle2']
         */
        ,disableIndexes:[]
    
        /**
         * @cfg {String} dateFormat how to format date values. If undefined (the default) 
         * date is formatted as configured in colummn model
         */
        ,dateFormat:undefined
        /**
         * @cfg {Boolean} showSelectAll Select All item is shown in menu if true (defaults to true)
         */
        ,showSelectAll:true
        /**
         * @cfg {String} mode Use 'remote' for remote stores or 'local' for local stores. If mode is local
         * no data requests are sent to server the grid's store is filtered instead (defaults to 'remote')
         */
        ,mode:'remote'
        /**
         * @cfg {Number} width Width of input field in pixels (defaults to 100)
         */
        ,width:100
        /**
         * @cfg {String} xtype xtype is usually not used to instantiate this plugin but you have a chance to identify it
         */
        ,xtype:'gridsearch'
        /**
         * @cfg {Object} paramNames Params name map (defaults to {fields:'fields', query:'query'}
         */
        ,paramNames: {
             fields:'fields'
            ,query:'query'
        }
    	/**
    	 * @cfg {int} position
    	 * The starting position inside the toolbar
    	 */
    	,tbPosition: 15
        /**
         * @cfg {String} align 'left' or 'right' (defaults to 'left')
         */
        /**
         * @cfg {Number} minLength force user to type this many character before he can make a search
         */
        
        // {{{
        /**
         * private
         * @param {Ext.grid.GridPanel/Ext.grid.EditorGrid} grid reference to grid this plugin is used for
         */
        ,init:function(grid) {
            this.grid = grid;
    
            // do our processing after grid render and reconfigure
            grid.onRender = grid.onRender.createSequence(this.onRender, this);
            grid.reconfigure = grid.reconfigure.createSequence(this.reconfigure, this);
        } // eo function init
        // }}}
        // {{{
        /**
         * private add plugin controls to <b>existing</b> toolbar and calls reconfigure
         */
        ,onRender:function() {
            var grid = this.grid;
            var tb = 'bottom' == this.position ? grid.bottomToolbar : grid.topToolbar;
    
            // add menu
            this.menu = new Ext.menu.Menu();
    
            // handle position
            if('right' === this.align) {
                tb.insert(this.tbPosition, '->');
            }
            else {
                tb.insert(this.tbPosition, '-');
            }
            this.tbPosition++;
    
            // add menu button
            tb.insert(this.tbPosition, {
                 text:this.searchText
                ,menu:this.menu
                ,iconCls:this.iconCls
            });
            this.tbPosition++;
    
            // add input field (TwinTriggerField in fact)
            this.field = new Ext.form.TwinTriggerField({
                 width:this.width
                ,selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus
                ,trigger1Class:'x-form-clear-trigger'
                ,trigger2Class:'x-form-search-trigger'
                ,onTrigger1Click:this.onTriggerClear.createDelegate(this)
                ,onTrigger2Click:this.onTriggerSearch.createDelegate(this)
                ,minLength:this.minLength
            });
    
            // install event handlers on input field
            this.field.on('render', function() {
                this.field.el.dom.qtip = this.searchTipText;
    
                // install key map
                var map = new Ext.KeyMap(this.field.el, [{
                     key:Ext.EventObject.ENTER
                    ,scope:this
                    ,fn:this.onTriggerSearch
                },{
                     key:Ext.EventObject.ESC
                    ,scope:this
                    ,fn:this.onTriggerClear
                }]);
                map.stopEvent = true;
            }, this, {single:true});
    
            tb.insert(this.tbPosition, this.field);
    
            // reconfigure
            this.reconfigure();
        } // eo function onRender
        // }}}
        // {{{
        /**
         * private Clear Trigger click handler
         */
        ,onTriggerClear:function() {
            this.field.setValue('');
            this.field.focus();
            this.onTriggerSearch();
        } // eo function onTriggerClear
        // }}}
        // {{{
        /**
         * private Search Trigger click handler (executes the search, local or remote)
         */
        ,onTriggerSearch:function() {
            if(!this.field.isValid()) {
                return;
            }
            var val = this.field.getValue();
            var store = this.grid.store;
    
            // grid's store filter
            if('local' === this.mode) {
                store.clearFilter();
                if(val) {
                    store.filterBy(function(r) {
                        var retval = false;
                        this.menu.items.each(function(item) {
                            if(!item.checked || retval) {
                                return;
                            }
                            var rv = r.get(item.dataIndex);
                            rv = rv instanceof Date ? rv.format(this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
                            var re = new RegExp(val, 'gi');
                            retval = re.test(rv);
                        }, this);
                        if(retval) {
                            return true;
                        }
                        return retval;
                    }, this);
                }
                else {
                }
            }
            // ask server to filter records
            else {
                // clear start (necessary if we have paging)
                if(store.lastOptions && store.lastOptions.params) {
                    store.lastOptions.params[store.paramNames.start] = 0;
                }
    
                // get fields to search array
                var fields = [];
                this.menu.items.each(function(item) {
                    if(item.checked) {
                        fields.push(item.dataIndex);
                    }
                });
    
                // add fields and query to baseParams of store
                delete(store.baseParams[this.paramNames.fields]);
                delete(store.baseParams[this.paramNames.query]);
                if (store.lastOptions && store.lastOptions.params) {
                    delete(store.lastOptions.params[this.paramNames.fields]);
                    delete(store.lastOptions.params[this.paramNames.query]);
                }
                if(fields.length) {
                    store.baseParams[this.paramNames.fields] = Ext.encode(fields);
                    store.baseParams[this.paramNames.query] = val;
                }
    
                // reload store
                store.reload();
            }
    
        } // eo function onTriggerSearch
        // }}}
        // {{{
        /**
         * @param {Boolean} true to disable search (TwinTriggerField), false to enable
         */
        ,setDisabled:function() {
            this.field.setDisabled.apply(this.field, arguments);
        } // eo function setDisabled
        // }}}
        // {{{
        /**
         * Enable search (TwinTriggerField)
         */
        ,enable:function() {
            this.setDisabled(false);
        } // eo function enable
        // }}}
        // {{{
        /**
         * Enable search (TwinTriggerField)
         */
        ,disable:function() {
            this.setDisabled(true);
        } // eo function disable
        // }}}
        // {{{
        /**
         * private (re)configures the plugin, creates menu items from column model
         */
        ,reconfigure:function() {
    
            // {{{
            // remove old items
            var menu = this.menu;
            menu.removeAll();
    
            // add Select All item plus separator
            if(this.showSelectAll) {
                menu.add(new Ext.menu.CheckItem({
                     text:this.selectAllText
                    ,checked:!(this.checkIndexes instanceof Array)
                    ,hideOnClick:false
                    ,handler:function(item) {
                        var checked = ! item.checked;
                        item.parentMenu.items.each(function(i) {
                            if(item !== i && i.setChecked) {
                                i.setChecked(checked);
                            }
                        });
                    }
                }),'-');
            }
    
            // }}}
            // {{{
            // add new items
            var cm = this.grid.colModel;
            Ext.each(cm.config, function(config) {
                var disable = false;
                if(config.header && config.dataIndex) {
                    Ext.each(this.disableIndexes, function(item) {
                        disable = disable ? disable : item === config.dataIndex;
                    });
                    if(!disable) {
                        menu.add(new Ext.menu.CheckItem({
                             text:config.header
                            ,hideOnClick:false
                            ,checked:'all' === this.checkIndexes
                            ,dataIndex:config.dataIndex
                        }));
                    }
                }
            }, this);
            // }}}
            // {{{
            // check items
            if(this.checkIndexes instanceof Array) {
                Ext.each(this.checkIndexes, function(di) {
                    var item = menu.items.find(function(itm) {
                        return itm.dataIndex === di;
                    });
                    if(item) {
                        item.setChecked(true, true);
                    }
                }, this);
            }
            // }}}
    
        } // eo function reconfigure
        // }}}
    
    }); // eo extend
    
    // eof

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    53
    Vote Rating
    0
    828 is on a distinguished road

      0  

    Default


    You are not getting the error: 'tip has no properties' with the plugin in Ext 3.x?

  3. #3
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,679
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    hi 828,

    nope, never got that error.
    i have only tested this ux with firefox 3.0.11 though.

    since your error includes "tip", make sure you are using
    Code:
    Ext.QuickTips.init();
    and check your app for ext2.x ux and overrides, that can cause troubel with the 3.0-version.

    kind regards, tobiu

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    53
    Vote Rating
    0
    828 is on a distinguished road

      0  

    Default


    tobiu,

    Thank you very much - that was the issue.
    Ext.QuickTips.init();

  5. #5
    Ext User
    Join Date
    Jun 2009
    Posts
    16
    Vote Rating
    0
    mpelzsherman is on a distinguished road

      0  

    Default


    Hi -

    I tried these changes but they aren't working for me in Firefox 3.0.11.

    The search field still doesn't show up.

    http://twitpic.com/87i1c

  6. #6
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,679
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    you do have the "search"-text of the field at the right edge of your bbar and then the overflow-button ">>" that indicates, your toolbar is too small.

    if you would like to have the searchfield left to the "display accounds" - text, try playing with the new config

    Code:
    tbPosition: 15
    like putting it to 11 or so.

    kind regards, tobiu

  7. #7
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    I want to learn that how can I add a search icon next to the search text. I didn't see a property so set 'icon'. How can I manage iconCls? Can someone help me?

    Thanx in advance..

  8. #8
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,679
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    hi talha06,

    i don't understand the problem. you have an iconCls-config for that.
    just define which css you want and define it like:

    Code:
    .icon-magnifier{ 
        background-image:url(../images/icons/magnifier.png) !important;
    }

    kind regards,
    tobiu
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  9. #9
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    Quote Originally Posted by tobiu View Post
    hi talha06,

    i don't understand the problem. you have an iconCls-config for that.
    just define which css you want and define it like:

    Code:
    .icon-magnifier{ 
        background-image:url(../images/icons/magnifier.png) !important;
    }
    kind regards,
    tobiu
    Hi Tobiu,
    thank you so much, this is exactly what I wanted to learn.. Now I can see image next to the the 'Search' button..
    Thanx again,
    With regards,
    Talha

  10. #10
    Sencha User
    Join Date
    Feb 2009
    Posts
    57
    Vote Rating
    0
    javaman is on a distinguished road

      0  

    Default


    very good

    I added the minChars config to add a keyUp event, code above ( I just copied of the original plugin)
    I tested on ext 3.1.0 and got no error

    Code:
    /**
     * Search plugin for Ext.grid.GridPanel, Ext.grid.EditorGrid ver. 2.x or subclasses of them
     *
     * @author    Ing. Jozef Sakalos
     * @copyright (c) 2008, by Ing. Jozef Sakalos
     * @date      17. January 2008
     * @version   $Id: Ext.ux.grid.Search.js 728 2008-02-19 01:56:32Z jozo $
     *
     * @license Ext.ux.grid DragSelector is licensed under the terms of
     * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
     * that the code/component(s) do NOT become part of another Open Source or Commercially
     * licensed development library or toolkit without explicit permission.
     * 
     * License details: http://www.gnu.org/licenses/lgpl.html
     */
    
    Ext.namespace('Ext.ux', 'Ext.ux.grid');
    
    /**
     * @class Ext.ux.grid.Search
     * @extends Ext.util.Observable
     * @param {Object} config configuration object
     * @constructor
     */
    Ext.ux.grid.Search = function(config) {
        Ext.apply(this, config);
        Ext.ux.grid.Search.superclass.constructor.call(this);
    }; // eo constructor
    
    Ext.extend(Ext.ux.grid.Search, Ext.util.Observable, {
        /**
         * @cfg {String} searchText Text to display on menu button
         */
         searchText:'Search'
        /**
         * @cfg {String} searchTipText Text to display as input tooltip. Set to '' for no tooltip
         */ 
        ,searchTipText:'Type a text to search and press Enter'
        /**
         * @cfg {String} selectAllText Text to display on menu item that selects all fields
         */
        ,selectAllText:'Select All'
        /**
         * @cfg {String} position Where to display the search controls. Valid values are top and bottom (defaults to bottom)
         * Corresponding toolbar has to exist at least with mimimum configuration tbar:[] for position:top or bbar:[]
         * for position bottom. Plugin does NOT create any toolbar.
         */
        ,position:'bottom'
        /**
         * @cfg {String} iconCls Icon class for menu button (defaults to icon-magnifier)
         */
        ,iconCls:'icon-magnifier'
        /**
         * @cfg {String/Array} checkIndexes Which indexes to check by default. Can be either 'all' for all indexes
         * or array of dataIndex names, e.g. ['persFirstName', 'persLastName']
         */
        ,checkIndexes:'all'
        /**
         * @cfg {Array} disableIndexes Array of index names to disable (not show in the menu), e.g. ['persTitle', 'persTitle2']
         */
        ,disableIndexes:[]
        
        /**
        * @cfg {Number} minChars Minimum characters to type before the request is made. If undefined (the default)
        * the trigger field shows magnifier icon and you need to click it or press enter for search to start. If it
        * is defined and greater than 0 then maginfier is not shown and search starts after minChars are typed.
        * (defaults to undefined)
        */
        
        /**
         * @cfg {String} dateFormat how to format date values. If undefined (the default) 
         * date is formatted as configured in colummn model
         */
        ,dateFormat:undefined
        /**
         * @cfg {Boolean} showSelectAll Select All item is shown in menu if true (defaults to true)
         */
        ,showSelectAll:true
        /**
         * @cfg {String} mode Use 'remote' for remote stores or 'local' for local stores. If mode is local
         * no data requests are sent to server the grid's store is filtered instead (defaults to 'remote')
         */
        ,mode:'remote'
        /**
         * @cfg {Number} width Width of input field in pixels (defaults to 100)
         */
        ,width:100
        /**
         * @cfg {String} xtype xtype is usually not used to instantiate this plugin but you have a chance to identify it
         */
        ,xtype:'gridsearch'
        /**
         * @cfg {Object} paramNames Params name map (defaults to {fields:'fields', query:'query'}
         */
        ,paramNames: {
             fields:'fields'
            ,query:'query'
        }
        /**
         * @cfg {int} position
         * The starting position inside the toolbar
         */
        ,tbPosition: 15
        /**
         * @cfg {String} align 'left' or 'right' (defaults to 'left')
         */
        /**
         * @cfg {Number} minLength force user to type this many character before he can make a search
         */
        
        // {{{
        /**
         * private
         * @param {Ext.grid.GridPanel/Ext.grid.EditorGrid} grid reference to grid this plugin is used for
         */
        ,init:function(grid) {
            this.grid = grid;
    
            // do our processing after grid render and reconfigure
            grid.onRender = grid.onRender.createSequence(this.onRender, this);
            grid.reconfigure = grid.reconfigure.createSequence(this.reconfigure, this);
        } // eo function init
        // }}}
        // {{{
        /**
         * private add plugin controls to <b>existing</b> toolbar and calls reconfigure
         */
        ,onRender:function() {
            var grid = this.grid;
            var tb = 'bottom' == this.position ? grid.bottomToolbar : grid.topToolbar;
    
            // add menu
            this.menu = new Ext.menu.Menu();
    
            // handle position
            if('right' === this.align) {
                tb.insert(this.tbPosition, '->');
            }
            else {
                tb.insert(this.tbPosition, '-');
            }
            this.tbPosition++;
    
            // add menu button
            tb.insert(this.tbPosition, {
                 text:this.searchText
                ,menu:this.menu
                ,iconCls:this.iconCls
            });
            this.tbPosition++;
    
            // add input field (TwinTriggerField in fact)
            this.field = new Ext.form.TwinTriggerField({
                 width:this.width
                ,selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus
                ,trigger1Class:'x-form-clear-trigger'
                ,trigger2Class:'x-form-search-trigger'
                ,onTrigger1Click:this.onTriggerClear.createDelegate(this)
                ,onTrigger2Click:this.onTriggerSearch.createDelegate(this)
                ,minLength:this.minLength
            });
    
            // install event handlers on input field
            this.field.on('render', function() {
                this.field.el.dom.qtip = this.searchTipText;
                
                if(this.minChars) {
                    this.field.el.on({scope:this, buffer:300, keyup:this.onKeyUp});
                }
    
                // install key map
                var map = new Ext.KeyMap(this.field.el, [{
                     key:Ext.EventObject.ENTER
                    ,scope:this
                    ,fn:this.onTriggerSearch
                },{
                     key:Ext.EventObject.ESC
                    ,scope:this
                    ,fn:this.onTriggerClear
                }]);
                map.stopEvent = true;
            }, this, {single:true});
    
            tb.insert(this.tbPosition, this.field);
    
            // reconfigure
            this.reconfigure();
        } // eo function onRender
        // }}}
        // {{{
        /**
         * private Clear Trigger click handler
         */
        ,onTriggerClear:function() {
            this.field.setValue('');
            this.field.focus();
            this.onTriggerSearch();
        } // eo function onTriggerClear
        // }}}
        // {{{
        /**
         * private Search Trigger click handler (executes the search, local or remote)
         */
        ,onTriggerSearch:function() {
            if(!this.field.isValid()) {
                return;
            }
            var val = this.field.getValue();
            var store = this.grid.store;
    
            // grid's store filter
            if('local' === this.mode) {
                store.clearFilter();
                if(val) {
                    store.filterBy(function(r) {
                        var retval = false;
                        this.menu.items.each(function(item) {
                            if(!item.checked || retval) {
                                return;
                            }
                            var rv = r.get(item.dataIndex);
                            rv = rv instanceof Date ? rv.format(this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
                            var re = new RegExp(val, 'gi');
                            retval = re.test(rv);
                        }, this);
                        if(retval) {
                            return true;
                        }
                        return retval;
                    }, this);
                }
                else {
                }
            }
            // ask server to filter records
            else {
                // clear start (necessary if we have paging)
                if(store.lastOptions && store.lastOptions.params) {
                    store.lastOptions.params[store.paramNames.start] = 0;
                }
    
                // get fields to search array
                var fields = [];
                this.menu.items.each(function(item) {
                    if(item.checked) {
                        fields.push(item.dataIndex);
                    }
                });
    
                // add fields and query to baseParams of store
                delete(store.baseParams[this.paramNames.fields]);
                delete(store.baseParams[this.paramNames.query]);
                if (store.lastOptions && store.lastOptions.params) {
                    delete(store.lastOptions.params[this.paramNames.fields]);
                    delete(store.lastOptions.params[this.paramNames.query]);
                }
                if(fields.length) {
                    store.baseParams[this.paramNames.fields] = Ext.encode(fields);
                    store.baseParams[this.paramNames.query] = val;
                }
    
                // reload store
                store.reload();
            }
    
        } // eo function onTriggerSearch
        // }}}
        // {{{
        
         /**
        * field el keypup event handler. Triggers the search
        * @private
        */
        ,onKeyUp:function(e, t, o) {
         
            if(e.isNavKeyPress()) {
                return;
            }
         
            var length = this.field.getValue().toString().length;
            if(0 === length || this.minChars <= length) {
                this.onTriggerSearch();
            }
        } // eo function onKeyUp
        // }}}
        // {{{
        /**
         * @param {Boolean} true to disable search (TwinTriggerField), false to enable
         */
        ,setDisabled:function() {
            this.field.setDisabled.apply(this.field, arguments);
        } // eo function setDisabled
        // }}}
        // {{{
        /**
         * Enable search (TwinTriggerField)
         */
        ,enable:function() {
            this.setDisabled(false);
        } // eo function enable
        // }}}
        // {{{
        /**
         * Enable search (TwinTriggerField)
         */
        ,disable:function() {
            this.setDisabled(true);
        } // eo function disable
        // }}}
        // {{{
        /**
         * private (re)configures the plugin, creates menu items from column model
         */
        ,reconfigure:function() {
    
            // {{{
            // remove old items
            var menu = this.menu;
            menu.removeAll();
    
            // add Select All item plus separator
            if(this.showSelectAll) {
                menu.add(new Ext.menu.CheckItem({
                     text:this.selectAllText
                    ,checked:!(this.checkIndexes instanceof Array)
                    ,hideOnClick:false
                    ,handler:function(item) {
                        var checked = ! item.checked;
                        item.parentMenu.items.each(function(i) {
                            if(item !== i && i.setChecked) {
                                i.setChecked(checked);
                            }
                        });
                    }
                }),'-');
            }
    
            // }}}
            // {{{
            // add new items
            var cm = this.grid.colModel;
            Ext.each(cm.config, function(config) {
                var disable = false;
                if(config.header && config.dataIndex) {
                    Ext.each(this.disableIndexes, function(item) {
                        disable = disable ? disable : item === config.dataIndex;
                    });
                    if(!disable) {
                        menu.add(new Ext.menu.CheckItem({
                             text:config.header
                            ,hideOnClick:false
                            ,checked:'all' === this.checkIndexes
                            ,dataIndex:config.dataIndex
                        }));
                    }
                }
            }, this);
            // }}}
            // {{{
            // check items
            if(this.checkIndexes instanceof Array) {
                Ext.each(this.checkIndexes, function(di) {
                    var item = menu.items.find(function(itm) {
                        return itm.dataIndex === di;
                    });
                    if(item) {
                        item.setChecked(true, true);
                    }
                }, this);
            }
            // }}}
    
        } // eo function reconfigure
        // }}}
    
    });