/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){

    // create the data store
    var store = new Ext.data.JsonStore({
        url: 'demogrid.php',
        root: 'rows',
        totalProperty: 'datatotal',
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'size'},
           {name: 'visible'}
        ]
    });
    store.load({params:{start:0,limit:10}});

    var tb = new Ext.PagingToolbar({
        store: store,
        pageSize: 10
    });
    
    // 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: "Size", width: 75, sortable: true, dataIndex: 'size'},
            {header: "Visible", width: 75, sortable: true, dataIndex: 'visible'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:300,
        width:600,
        title:'KeyNav Grid',
        bbar: tb
    });

    grid.render('grid-example');

    var pagingNav = function(page) {
        if (!tb[page].disabled) {
            tb.onClick(page);
        }
    };
    
    new Ext.KeyNav(grid.getEl(),{
        pageDown: pagingNav.createDelegate(this,['next']),
        pageUp: pagingNav.createDelegate(this, ['prev']),
        home: pagingNav.createDelegate(this,['first']),
        end: pagingNav.createDelegate(this,['last'])
    });
    
    store.on('load', function() {
        var fn = function() {
            grid.getSelectionModel().selectFirstRow();
            grid.getView().focusEl.focus();
        }
        fn.defer(1);
    });
});