1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    5
    Vote Rating
    0
    False Maria is on a distinguished road

      0  

    Question My LiveGrid Loses Sorting Functionality?

    My LiveGrid Loses Sorting Functionality?


    Hi everyone,

    This is my first post, so forgive me if I forget to mention something.

    I am working on a web app which will be using ExtJS, mostly for the grid functionality. We ran into an issue when dealing with large amounts of data. The grid was taking too long, ever with paging, so we decided to go with the LiveGrid User Extension.

    The problem is this, even when I try and replicate the LiveGrid using hard-coded json in data-proxy.php, it won't sort *any* of the data. It shows the "Loading" screen briefly before coming back, unsorted.

    Here is the modified PHP from data-proxy.php

    PHP Code:
    <?php 

         
        $length 
    500
         
        
    $feeds = array('response' => array( 
            
    'value' => array() 
        ));          

                                             
        for (
    $i=1;$i<500;$i++) { 
            
            
    $feeds['response']['value']['items'][] = array( 
               
    'id'            => $i
               
    'number_field'  => rand(900,1000), 
               
    'string_field'  => rand(900,1000), 
               
    'date_field'    => rand(900,1000
            );   
        } 
         
        if (!isset(
    $feeds['response']['value']['items'])) { 
            
    $feeds['response']['value']['items'] = array(); 
        } 
         
        
    $feeds['response']['value']['total_count'] = $length;                                           
        
    $feeds['response']['value']['version']     = 1;                                           
         
    // +---------------------------------------------------------------------------- 
    // | You need to json_encode the array. If your PHP installation does not support 
    // | json_encode, go and get the Zend Framework at http://framework.zend.com, 
    // | which provides userland json encoding/decoding logic. 
    // +----------------------------------------------------------------------------     
        
    if (function_exists('json_encode')) { 
            
    $json json_encode($feeds); 
        } else { 
            require_once 
    'Zend/Json.php'
            
    $json Zend_Json::encode($feeds); 
        } 
          
        echo 
    $json;         
    ?>

    here is my example page which is only modified to find the paths to all the includes.


    HTML Code:
    <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    <head>
    
        <title>ExtJS (V2 RC1) live grid (user extension)</title>
    
        <!-- your usual ext stuff -->
        <script type="text/javascript" src="ext-2.0.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-2.0.1/ext-all.js"></script>    
        <link rel="stylesheet" type="text/css" href="ext-2.0.1/resources/css/ext-all.css"/>
    
        <!-- needed files for the ux  -->
        <script type="text/javascript" src="ext-2.0.1/ux/widgets/grid/BufferedGridView.js"></script>    
        <script type="text/javascript" src="ext-2.0.1/ux/widgets/grid/BufferedRowSelectionModel.js"></script>    
        <script type="text/javascript" src="ext-2.0.1/ux/widgets/grid/BufferedStore.js"></script>    
        <script type="text/javascript" src="ext-2.0.1/ux/widgets/BufferedGridToolbar.js"></script>    
        <script type="text/javascript" src="ext-2.0.1/ux/data/BufferedJsonReader.js"></script>    
    
        
    </head>
    <body>
      
    
    <h1>Live Grid Example</h1>
    <p>This example shows how to create a grid representing a large amount of data without additional
    paging buttons.</p>
    <p>The grid sits in a Ext.Window to demonstrate the BufferedGridView's resize behavior.</p>
    <p></p>
    <p>Please report bugs and feature requests to Thorsten Suckow-Homberg &lt;<a href="mailto:ts@siteartwork.de">ts@siteartwork.de</a>&gt;</p>
    <p><a href="http://www.siteartwork.de">http://www.siteartwork.de</a></p>
    <p>Forum entry: <a href="http://extjs.com/forum/showthread.php?p=84902#post84902">http://extjs.com/forum/showthread.php?p=84902#post84902</a></p>
    <p>Blog entry: <a href="http://www.siteartwork.de/2007/11/10/livegrid-component-with-extjs/">http://www.siteartwork.de/2007/11/10/livegrid-component-with-extjs/</a></p>
    
    <p>Project home: <a href="http://www.siteartwork.de/livegrid">http://www.siteartwork.de/livegrid</a></p>
    <script type="text/javascript">
        
    
    
    
    Ext.onReady(function(){
    
    // +----------------------------------------------------------------------------
    // | How to use your new components...
    // +----------------------------------------------------------------------------    
        /**
         * BufferedJsonReader derives from Ext.data.JsonReader and allows to pass
         * a version value representing the current state of the underlying data 
         * repository.
         * Version handling on server side is totally up to the user. The version
         * property should change whenever a record gets added or deleted on the server
         * side, so the store can be notified of changes between the previous and current
         * request. If the store notices a version change, it will fire the version change
         * event. Speaking of data integrity: If there are any selections pending, 
         * the user can react to this event and cancel all pending selections. 
         */    
        var bufferedReader = new Ext.ux.data.BufferedJsonReader({
            root            : 'response.value.items',
            versionProperty : 'response.value.version',
            totalProperty   : 'response.value.total_count',
            id              : 'id'
          }, [ {
             name : 'number_field', sortType : 'int'
          },{
             name : 'string_field', sortType : 'string'
          },{
             name : 'date_field',   sortType : 'int'
        }]);
        
        /**
         * Set up your store. 
         * An instance of BufferedJsonReader is needed if you want to listen to 
         * <tt>versionchange</tt> events. 
         * Make sure you set the config option bufferSize high enough 
         * (something between 100 and 300  works good).  
         */
        var bufferedDataStore = new Ext.ux.grid.BufferedStore({
            autoLoad   : true,
            bufferSize : 300,
            reader     : bufferedReader,
            sortInfo   : {field: 'number_field', direction: 'ASC'},
            url        : 'data-proxy.php'
        });
    
        /**
         * Here is where the magic happens: BufferedGridView. The nearLimit
         * is a parameter for the predictive fetch algorithm within the view.
         * If your bufferSize is small, set this to a value around a third or a quarter 
         * of the store's bufferSize (e.g. a value of 25 for a bufferSize of 100;
         * a value of 100 for a bufferSize of 300).
         * The loadMask is optional but should be used to provide some visual feedback
         * for the user when the store buffers (the loadMask from the GridPanel 
         * will only be used for initial loading, sorting and reloading).
         */
        var bufferedView = new Ext.ux.grid.BufferedGridView({
                nearLimit      : 100,
                loadMask : {
                    msg : 'Please wait...'
        }});          
        
        /**
         * You can use an instance of BufferedGridToolbar for keeping track of the 
         * current scroll position. It also gives you a refresh button and a loading
         * image that gets activated when the store buffers.
         * ...Yeah, I pretty much stole this one from the PagingToolbar!
         */         
        var bufferedGridToolbar = new Ext.ux.BufferedGridToolbar({
            view        : bufferedView,
            displayInfo : true
        });
    
        /**
         * BufferedRowSelectionModel introduces a different selection model and a
         * new <tt>selectiondirty</tt> event. 
         * You can keep selections between <b>all</bb> ranges in the grid; records which
         * are currently in the buffer and are selected will be added to the selection 
         * model as usual. Rows representing records <b>not</b> loaded in the current 
         * buffer will be marked using a predictive index when selected. 
         * Selected rows will be successively read into the selection store 
         * upon scrolling through the view. However, if any records get added or removed,
         * and selection ranges are pending, the selectiondirty event will be triggered.
         * It is up to the user to either clear the pending selections or continue
         * with requesting the pending selection records from the data repository.
         * To put the whole matter in a nutshell: Selected rows which represent records 
         * <b>not</b> in the current data store will be identified by their assumed
         * index in the data repository, and <b>not</b> by their id property.
         * Events such as <tt>versionchange</tt> or <tt>selectiondirty</tt>
         * can help in telling if their positions in the data repository changed.
         */
        var bufferedSelectionModel = new Ext.ux.grid.BufferedRowSelectionModel();        
        
    
            
            
    // +----------------------------------------------------------------------------
    // | ... nothing fancy in here. The usual Ext setup process of the panel
    // | and the column model, totally independent of the above configuration
    // | options.
    // +----------------------------------------------------------------------------
        var colModel = new Ext.grid.ColumnModel([
            {header: "Number", align : 'left',   width: 160, sortable: true, dataIndex: 'number_field'},
            {header: "String", align : 'left',   width: 160, sortable: true, dataIndex: 'string_field'},
            {header: "Date",   align : 'right',  width: 160, sortable: true, dataIndex: 'date_field'}
        ]);
    
    
        var grid = new Ext.grid.GridPanel({
            ds             : bufferedDataStore,
            enableDragDrop : false,
            cm             : colModel,
            sm             : bufferedSelectionModel,
            loadMask       : {
                msg : 'Loading...'
            },
            view           : bufferedView,
            title          : 'Large table',
            bbar           : bufferedGridToolbar
        });
        
        var w = new Ext.Window({
            title       : 'Ext.ux.grid.BufferedGridView V0.1',
            maximizable : true,
            resizable   : true,
            layout      : 'fit',
            items       : [grid],
            height      : 400,
            width       : 500
        });
        
        w.show();
            
    }); 
         
    
    </script>    
        
    </body>
    </html>
    Any help would be greatly appreciate

  2. #2
    Ext User
    Join Date
    Feb 2008
    Posts
    5
    Vote Rating
    0
    False Maria is on a distinguished road

      0  

    Default


    Ooops, this should be moved to the 2.0 side of things. Sorry...