Results 1 to 2 of 2

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

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Vote Rating

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


    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:
    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">
    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>   


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

     * Ext JS Library 3.2.1
     * Copyright(c) 2006-2010 Ext JS, Inc.
        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{
            proxy: new,
            sortInfo: {field:'price', direction:'ASC'},
            reader: new{
                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',
            title:'Sliding Pager',
            plugins: [filterRow,panelResizer],
            bbar: new Ext.PagingToolbar({
                pageSize: 10,
                store: store,
                displayInfo: true,
                plugins: new Ext.ux.ProgressBarPager()
        store.load({params:{start:0, limit:10}});
    Try this example:

    Thank you very much!

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    The Netherlands
    Vote Rating


    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts