1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    1
    Vote Rating
    2
    wolfetti is on a distinguished road

      2  

    Default EXT 4.1: Grid searching toolbar.

    EXT 4.1: Grid searching toolbar.


    Hi people!
    Based on this plugin (http://www.sencha.com/forum/showthre...-Search-Plugin) created by the great Jozef Sakalos, I've created a toolbar that does exactly the same work, with slight modifications according to my needs.


    Here's the code:

    PHP 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 220 2008-04-29 21:46:51Z jozo $
     *
     * @license Ext.ux.grid.Search 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
     */


    /*
        Revised for Ext 4
        by Nathan LeBlanc
        on July 8, 2011
    */


    /* 
     * Changed in toolbar 
     * by Fabio Frijo, 
     * on April 6, 2012
     */


    Ext.define('Ext.ux.toolbar.GridSearching', {
        
    extend             "Ext.toolbar.Toolbar",
        
    alias              'widget.gridsearchingbar',
        
    alternateClassName 'Ext.ux.GridSearchingToolbar',
        
        
    /**
         * @cfg {Boolean} hideMenu Set this to true to prevent menu creation
         */
        
        /**
         * @cfg {String} position The position of search elements
         */
        
    position'first',
        
        
    /**
         * @cfg {Ext.grid.Panel} grid The grid panel to bind search functions
         */
        
    gridundefined,
        
        
    /**
         * @cfg {String} menuPosition The menu position relative to search field (defaults to 'left')
         */
        
    menuPosition'left',


        
    /**
         * @cfg {String} menuText Text to display on menu button
         */
        
    menuText:'Search',


        
    /**
         * @cfg {String} inputTip Text to display as input tooltip. Set to '' for no tooltip
         */ 
        
    inputTip:'Type a text to search and press Enter',


        
    /**
         * @cfg {String} inputTip Text to display as input tooltip. Set to '' for no tooltip
         */ 
        
    menuTip:'',


        
    /**
         * @cfg {String} selectAllText Text to display on menu item that selects all fields
         */
        
    selectAllText:'Select All',


        
    /**
         * @cfg {String} menuIconCls Icon class for menu button (defaults to '')
         */
        
    menuIconCls:'',


        
    /**
         * @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).
         * This config is valid only with menuStyle:'checkbox'
         */
        
    showSelectAll:true,


        
    /**
         * @cfg {String} menuStyle Valid values are 'checkbox' and 'radio'. If menuStyle is radio
         * then only one field can be searched at a time and selectAll is automatically switched off.
         */
        
    menuStyle:'checkbox',


        
    /**
         * @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 {Array} readonlyIndexes Array of index names to disable (show in menu disabled), e.g. ['persTitle', 'persTitle2']
         */


        /**
         * @cfg {Number} inputWidth Width of input field in pixels (defaults to 100)
         */
        
    inputWidth:100,
        
        
    /**
         * @cfg {String} paramName store param name (defaults to 'search')
         */
        
    paramName'search',


        
    /**
         * @cfg {Object} jsonNames json param object name map (defaults to {fields:'fields', query:'query'}
         */
        
    jsonNames: {
             
    fields:'fields',
             
    query:'query'
        
    },


        
    /**
         * @cfg {Number} minLength force user to type this many character before he can make a search
         */
        
        // Init
        
    initComponent: function(){
            
    this.menu Ext.create('Ext.menu.Menu');


            
    this.field Ext.create('Ext.form.TwinTriggerField', {
                
    width           this.inputWidth,
                
    trigger1Cls     'x-form-clear-trigger',
                
    trigger2Cls     'x-form-search-trigger',
                
    onTrigger1Click Ext.bind(this.onTriggerClearthis),
                
    onTrigger2Click Ext.bind(this.onTriggerSearchthis),
                
    minLength       this.minLength
            
    });
            
            if(
    'last' === this.position){
                
    this.addCustomComponents();
            } else {
                var 
    userItems this.items;
                
    this.items = [];
                
    this.addCustomComponents();
                
                for(var 
    0userItems.lengthi++){
                    
    this.items.push(userItems[i]);
                }
            }
            
            
    Ext.ux.toolbar.GridSearching.superclass.initComponent.call(thisarguments);
        },


        
    // On render function
        
    onRender: function(){
            
    Ext.ux.toolbar.GridSearching.superclass.onRender.call(thisarguments);
            
            
    // populate the menu
            
    this.populateMenu();
            
            
    // install event handlers on input field
            
    this.field.on('render'this.fieldRenderthis, {single:true});
        },
        
        
    // Add search components to toolbar
        
    addCustomComponents: function(){
            if(
    true === this.hideMenu){
                
    this.items.push(this.field);
            } else if(
    'right' === this.menuPosition){
                
    this.items.push(this.field);
                
    this.items.push('-');
                
    this.items.push(this.getMenuButton());
            } else {
                
    this.items.push(this.getMenuButton());
                
    this.items.push('-');
                
    this.items.push(this.field);
            }
        },
        
        
    // Get the menu container
        
    getMenuButton: function(){
            return {
                
    tooltip this.menuTip,
                
    text    this.menuText,
                
    menu    this.menu,
                
    iconCls this.menuIconCls
            
    };
        },
        
        
    // Private remote search function
        // (ask server to filter records. Proxy must be a Server proxy)
        
    doRemoteSearch: function(valstore){
            var 
    proxy store.getProxy();
                
            
    // 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 && item.dataIndex) {
                    
    fields.push(item.dataIndex);
                }
            });


            
    delete(proxy.extraParams[this.paramName]);
            
            if (
    store.lastOptions && store.lastOptions.params) {
                
    delete(proxy.lastOptions.params[this.paramName]);
            }
            
            if(
    fields.length) {
                var 
    obj = {};
                
    obj[this.jsonNames.fields] = fields;
                
    obj[this.jsonNames.query]  = val;
                
    proxy.extraParams[this.paramName] = Ext.encode(obj);
            }


            
    // reload store
            
    store.loadPage(1);
        },
        
        
    // Private local search function (use grid's store filter)
        
    doLocalSearch: function(valstore){
            
    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);
                        
                        if(
    rv instanceof Date){
                            var 
    format this.dateFormat || r.fields.get(item.dataIndex).dateFormat;
                            
    rv =  Ext.Date.format(rvformat);
                        }
                        
                        var 
    re = new RegExp(val'gi');
                        
    retval re.test(rv);
                    }, 
    this);
                    
                    if(
    retval) {
                        return 
    true;
                    }
                    
                    return 
    retval;
                }, 
    this);
            }
        },
        
        
    // Private Search Trigger click handler
        
    onTriggerSearch:function() {
            var 
    val this.field.getValue();
            var 
    store this.grid.store;


            if(!
    this.field.isValid()) {
                return;
            } 
            
            if(
    'local' === this.mode) {
                
    this.doLocalSearch(valstore);
            } else if(
    store.getProxy() instanceof Ext.data.proxy.Server) {
                
    this.doRemoteSearch(valstore);
            }
        },
        
        
    // Private Clear Trigger click handler
        
    onTriggerClear:function() {
            
    this.field.setValue('');
            
    this.field.focus();
            
    this.onTriggerSearch();
        },
        
        
    // Field onRender function
        
    fieldRender: function() {
            
    Ext.QuickTips.register({
                
    target this.field.inputEl,
                
    text   this.inputTip
            
    });
            
            
    // install key map
            
    var map = new Ext.KeyMap(this.field.el, [{
                 
    key   Ext.EventObject.ENTER,
                 
    scope this,
                 
    fn    this.onTriggerSearch
            
    }]);
            
            
    map.stopEvent true;
        },
        
        
    // Menu creation function
        
    populateMenu: function(){
            
    // remove old items
            
    this.menu.removeAll();


            
    // add Select All item plus separator
            
    if(this.showSelectAll && 'radio' !== this.menuStyle) {
                var 
    selectAllFn = function(item) {
                    var 
    checked item.checked;
                    
    item.parentMenu.items.each(function(i) {
                        if(
    item !== && i.setChecked && !i.disabled) {
                            
    i.setChecked(checked);
                        }
                    });
                };
                
                var 
    selectAll = {
                    
    xtype       'menucheckitem',
                    
    text        this.selectAllText,
                    
    checked     'all' === this.checkItems,
                    
    hideOnClick false,
                    
    handler     selectAllFn
                
    };
                
                
    this.menu.add(selectAll'-');
            }
            
            
    // add new items
            
    var columns this.grid.headerCt.items.items;
            
            var 
    group undefined;
            
            if(
    'radio' === this.menuStyle) {
                
    group 'g' + (new Date).getTime();
            }
            
            
    // adding not disabled items
            
    Ext.each(columns, function(column) {
                var 
    disable false;
                if(
    column.text && column.dataIndex && column.dataIndex != '') {
                    
    Ext.each(this.disableIndexes, function(item) {
                        
    disable disable disable item === column.dataIndex;
                    });
                    if(!
    disable) {
                        
    this.menu.add({
                            
    xtype       'menucheckitem',
                            
    text        column.text,
                            
    hideOnClick false,
                            
    group       group,
                            
    checked     'all' === this.checkIndexes,
                            
    dataIndex   column.dataIndex,
                        });
                    }
                }
            }, 
    this);
            
            
    // check items
            
    if(this.checkIndexes instanceof Array) {
                
    Ext.each(this.checkIndexes, function(di) {
                    var 
    item this.menu.items.find(function(itm) {
                        return 
    itm.dataIndex === di;
                    });
                    if(
    item) {
                        
    item.setChecked(truetrue);
                    }
                }, 
    this);
            }


            
    // disable items
            
    if(this.readonlyIndexes instanceof Array) {
                
    Ext.each(this.readonlyIndexes, function(di) {
                    var 
    item this.menu.items.find(function(itm) {
                        return 
    itm.dataIndex === di;
                    });
                    if(
    item) {
                        
    item.disable();
                    }
                }, 
    this);
            }
        },


        
    /**
         * @param {Boolean} true to disable search (TwinTriggerField), false to enable
         */
        
    setDisabled:function() {
            
    this.field.setDisabled.apply(this.fieldarguments);
        },
        
        
    /**
         * Enable search (TwinTriggerField)
         */
        
    enable:function() {
            
    this.setDisabled(false);
        },


        
    /**
         * Disable search (TwinTriggerField)
         */
        
    disable:function() {
            
    this.setDisabled(true);
        }
    }); 

    And here's a little example of usage:

    PHP Code:
    /** 
    * Ext.ux.toolbar.GridSearching: Usage example *  * @author Fabio Frijo */
    Ext.define("App.example.Grid", {    title       "I'm a grid!",    extend      "App.common.Grid",    buttonText  "Add item",    proxyUrl    "example/grid/GetData.do",    windowClass "App.example.Window",    pagingGrid  true,        // Search toolbar    initTopToolbar: function(){        return Ext.create('Ext.ux.toolbar.GridSearching', {           grid            : this,           menuPosition    : 'right',           menuIconCls     : 'icon-config',           inputWidth      : 200,           showSelectAll   : false,           menuText        : null,           menuTip         : 'Configurazione ricerca',           inputTip        : 'Scrivi qui per effettuare la ricerca',           disableIndexes  : ['trad_strumento','trad_metodo'],           items           : ['->', this.getAddButton()]        });    }}); 
    Have fun!

    Fabio

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Moved to an Ext JS 4 forum.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      1  

    Default


    sweetness... Used that in many of my 2-3.x applications, now it's in 4.x! woot!
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Location
    Russia
    Posts
    41
    Vote Rating
    3
    another_i is on a distinguished road

      0  

    Default


    Good!

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      0  

    Default use it in Sencha Architect

    use it in Sencha Architect


    Is there an easy way to import your component into Sencha Architect with ExtJS 4.1 ?

    Some instructions on how it works and how to use it in any applications, it could be useful to have it together with the code you provided.

    By the way, maybe is better to have it as an attachment (compressed file).

    THANKS for your toolbar.

    Quote Originally Posted by wolfetti View Post
    Hi people!
    Based on this plugin (http://www.sencha.com/forum/showthre...-Search-Plugin) created by the great Jozef Sakalos, I've created a toolbar that does exactly the same work, with slight modifications according to my needs.


    Here's the code:

    PHP 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 220 2008-04-29 21:46:51Z jozo $
     *
     * @license Ext.ux.grid.Search 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
     */


    /*
        Revised for Ext 4
        by Nathan LeBlanc
        on July 8, 2011
    */


    /* 
     * Changed in toolbar 
     * by Fabio Frijo, 
     * on April 6, 2012
     */


    Ext.define('Ext.ux.toolbar.GridSearching', {
        
    extend             "Ext.toolbar.Toolbar",
        
    alias              'widget.gridsearchingbar',
        
    alternateClassName 'Ext.ux.GridSearchingToolbar',
        
        
    /**
         * @cfg {Boolean} hideMenu Set this to true to prevent menu creation
         */
        
        /**
         * @cfg {String} position The position of search elements
         */
        
    position'first',
        
        
    /**
         * @cfg {Ext.grid.Panel} grid The grid panel to bind search functions
         */
        
    gridundefined,
        
        
    /**
         * @cfg {String} menuPosition The menu position relative to search field (defaults to 'left')
         */
        
    menuPosition'left',


        
    /**
         * @cfg {String} menuText Text to display on menu button
         */
        
    menuText:'Search',


        
    /**
         * @cfg {String} inputTip Text to display as input tooltip. Set to '' for no tooltip
         */ 
        
    inputTip:'Type a text to search and press Enter',


        
    /**
         * @cfg {String} inputTip Text to display as input tooltip. Set to '' for no tooltip
         */ 
        
    menuTip:'',


        
    /**
         * @cfg {String} selectAllText Text to display on menu item that selects all fields
         */
        
    selectAllText:'Select All',


        
    /**
         * @cfg {String} menuIconCls Icon class for menu button (defaults to '')
         */
        
    menuIconCls:'',


        
    /**
         * @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).
         * This config is valid only with menuStyle:'checkbox'
         */
        
    showSelectAll:true,


        
    /**
         * @cfg {String} menuStyle Valid values are 'checkbox' and 'radio'. If menuStyle is radio
         * then only one field can be searched at a time and selectAll is automatically switched off.
         */
        
    menuStyle:'checkbox',


        
    /**
         * @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 {Array} readonlyIndexes Array of index names to disable (show in menu disabled), e.g. ['persTitle', 'persTitle2']
         */


        /**
         * @cfg {Number} inputWidth Width of input field in pixels (defaults to 100)
         */
        
    inputWidth:100,
        
        
    /**
         * @cfg {String} paramName store param name (defaults to 'search')
         */
        
    paramName'search',


        
    /**
         * @cfg {Object} jsonNames json param object name map (defaults to {fields:'fields', query:'query'}
         */
        
    jsonNames: {
             
    fields:'fields',
             
    query:'query'
        
    },


        
    /**
         * @cfg {Number} minLength force user to type this many character before he can make a search
         */
        
        // Init
        
    initComponent: function(){
            
    this.menu Ext.create('Ext.menu.Menu');


            
    this.field Ext.create('Ext.form.TwinTriggerField', {
                
    width           this.inputWidth,
                
    trigger1Cls     'x-form-clear-trigger',
                
    trigger2Cls     'x-form-search-trigger',
                
    onTrigger1Click Ext.bind(this.onTriggerClearthis),
                
    onTrigger2Click Ext.bind(this.onTriggerSearchthis),
                
    minLength       this.minLength
            
    });
            
            if(
    'last' === this.position){
                
    this.addCustomComponents();
            } else {
                var 
    userItems this.items;
                
    this.items = [];
                
    this.addCustomComponents();
                
                for(var 
    0userItems.lengthi++){
                    
    this.items.push(userItems[i]);
                }
            }
            
            
    Ext.ux.toolbar.GridSearching.superclass.initComponent.call(thisarguments);
        },


        
    // On render function
        
    onRender: function(){
            
    Ext.ux.toolbar.GridSearching.superclass.onRender.call(thisarguments);
            
            
    // populate the menu
            
    this.populateMenu();
            
            
    // install event handlers on input field
            
    this.field.on('render'this.fieldRenderthis, {single:true});
        },
        
        
    // Add search components to toolbar
        
    addCustomComponents: function(){
            if(
    true === this.hideMenu){
                
    this.items.push(this.field);
            } else if(
    'right' === this.menuPosition){
                
    this.items.push(this.field);
                
    this.items.push('-');
                
    this.items.push(this.getMenuButton());
            } else {
                
    this.items.push(this.getMenuButton());
                
    this.items.push('-');
                
    this.items.push(this.field);
            }
        },
        
        
    // Get the menu container
        
    getMenuButton: function(){
            return {
                
    tooltip this.menuTip,
                
    text    this.menuText,
                
    menu    this.menu,
                
    iconCls this.menuIconCls
            
    };
        },
        
        
    // Private remote search function
        // (ask server to filter records. Proxy must be a Server proxy)
        
    doRemoteSearch: function(valstore){
            var 
    proxy store.getProxy();
                
            
    // 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 && item.dataIndex) {
                    
    fields.push(item.dataIndex);
                }
            });


            
    delete(proxy.extraParams[this.paramName]);
            
            if (
    store.lastOptions && store.lastOptions.params) {
                
    delete(proxy.lastOptions.params[this.paramName]);
            }
            
            if(
    fields.length) {
                var 
    obj = {};
                
    obj[this.jsonNames.fields] = fields;
                
    obj[this.jsonNames.query]  = val;
                
    proxy.extraParams[this.paramName] = Ext.encode(obj);
            }


            
    // reload store
            
    store.loadPage(1);
        },
        
        
    // Private local search function (use grid's store filter)
        
    doLocalSearch: function(valstore){
            
    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);
                        
                        if(
    rv instanceof Date){
                            var 
    format this.dateFormat || r.fields.get(item.dataIndex).dateFormat;
                            
    rv =  Ext.Date.format(rvformat);
                        }
                        
                        var 
    re = new RegExp(val'gi');
                        
    retval re.test(rv);
                    }, 
    this);
                    
                    if(
    retval) {
                        return 
    true;
                    }
                    
                    return 
    retval;
                }, 
    this);
            }
        },
        
        
    // Private Search Trigger click handler
        
    onTriggerSearch:function() {
            var 
    val this.field.getValue();
            var 
    store this.grid.store;


            if(!
    this.field.isValid()) {
                return;
            } 
            
            if(
    'local' === this.mode) {
                
    this.doLocalSearch(valstore);
            } else if(
    store.getProxy() instanceof Ext.data.proxy.Server) {
                
    this.doRemoteSearch(valstore);
            }
        },
        
        
    // Private Clear Trigger click handler
        
    onTriggerClear:function() {
            
    this.field.setValue('');
            
    this.field.focus();
            
    this.onTriggerSearch();
        },
        
        
    // Field onRender function
        
    fieldRender: function() {
            
    Ext.QuickTips.register({
                
    target this.field.inputEl,
                
    text   this.inputTip
            
    });
            
            
    // install key map
            
    var map = new Ext.KeyMap(this.field.el, [{
                 
    key   Ext.EventObject.ENTER,
                 
    scope this,
                 
    fn    this.onTriggerSearch
            
    }]);
            
            
    map.stopEvent true;
        },
        
        
    // Menu creation function
        
    populateMenu: function(){
            
    // remove old items
            
    this.menu.removeAll();


            
    // add Select All item plus separator
            
    if(this.showSelectAll && 'radio' !== this.menuStyle) {
                var 
    selectAllFn = function(item) {
                    var 
    checked item.checked;
                    
    item.parentMenu.items.each(function(i) {
                        if(
    item !== && i.setChecked && !i.disabled) {
                            
    i.setChecked(checked);
                        }
                    });
                };
                
                var 
    selectAll = {
                    
    xtype       'menucheckitem',
                    
    text        this.selectAllText,
                    
    checked     'all' === this.checkItems,
                    
    hideOnClick false,
                    
    handler     selectAllFn
                
    };
                
                
    this.menu.add(selectAll'-');
            }
            
            
    // add new items
            
    var columns this.grid.headerCt.items.items;
            
            var 
    group undefined;
            
            if(
    'radio' === this.menuStyle) {
                
    group 'g' + (new Date).getTime();
            }
            
            
    // adding not disabled items
            
    Ext.each(columns, function(column) {
                var 
    disable false;
                if(
    column.text && column.dataIndex && column.dataIndex != '') {
                    
    Ext.each(this.disableIndexes, function(item) {
                        
    disable disable disable item === column.dataIndex;
                    });
                    if(!
    disable) {
                        
    this.menu.add({
                            
    xtype       'menucheckitem',
                            
    text        column.text,
                            
    hideOnClick false,
                            
    group       group,
                            
    checked     'all' === this.checkIndexes,
                            
    dataIndex   column.dataIndex,
                        });
                    }
                }
            }, 
    this);
            
            
    // check items
            
    if(this.checkIndexes instanceof Array) {
                
    Ext.each(this.checkIndexes, function(di) {
                    var 
    item this.menu.items.find(function(itm) {
                        return 
    itm.dataIndex === di;
                    });
                    if(
    item) {
                        
    item.setChecked(truetrue);
                    }
                }, 
    this);
            }


            
    // disable items
            
    if(this.readonlyIndexes instanceof Array) {
                
    Ext.each(this.readonlyIndexes, function(di) {
                    var 
    item this.menu.items.find(function(itm) {
                        return 
    itm.dataIndex === di;
                    });
                    if(
    item) {
                        
    item.disable();
                    }
                }, 
    this);
            }
        },


        
    /**
         * @param {Boolean} true to disable search (TwinTriggerField), false to enable
         */
        
    setDisabled:function() {
            
    this.field.setDisabled.apply(this.fieldarguments);
        },
        
        
    /**
         * Enable search (TwinTriggerField)
         */
        
    enable:function() {
            
    this.setDisabled(false);
        },


        
    /**
         * Disable search (TwinTriggerField)
         */
        
    disable:function() {
            
    this.setDisabled(true);
        }
    }); 

    And here's a little example of usage:

    PHP Code:
    /** 
    * Ext.ux.toolbar.GridSearching: Usage example *  * @author Fabio Frijo */
    Ext.define("App.example.Grid", {    title       "I'm a grid!",    extend      "App.common.Grid",    buttonText  "Add item",    proxyUrl    "example/grid/GetData.do",    windowClass "App.example.Window",    pagingGrid  true,        // Search toolbar    initTopToolbar: function(){        return Ext.create('Ext.ux.toolbar.GridSearching', {           grid            : this,           menuPosition    : 'right',           menuIconCls     : 'icon-config',           inputWidth      : 200,           showSelectAll   : false,           menuText        : null,           menuTip         : 'Configurazione ricerca',           inputTip        : 'Scrivi qui per effettuare la ricerca',           disableIndexes  : ['trad_strumento','trad_metodo'],           items           : ['->', this.getAddButton()]        });    }}); 
    Have fun!

    Fabio

  6. #6
    Sencha User
    Join Date
    Jun 2009
    Location
    Burlington, Ontario
    Posts
    174
    Vote Rating
    2
    Bleak is on a distinguished road

      0  

    Default


    This is a great plugin, thank you. However, there is a problem. If you attach this toolbar to a grid inside a window, destroy the window, recreate the window it will not work. It doesn't seem to destroy itself properly.

    I'm looking into the root cause, will update this thread if I find it.. or if someone finds it first, that would be great.