1. #1001
    Sencha User
    Join Date
    May 2011
    Posts
    5
    Vote Rating
    0
    preichow is on a distinguished road

      0  

    Default When using Ivanblanc's 4.0 port, I get "b is undefined" error

    When using Ivanblanc's 4.0 port, I get "b is undefined" error


    Ivanblanc, thank you very much for posting a version of the search plugin for 4.0.
    When I view my grid, the search box is visible. However, when I enter a search term and hit enter, nothing happens.

    I looked at Firebug and discovered that there was an error saying b is undefined. It involves the Extjs-all.js file, line 7, which is here: (function(){var e=this,a=Object.protot...ate("Ext.XTemplate",j,g)}return j}});

    I have selected the "local" option in my searching.js file, just to keep things simple for now.

    the only other strange thing I've noticed is that searching.js file has a line reading "this.grid = this.view.up('gridpanel');". If I change the gridpanel to fit my grid name, it also creates an error saying that it is undefined.

    Any ideas from anyone?

    Here is an except from my code:
    Code:
    Ext.define('User', {   extend: 'Ext.data.Model',   fields: ['recordnumber', 'itemprice']});
    
    Ext.define('UsersGrid', {
      extend: 'Ext.grid.Panel',   initComponent: function() {
        var userStore = Ext.create('Ext.data.Store', {
            autoLoad: true,  model: 'User',
            proxy:     {
                type: 'ajax',
                 api: {
                    read: 'extjs/database.php?task=LISTING',
                },
                reader: { type: 'json', root: 'results',  },
              },
            });
     Ext.apply(this, {  viewConfig:{ forceFit: false, stripeRows: true, trackOver: true  },
          store: userStore,
          features: [searching],
          columns: [{ text: 'Record', width: 45, sortable: true,  hideable: true,  dataIndex: 'recordnumber' },
          { text: 'Item Price', renderer: 'usMoney',  width: 55, sortable: true, hideable: true,
             dataIndex: 'itemprice'}],
     // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: userStore,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display",
                 }),      
        });
            UsersGrid.superclass.initComponent.apply(this,arguments);
      }
    });
    
    Ext.onReady(function() {
       var grid1 = Ext.create('UsersGrid', { renderTo: 'place-for-grid', height: 300, width: 600, title: 'Database' });

  2. #1002
    Sencha User
    Join Date
    Oct 2009
    Posts
    23
    Vote Rating
    2
    ivanleblanc is on a distinguished road

      0  

    Default


    @ preichow

    I have put together an example based on to Ext 4 grid examples.
    First one being the Basic Array grid to show local searching and the second one is the Infinite Grid example which uses the remote searching.

    There is one thing I did change that is not too intuitive because I give no feed back when the error is made. When the actual search is executed if its mode=local then I do nothing special, but if its remote I check to make sure you have a Server proxy configured before I proceed with the search, if you don't then the plugin does nothing.

    You will not see the Infinite Grid actually filter because obviously I can't access the back end code of sencha, but you will see the grid load screen come up and the store load request sent with the proper parameters to handle the remote searching.

    Should be able to just drop and run this code... just change the path of "Searching.js" to reflect your server.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css">
        
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all-debug.js"></script>
        
        <script type="text/javascript" src="/public/ext/ux/4.0/grid/feature/Searching.js"></script>
        
    </head>
    
    
    <body>
    
    
    <script type="text/javascript">
        
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*',
        'Ext.grid.PagingScroller'
    ]);
    
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        
        // setup the state provider, all state information will be saved to a cookie
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
    
        // sample static data for the store
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function change(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function pctChange(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
    
        // create the data store
        var store = Ext.create('Ext.data.ArrayStore', {
            fields: [
               {name: 'company'},
               {name: 'price',      type: 'float'},
               {name: 'change',     type: 'float'},
               {name: 'pctChange',  type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ],
            data: myData
        });
        
        var searching = {
            ftype: 'searching',
            mode: 'local'
        };
    
    
        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            features: [searching],
            stateful: true,
            stateId: 'stateGrid',
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                },
                {
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                },
                {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text     : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                }
            ],
            height: 350,
            width: 600,
            title: 'Array Grid',
            renderTo: 'basic',
            viewConfig: {
                stripeRows: true
            }
        });
        
        
        //****************************************************************************
        // Infinate Grid example
        //****************************************************************************
        Ext.define('ForumThread', {
            extend: 'Ext.data.Model',
            fields: [
                'title', 'forumtitle', 'forumid', 'author',
                {name: 'replycount', type: 'int'},
                {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
                'lastposter', 'excerpt', 'threadid'
            ],
            idProperty: 'threadid'
        });
    
    
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            id: 'store',
            pageSize: 200,
            model: 'ForumThread',
            remoteSort: true,
            // allow the grid to interact with the paging scroller by buffering
            buffered: true,
            proxy: {
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                type: 'jsonp',
                url: 'http://www.sencha.com/forum/remote_topics/index.php',
                extraParams: {
                    total: 50000
                },
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                },
                // sends single sort as multi parameter
                simpleSortMode: true
            },
            sorters: [{
                property: 'lastpost',
                direction: 'DESC'
            }]
        });
    
    
        function renderTopic(value, p, record) {
            return Ext.String.format(
                '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
                value,
                record.data.forumtitle,
                record.getId(),
                record.data.forumid
            );
        }
    
    
        var searching = {
            ftype: 'searching',
            mode: 'remote',
            position: 'top'
        };
    
    
        var grid = Ext.create('Ext.grid.Panel', {
            width: 700,
            height: 500,
            title: 'ExtJS.com - Browse Forums',
            store: store,
            features: [searching],
            verticalScrollerType: 'paginggridscroller',
            loadMask: true,
            disableSelection: true,
            invalidateScrollerOnRefresh: false,
            viewConfig: {
                trackOver: false
            },
            // grid columns
            columns:[{
                xtype: 'rownumberer',
                width: 50,
                sortable: false
            },{
                // id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
                // TODO: This poses an issue in subclasses of Grid now because Headers are now Components
                // therefore the id will be registered in the ComponentManager and conflict. Need a way to
                // add additional CSS classes to the rendered cells.
                id: 'topic',
                text: "Topic",
                dataIndex: 'title',
                flex: 1,
                renderer: renderTopic,
                sortable: false
            },{
                text: "Author",
                dataIndex: 'author',
                width: 100,
                hidden: true,
                sortable: true
            },{
                text: "Replies",
                dataIndex: 'replycount',
                align: 'center',
                width: 70,
                sortable: false
            },{
                id: 'last',
                text: "Last Post",
                dataIndex: 'lastpost',
                width: 130,
                renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
                sortable: true
            }],
            renderTo: Ext.getBody()
        });
    
    
        // trigger the data store load
        store.guaranteeRange(0, 199);    
        
    });
    </script>
    
    
    <div id="basic"></div>
    <br />
    <div id="topic-grid"></div>
    
    
    </body>
    </html>
    As for the
    Code:
    this.grid = this.view.up('gridpanel');
    I had a hard time figuring out where to run the onRender method Saki was using to add the searching toolbar. Other grid features from the API used attachEvents function to initialize stuff for the feature, so that's where I put mine. At that point this.grid was not initiated yet for some reason, but this.view was. So i ran a this.view.up to get me the grid so I could attach the render listener. It is probably kind of funky but it worked so I left it alone.

  3. #1003
    Sencha User
    Join Date
    Feb 2011
    Posts
    13
    Vote Rating
    0
    Patrick86 is on a distinguished road

      0  

    Default


    Hi,
    Is the plugin works with Ext.ux.maximgb.treegrid.GridPanel ??
    ty

  4. #1004
    Sencha User
    Join Date
    Aug 2011
    Posts
    21
    Vote Rating
    0
    venkateshns is on a distinguished road

      0  

    Default features[i] is undefined

    features[i] is undefined


    Quote Originally Posted by ivanleblanc View Post
    Saki, this GridSearch plugin has by far been the most useful plugin I have used in Ext 3 and want to thank you for your contribution.

    I am moving to Ext 4 and saw that you have not had time yet to port the plugin into Ext 4 so I made a go at it. I hope you don't mind me posting my revisions.

    I created a Grid Feature out of the GridSearch plugin.
    This feature can easily be applied to the Ext 4 grid example array-grid.js and far as I can tell everything seems to work.

    Once the Searching.js file is included you get a ftype "searching".

    Searching.js
    Code:
    // JavaScript Document// vim: ts=4:sw=4:nu:fdc=4:nospell
    /**
     * 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
    */
    
    Ext.define('Ext.ux.grid.feature.Searching', {
        extend: 'Ext.grid.feature.Feature',
        alias: 'feature.searching',
    
        /**
         * cfg {Boolean} autoFocus true to try to focus the input field on each store load (defaults to undefined)
         */
    
        /**
         * @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} 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 {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.
         */
    
        /**
         * @cfg {String} minCharsTipText Tooltip to display if minChars is > 0
         */
        minCharsTipText:'Type at least {0} characters',
    
        /**
         * @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} width Width of input field in pixels (defaults to 100)
         */
        width:100,
    
        /**
         * @cfg {Object} paramNames Params name map (defaults to {fields:'fields', query:'query'}
         */
        paramNames: {
             fields:'fields'
            ,query:'query'
        },
    
        /**
         * @cfg {String} shortcutKey Key to fucus the input field (defaults to r = Sea_r_ch). Empty string disables shortcut
         */
        shortcutKey:'r',
    
        /**
         * @cfg {String} shortcutModifier Modifier for shortcutKey. Valid values: alt, ctrl, shift (defaults to alt)
         */
        shortcutModifier:'alt',
    
        /**
         * @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
         */
    
        /**
         * @cfg {Ext.Panel/String} toolbarContainer Panel (or id of the panel) which contains toolbar we want to render
         * search controls to (defaults to this.grid, the grid this plugin is plugged-in into)
         */
                
        attachEvents: function() {
            this.grid = this.view.up('gridpanel');
            if(this.grid.rendered)
                this.onRender();
            else
                this.grid.on('render', this.onRender, this);
        },    
        
        onRender:function() {
                    
            var panel = this.toolbarContainer || this.grid;
            var tb = 'bottom' === this.position ? panel.getDockedItems('toolbar[dock="bottom"]') : panel.getDockedItems('toolbar[dock="top"]');
            if(tb.length > 0)
                tb = tb[0]
            else {
                tb = Ext.create('Ext.toolbar.Toolbar', {dock: this.position});
                panel.addDocked(tb);
            }
    
            // add menu
            this.menu = Ext.create('Ext.menu.Menu');
    
            // handle position
            if('right' === this.align) {
                tb.add('->');
            }
            else {
                if(0 < tb.items.getCount()) {
                    tb.add('-');
                }
            }
    
            // add menu button
            tb.add({
                 text:this.searchText
                ,menu:this.menu
                ,iconCls:this.iconCls
            });
    
            // add input field (TwinTriggerField in fact)
            this.field = Ext.create('Ext.form.TwinTriggerField', {
                width:this.width,
                qtip: 'ddd',
                selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus,
                trigger1Cls:'x-form-clear-trigger',
                trigger2Cls:this.minChars ? 'x-hidden' : 'x-form-search-trigger',
                onTrigger1Click: Ext.bind(this.onTriggerClear, this),
                onTrigger2Click: this.minChars ? Ext.emptyFn : Ext.bind(this.onTriggerSearch, this),
                minLength:this.minLength
            });
            
            // install event handlers on input field
            this.field.on('render', function() {
                
                var qtip = this.minChars ? Ext.String.format(this.minCharsTipText, this.minChars) : this.searchTipText;
                Ext.QuickTips.register({
                    target: this.field.inputEl,
                    text: qtip
                });
                
                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.add(this.field);
    
            // reconfigure
            this.reconfigure();
    
            // keyMap
            if(this.shortcutKey && this.shortcutModifier) {
                var shortcutEl = this.grid.getEl();
                var shortcutCfg = [{
                     key:this.shortcutKey
                    ,scope:this
                    ,stopEvent:true
                    ,fn:function() {
                        this.field.focus();
                    }
                }];
                shortcutCfg[0][this.shortcutModifier] = true;
                this.keymap = new Ext.KeyMap(shortcutEl, shortcutCfg);
            }
    
            if(true === this.autoFocus) {
                this.grid.store.on({scope:this, load:function(){this.field.focus();}});
            }
        } // eo function onRender
        // }}}
        // {{{
        /**
         * field el keypup event handler. Triggers the search
         * @private
         */
        ,onKeyUp:function() {
            var length = this.field.getValue().toString().length;
            if(0 === length || this.minChars <= length) {
                this.onTriggerSearch();
            }
        } // eo function onKeyUp
        // }}}
        // {{{
        /**
         * private Clear Trigger click handler
         */
        ,onTriggerClear:function() {
            if(this.field.getValue()) {
                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(),
                store = this.grid.store,
                proxy = store.getProxy();
    
            // 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 ? Ext.Date.format(rv, 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
            // your proxy must be a Server proxy
            else if(proxy instanceof Ext.data.proxy.Server) {
                // 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);
                    }
                });
    
                // add fields and query to baseParams of store
                delete(proxy.extraParams[this.paramNames.fields]);
                delete(proxy.extraParams[this.paramNames.query]);
                if (store.lastOptions && store.lastOptions.params) {
                    delete(proxy.lastOptions.params[this.paramNames.fields]);
                    delete(proxy.lastOptions.params[this.paramNames.query]);
                }
                if(fields.length) {
                    proxy.extraParams[this.paramNames.fields] = Ext.encode(fields);
                    proxy.extraParams[this.paramNames.query] = val;
                }
    
                // reload store
                store.load();
            }
    
        } // 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 && 'radio' !== this.menuStyle) {
                menu.add({
                    xtype: 'menucheckitem',
                    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.disabled) {
                                i.setChecked(checked);
                            }
                        });
                    }
                },'-');
            }
    
            // }}}
            // {{{
            // add new items
            var columns = this.grid.headerCt.items.items;
            var group = undefined;
            if('radio' === this.menuStyle) {
                group = 'g' + (new Date).getTime();    
            }
            
            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) {
                        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 = menu.items.find(function(itm) {
                        return itm.dataIndex === di;
                    });
                    if(item) {
                        item.setChecked(true, true);
                    }
                }, this);
            }
            // }}}
            // {{{
            // disable items
            if(this.readonlyIndexes instanceof Array) {
                Ext.each(this.readonlyIndexes, function(di) {
                    var item = menu.items.find(function(itm) {
                        return itm.dataIndex === di;
                    });
                    if(item) {
                        item.disable();
                    }
                }, this);
            }
            // }}}
    
        } // eo function reconfigure
        // }}}
    
    }); // eo extend
    
    // eof
    Code:
    var searching = {
       ftype: 'searching',
       minChars: 2,
       mode: 'local'
    };
    Then in your Grid config (this comes straight from array-grid.js in the examples):
    Code:
     var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            stateful: true,
            stateId: 'stateGrid',
        features: [searching],
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                }
    ....
    I have done the same thing but i am getting the following error. Can u please help me out.

    features[i] is undefined

    if (!features[i].isFeature) {

    in the firefox console.


    Regards,
    Venkatesh

  5. #1005
    Sencha User
    Join Date
    May 2008
    Posts
    23
    Vote Rating
    0
    nebbian is on a distinguished road

      0  

    Default


    Hi ivanleblanc,

    Thank you so much for porting this excellent plugin to Ext4.

    It works perfectly for me, straight out of the box

    I particularly like the way it will search after a short delay, without having to hit "Enter". I'm not sure if the original plugin was able to be configured to do this, but it was always necessary for me to hit "Enter" before the new data would show up. Btw I'm using remote stores.

    This is awesome, thanks again

  6. #1006
    Sencha User
    Join Date
    Sep 2011
    Posts
    27
    Vote Rating
    0
    panpur is on a distinguished road

      0  

    Default a bug?

    a bug?


    Thanks Saki & ivanleblanc, this is wonderful. I think I found a bug though.

    If I have tabpanel with 2 tabs, each tab contains a searchable grid. Then first grid will not have the search box, while the second grid will have 2 search boxes.

    I'm attaching a screenshot.
    search_bug.jpg

    Hope this will be fixed soon
    Thanks!

  7. #1007
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    mvsrekha is an unknown quantity at this point

      0  

    Default Search feature for Grid Panel

    Search feature for Grid Panel


    Can you please tell from the scratch, how to use this Grid Search Plugin using Asp.Net MVC.
    i was able to load gridpanel successfully with paging and sorting features..but i need search feature also in my gridpanel.

    i have googled a lot for solution. but i got nothing...can you please help me out ...


    Quote Originally Posted by jsakalos View Post
    Hi all,

    the self-contained Grid Search Plugin usage example follows. This example is configured to use local filtering (mode:'local') but remote mode, when serching itself is done by the server, is also possible. The plugin should also work with AutoGrid(s) and paging grids.

    Enjoy.


    http://gridsearch.extjs.eu

  8. #1008
    Sencha User
    Join Date
    Oct 2009
    Posts
    23
    Vote Rating
    2
    ivanleblanc is on a distinguished road

      0  

    Default


    @ panpur
    Can you post some code, may be how you have it laid out or something.
    Here's a quick example I made using the grid-array.js example form docs and it seems to work fine.

    I am using the Ext 4.1 rc3 in this example...
    Code:
    <html>
    <head>
        <title>Grid Search</title>
        
        <link rel="stylesheet" type="text/css" href="../../../public/ext/4.1.0-rc3/resources/css/ext-all.css">
        
        <script type="text/javascript" src="../../../public/ext/4.1.0-rc3/ext-all-debug.js"></script>
        
        <script type="text/javascript" src="../../../public/ext/ux/4.1/grid/feature/Searching.js"></script>
    
    
    
    
    <script type="text/javascript">
    
    
    
    
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*'
    ]);
    
    
    Ext.define('Company', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        idProperty: 'company'
    });
    
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        
        // setup the state provider, all state information will be saved to a cookie
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
    
        // sample static data for the store
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function change(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function pctChange(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
    
        // create the data store
        var store1 = Ext.create('Ext.data.ArrayStore', {
            model: 'Company',
            data: myData
        });
    
    
        var store2 = Ext.create('Ext.data.ArrayStore', {
            model: 'Company',
            data: myData
        });
        
        // create Grid Searching feature
        var searching = {
           ftype: 'searching',
           minChars: 2,
           position: 'top',
           mode: 'local'
        };
    
    
        // create the Grid
        var grid1 = Ext.create('Ext.grid.Panel', {
            store: store1,
            stateful: true,
            collapsible: true,
            multiSelect: true,
            stateId: 'stateGrid',
            features: [searching],
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                },
                {
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                },
                {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text     : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                }
            ],
            height: 350,
            width: 600,
            title: 'Array Grid',
            //renderTo: Ext.getBody(),
            viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            }
        });
    
    
        var grid2 = Ext.create('Ext.grid.Panel', {
            store: store2,
            stateful: true,
            collapsible: true,
            multiSelect: true,
            stateId: 'stateGrid',
            tbar: ['->'],
            features: [searching],
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                },
                {
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                },
                {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text     : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                }
            ],
            height: 350,
            width: 600,
            title: 'Array Grid',
            //renderTo: Ext.getBody(),
            viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            }
        });
        
        var tabpanel = Ext.create('Ext.tab.Panel', {
            renderTo: Ext.getBody(),
            items: [
                grid1,
                grid2
            ]
        });
    });
    
    
    
    
    </script>    
    </head>
    
    
    <body>
    
    
    </body>
    </html>

  9. #1009
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    mvsrekha is an unknown quantity at this point

      0  

    Default


    Can you please tell me how to implement the above grid search dynamically using asp.net MVC 3.
    Grid should have sorting, paging and searching features.

    Thanks in advance

  10. #1010
    Sencha User
    Join Date
    Oct 2009
    Posts
    23
    Vote Rating
    2
    ivanleblanc is on a distinguished road

      0  

    Default


    Quote Originally Posted by mvsrekha View Post
    Can you please tell me how to implement the above grid search dynamically using asp.net MVC 3.
    Grid should have sorting, paging and searching features.

    Thanks in advance
    I unfortunately have no experience in asp.net MVC 3.
    I am sorry.

