1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    31
    Vote Rating
    2
    epi82 is on a distinguished road

      0  

    Default Progress Bar Pager with extension Ext.ux.grid.FilterRow

    Progress Bar Pager with extension Ext.ux.grid.FilterRow


    Hello,

    I'm trying to add in Progress Bar Pager the extension "Ext.ux.grid.FilterRow".

    It works good but the FilterRow is available only for the grid records in the select page.

    Is it possible to filter all the grid records and not only the records shown in each page?

    I show you what I've done. This is my php page:

    PHP Code:
    <html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    title>ProgressBarPager Extension Example</title>

        <
    link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
        <
    link rel="stylesheet" type="text/css" href="css/PanelResizer.css" />
        <!-- 
    Common Styles for the examples -->

        <
    style type="text/css">
        </
    style>
        
        <
    script type="text/javascript" src="adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-all.js"></script>

        <script type="text/javascript" src="js/ProgressBarPager.js"></script>
        <script type="text/javascript" src="js/PanelResizer.js"></script>
        <script type="text/javascript" src="js/PagingMemoryProxy.js"></script>
        <script type="text/javascript" src="js/progress-bar-pager.js"></script>
        
        <!-- FilterRow -->
        <link rel="stylesheet" type="text/css" href="css/FilterRow.css"/>
        <script type="text/javascript" src="js/FilterRow.js"></script>   

    </head>
    <body>

    <div id="grid-example"></div>
    </body>
    </html> 
    and this is the "progress-bar-pager.js":

    Code:
    /*!
     * Ext JS Library 3.2.1
     * Copyright(c) 2006-2010 Ext JS, Inc.
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    
    Ext.onReady(function(){
    
        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']
        ];
    
        // example of custom renderer function
        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;
        }
    
        // example of custom renderer function
        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 = new Ext.data.Store({
            proxy: new Ext.ux.data.PagingMemoryProxy(myData),
            remoteSort:true,
            sortInfo: {field:'price', direction:'ASC'},
            reader: new Ext.data.ArrayReader({
                fields: [
                   {name: 'company'},
                   {name: 'price', type: 'float'},
                   {name: 'change', type: 'float'},
                   {name: 'pctChange', type: 'float'},
                   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                ]
            })
        });
    
        var filterRow = new Ext.ux.grid.FilterRow();    
        
        var panelResizer = new Ext.ux.PanelResizer({ minHeight: 200 });
        
        
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', filter:{ }},
                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
                {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            height:320,
            width:600,
            frame:true,
            title:'Sliding Pager',
    
            plugins: [filterRow,panelResizer],
    
            bbar: new Ext.PagingToolbar({
                pageSize: 10,
                store: store,
                displayInfo: true,
    
                plugins: new Ext.ux.ProgressBarPager()
            })
        });
    
        grid.render('grid-example');
    
        store.load({params:{start:0, limit:10}});
    });
    Try this example: http://botanica.funghiitaliani.it/index2.php

    Thank you very much!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You would have to do remote filtering (this would have to be something that both FilterRow and your server would have to support).

Similar Threads

  1. Replies: 2
    Last Post: 22 May 2009, 11:29 AM
  2. [3.x] progress Bar Pager Extension, with quicktips
    By syscobra in forum Ext 3.x: User Extensions and Plugins
    Replies: 0
    Last Post: 13 May 2009, 8:43 PM
  3. Progress bar extension.
    By MaximGB in forum Ext 1.x: User Extensions and Plugins
    Replies: 9
    Last Post: 29 Aug 2007, 4:26 AM

Thread Participants: 1