1. #1
    Ext User chazmatazz's Avatar
    Join Date
    Nov 2007
    Location
    Ithaca, NY
    Posts
    15
    Vote Rating
    0
    chazmatazz is on a distinguished road

      0  

    Default Really simple external ArrayStore example

    Really simple external ArrayStore example


    How to load external data into a Grid. A simple derivation of the ArrayGrid example on the extjs.com example page.

    Code:
    /*
     * Ext JS Library 2.0 RC 1
     * Copyright(c) 2006-2007, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    
    Ext.onReady(function(){
    
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
        // 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;
        }
    
        // tell the store how to process the data
        var reader = new Ext.data.ArrayReader({}, [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]);
        
        // get the data
        var proxy = new Ext.data.HttpProxy({
                    //where to retrieve data
                    url: 'simpledata.html', //url to data object (server side script)
                    method: 'GET'
                });
            
        // create the data store.
        var store = new Ext.data.Store({
        	reader: reader,
            proxy: proxy
        });
    	
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
                {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:350,
            width:600,
            title:'Array Grid'
        });
        
        // load the data store
        store.load();
    
    	// render into an id tag
        grid.render('grid-example');
    
        grid.getSelectionModel().selectFirstRow();
    });
    Attached Files