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");
}