Thread Participants: 245

  1. franklt69 (5 Posts)
  2. galdaka (2 Posts)
  3. thameema (1 Post)
  4. Dumbledore (3 Posts)
  5. JeffBurr (1 Post)
  6. berend (1 Post)
  7. mystix (1 Post)
  8. salvi (1 Post)
  9. cobnet (1 Post)
  10. dawesi (2 Posts)
  11. mysticav (3 Posts)
  12. mike1993 (3 Posts)
  13. JorisA (1 Post)
  14. cricri (5 Posts)
  15. apaa (1 Post)
  16. mbstroz (5 Posts)
  17. notjoshing (1 Post)
  18. MeDavid (1 Post)
  19. AlxH (1 Post)
  20. pantarhei (5 Posts)
  21. DeeZ (3 Posts)
  22. NBRed5 (2 Posts)
  23. zoq (2 Posts)
  24. ajaxE (4 Posts)
  25. cmendez21 (1 Post)
  26. Ronaldo (1 Post)
  27. mjlecomte (25 Posts)
  28. smokeman (11 Posts)
  29. Nam (4 Posts)
  30. keithnlarsen (2 Posts)
  31. rednix (2 Posts)
  32. expertmo (4 Posts)
  33. cking (1 Post)
  34. jelt (4 Posts)
  35. bcamp1973 (2 Posts)
  36. grgur (2 Posts)
  37. dwt11 (1 Post)
  38. michiel (3 Posts)
  39. Shmoo (3 Posts)
  40. evilized (1 Post)
  41. fangstern (1 Post)
  42. vishalg (3 Posts)
  43. Strati (1 Post)
  44. ArtBuilders (6 Posts)
  45. dax (5 Posts)
  46. thatcoder (7 Posts)
  47. jcar98 (1 Post)
  48. derbbre (3 Posts)
  49. wm003 (1 Post)
  50. garraS (3 Posts)
  51. kenshin (1 Post)
  52. ByteLess (2 Posts)
  53. Lobos (1 Post)
  54. a4 (1 Post)
  55. durlabh (3 Posts)
  56. elDub (1 Post)
  57. rstuven (1 Post)
  58. crpatrick (4 Posts)
  59. zedisdead (1 Post)
  60. vector4711 (1 Post)
  61. oanimashaun (1 Post)
  62. donssmith (3 Posts)
  63. sanjshah (5 Posts)
  64. nielsendev (2 Posts)
  65. Jika (2 Posts)
  66. Cooldream (2 Posts)
  67. iTzAngel (1 Post)
  68. franck34 (2 Posts)
  69. paubach (2 Posts)
  70. stewart (1 Post)
  71. teknaut (4 Posts)
  72. pjesus (2 Posts)
  73. NotChris (5 Posts)
  74. juicymedia (2 Posts)
  75. v496820 (2 Posts)
  76. hazooma (1 Post)
  77. obbakilla (1 Post)
  78. BlueCamel (1 Post)
  79. feodor (1 Post)
  80. w3bbuilder (1 Post)
  81. johnsbrn (1 Post)
  82. razor (1 Post)
  83. seppy (3 Posts)
  84. stefanorg (3 Posts)
  85. jimkan (1 Post)
  86. kenja (2 Posts)
  87. sandy (1 Post)
  88. eri.TsingTao (1 Post)
  89. rainydays (1 Post)
  90. iLiketoGrid (1 Post)
  91. Shaguar (8 Posts)
  92. AMS949 (3 Posts)
  93. moegal (3 Posts)
  94. aleczapka (2 Posts)
  95. Stripeman (6 Posts)
  96. abhaysingh (5 Posts)
  97. mango (1 Post)
  98. NoahK17 (3 Posts)
  99. Remy (1 Post)
  100. medley (11 Posts)
  101. stevchen (1 Post)
  102. abraxxa (28 Posts)
  103. Efex (3 Posts)
  104. Rotomaul (2 Posts)
  105. miihiir (4 Posts)
  106. nebbian (1 Post)
  107. Riri (6 Posts)
  108. catalina (1 Post)
  109. Bing Qiao (1 Post)
  110. juferoto (2 Posts)
  111. bk1 (2 Posts)
  112. sami_user (1 Post)
  113. dmcclean (2 Posts)
  114. Pink.ME (3 Posts)
  115. sebrand (1 Post)
  116. charak (2 Posts)
  117. charleshimmer (16 Posts)
  118. patrosmania (4 Posts)
  119. rosecorp (1 Post)
  120. johrisd (1 Post)
  121. aomadevelopers (1 Post)
  122. nicola_java (1 Post)
  123. BitPoet (1 Post)
  124. OliverT (3 Posts)
  125. randomuser01 (2 Posts)
  126. schone (3 Posts)
  127. perdar (1 Post)
  128. ajain (3 Posts)
  129. getindas (1 Post)
  130. giega (1 Post)
  131. ryanyoungsma (1 Post)
  132. ph0enix (1 Post)
  133. italianboy (1 Post)
  134. LutzAlbers (3 Posts)
  135. Ajish (2 Posts)
  136. christophe67 (1 Post)
  137. jmariani (4 Posts)
  138. wki01 (4 Posts)
  139. wemerson.januario (1 Post)
  140. viciuascuns (4 Posts)
  141. JohnnyWheels (1 Post)
  142. nar (3 Posts)
  143. shab (2 Posts)
  144. mystik (1 Post)
  145. unnamed_dev (1 Post)
  146. ScottLoney (3 Posts)
  147. whodat (4 Posts)
  148. Alex84 (7 Posts)
  149. mjmonserrat (3 Posts)
  150. andy_ghg (2 Posts)
  151. knappy (1 Post)
  152. bareflix (2 Posts)
  153. makiavelli (1 Post)
  154. daniel_82 (1 Post)
  155. peteryjk (2 Posts)
  156. michael.pedrotti (1 Post)
  157. elona (3 Posts)
  158. chinnapandu (1 Post)
  159. jsundquist (6 Posts)
  160. feo (1 Post)
  161. dubito (2 Posts)
  162. Georgioa (1 Post)
  163. SchattenMann (4 Posts)
  164. Relleum (1 Post)
  165. ivan.kristianto (3 Posts)
  166. yeyepot (1 Post)
  167. raydeen (1 Post)
  168. easycodes (4 Posts)
  169. rockinrandall (5 Posts)
  170. redcs (3 Posts)
  171. hatsu1119 (1 Post)
  172. surendra_leo (1 Post)
  173. ssawchenko (11 Posts)
  174. Sigma (3 Posts)
  175. Lmouse (1 Post)
  176. Spongerusher (1 Post)
  177. ValiBOSS (1 Post)
  178. joe123 (3 Posts)
  179. scooter (3 Posts)
  180. harsha_velicheti (1 Post)
  181. ivanleblanc (9 Posts)
  182. m4v0 (3 Posts)
  183. jbusuulwa (1 Post)
  184. seedeg (6 Posts)
  185. Z24_2000 (3 Posts)
  186. markw (2 Posts)
  187. atutus (2 Posts)
  188. luke82 (3 Posts)
  189. rameshkt (2 Posts)
  190. elgalle (2 Posts)
  191. Vepe (2 Posts)
  192. barser (2 Posts)
  193. metra (5 Posts)
  194. hotdesc (4 Posts)
  195. chrislovecnm (1 Post)
  196. King_Aero (1 Post)
  197. idefix (5 Posts)
  198. daiei27 (3 Posts)
  199. LostSoul (2 Posts)
  200. tumbochka (3 Posts)
  201. Dipish (7 Posts)
  202. mcafee (1 Post)
  203. alexpotemkin (1 Post)
  204. ruperty (5 Posts)
  205. Rbn_3d (2 Posts)
  206. rxopt (1 Post)
  207. mayurid (1 Post)
  208. jeroen_syntux (2 Posts)
  209. aminaq (4 Posts)
  210. sosy (3 Posts)
  211. asafm (2 Posts)
  212. extjs1111_user (4 Posts)
  213. scottmartin (2 Posts)
  214. clements (1 Post)
  215. wavedan (3 Posts)
  216. jizhang88 (2 Posts)
  217. Coil (2 Posts)
  218. Samuel.reed (6 Posts)
  219. sense.nda12 (1 Post)
  220. zoja (1 Post)
  221. andyproxis (1 Post)
  222. baldeep_bhatia (1 Post)
  223. stevwinata (1 Post)
  224. Patrick86 (1 Post)
  225. dumpf (3 Posts)
  226. parimala (3 Posts)
  227. vicvolk (4 Posts)
  228. preichow (1 Post)
  229. shaoming (1 Post)
  230. Ixtinkt (7 Posts)
  231. jadiagaurang (1 Post)
  232. Juanyong (1 Post)
  233. venkateshns (1 Post)
  234. panpur (3 Posts)
  235. codeart.ch (2 Posts)
  236. hieu79vn (1 Post)
  237. mvsrekha (2 Posts)
  238. aislan (1 Post)
  239. buhari (1 Post)
  240. extjsquicklearner (1 Post)
  241. shankar8rajah1 (1 Post)
  242. jacinth_1215 (2 Posts)
  243. venkikodakirthi (1 Post)
  244. bwgv (1 Post)
  245. nckenn (1 Post)

Tags for this Thread

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