grid

function getCUInstance()
{
document.getElementById("title1").innerHTML = "My VM Instances";
document.getElementById("content1").innerHTML = "";
    Ext.QuickTips.init();

    function changeStatus(val)
    {
        if (val == 0)
        {
            return '<span style="color:green;">pending</span>';
        } else if (val == 1)
        {
            return '<span style="color:green;">running</span>';
        }else if(val == 2)
        {
        return '<span style="color:green;">destroyed</span>';
        }else{
        return '<span style="color:green;">exception</span>';
        }
    }
   
     //define model 
Ext.define('ShowProductInstance', {
                extend: 'Ext.data.Model',
                fields: [
                {name: 'productinstanceInstanceId', type: 'string'},
                    {name: 'productinstanceAliasName', type: 'string'},
                    {name: 'public_addresses',  type: 'string'},
                ]
            });
           
           //loading data
       var myStore = Ext.create('Ext.data.Store', {
        model: 'ShowProductInstance',
        proxy: {
            type: 'ajax',
            url : 'vm!vmInstance.action',
            reader: {
                type: 'json',
                root: 'showProductInstance'
            }
        }
    });
   
    var grid = Ext.create('Ext.grid.Panel', {
        //title: 'Company data',
        store: myStore,
            columns: [
            {
             header:'id',
             id:'productinstanceInstanceId',
             text:'productinstanceInstanceId',
             hidden:true,
                        width:100,
             dataIndex: 'productinstanceInstanceId'
             },
                {
                header:'status',
                text:'productinstanceStatus',
                width:80,
                sortable : true,
                renderer:changeStatus,
                dataIndex: 'productinstanceStatus'
                },
                {
                header:'product',
                xtype: 'actioncolumn',
                width: 100,
                items: [
                {
                    icon:'../../resources/css/images/stoppic.png',  // Use a URL in the icon config
                    tooltip:'stop instance',
                    handler:function(grid, rowIndex, colIndex)
                    {
                        var instance = myStore.getAt(rowIndex);
                        alert("id:  " + instance.get('productinstanceInstanceId'));
                    }
                },
                {
                    icon:'../../resources/css/images/deletepic.png',  // Use a URL in the icon config
                    tooltip:'delete instance',
                    handler:function(grid, rowIndex, colIndex)
                    {
                        var instance = myStore.getAt(rowIndex);
                        alert("id:  " + instance.get('productinstanceInstanceId'));
                    }
                }
                ]
            }

    ]
     });
     myStore.load();
     grid.render("content1");
}