DynamicGridPanel

/**
* Ext.ux.grid.DynamicGridPanel
*/
Ext.define('Ext.ux.grid.DynamicGridPanel', {
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.dynamicgrid',
    /**
    * initialising the components
    */
    initComponent: function(){
        /**
        * set the config we want
        */
        var config = {
            columns:[],
            rowNumberer: false
        };
       
        // appy to this config
        Ext.apply(this, config);
        // apply to the initialConfig
        Ext.apply(this.initialConfig, config);
        // call the arguments
        this.callParent(arguments);
    },
    /**
    * When the store is loading then reconfigure the column model of the grid
    */
    storeLoad: function()
    {
        /**
        * JSON data returned from server has the column definitions
        */
        if(typeof(this.store.proxy.reader.jsonData.columns) === 'object') {
            var columns = [];
            /**
            * adding RowNumberer as we need to add them
            * before other columns to display first
            */
            if(this.rowNumberer) { columns.push(Ext.create('Ext.grid.RowNumberer')); }
            /**
            * assign new columns from the json data columns
            */
            Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
                columns.push(column);
            });
            /**
            *  reconfigure the column model of the grid
            */
            this.reconfigure(this.store, columns);
        }
    },
    /**
    * assign the event to itself when the object is initialising
    */
    onRender: function(ct, position){
            /**
            *  well, old fashion way, but works well.
            */
            Ext.ux.grid.DynamicGridPanel.superclass.onRender.call(this, ct, position);
            /**
            * hook the store load event to our function
            */
            this.store.on('load', this.storeLoad, this);
    }
});





// Start loading the page      
Ext.onReady(function(){
    // we need to define the model but the field values will be parsed
    // automatically since we provided fields in the metaData from server
   Ext.define('dynamicModel', {
     extend: 'Ext.data.Model',
     //set the proxy
     proxy: {
       type: 'rest',
       url: 'data.php' // the sample server address
     }
   });
   // create a data store
   var myStore = Ext.create('Ext.data.Store', {
         model:'dynamicModel',
         autoLoad:true,
   });  
   // create dynamic grid
   var myGrid = {
       title:'Dynamic Grid',
       xtype:'dynamicgrid',
       forceFit:true,
       region:'center',
       store:myStore,
       dockedItems: [{
         xtype: 'pagingtoolbar',
         store: myStore,
         dock: 'bottom',
         displayInfo: true
       }]            
   };
    // finally, build the main layout once all the pieces are ready.
    Ext.create('Ext.container.Viewport', {
        layout:'border',
        items:[myGrid]
    });
});



$total = 100;
// you can pre-define the required property parameters
$output["metaData"]["idProperty"]="id";
$output["metaData"]["totalProperty"]="total";
$output["metaData"]["successProperty"]="success";
$output["metaData"]["root"]="data";
// you can parse field values via your database schema
$output["metaData"]["fields"][]=array("name"=>"id","type"=>"int");
$output["metaData"]["fields"][]=array("name"=>"name","type"=>"string");
$output["metaData"]["fields"][]=array("name"=>"firstName","type"=>"string");
$output["metaData"]["fields"][]=array("name"=>"lastName","type"=>"string");
// you can parse column values via your database schema
$output["columns"][]=array("dataIndex"=>"id","header"=>"ID", "width"=>10);
$output["columns"][]=array("dataIndex"=>"name","header"=>"User Name","width"=>20);
$output["columns"][]=array("dataIndex"=>"firstName","header"=>"First Name");
$output["columns"][]=array("dataIndex"=>"lastName","header"=>"Last Name");
// the misc properties
$output["total"]=$total;
$output["success"]=true;
$output["message"]="success";
// parse pages  
$start = $_GET['start'] + 1;
$max = $_GET['start'] + $_GET['limit'];
// make sample data
for($i = $start; $i <= $max; $i++ ){
 $output["data"][]= array(
                "id"=>$i,
                "name"=>"UserName-". $i,
                "firstName"=>"My First Name No. ". $i,
                "lastName"=>"My Last Name No. ". $i);
}  
// output the value
echo json_encode($output);