Code:
Ext.onReady(function() {
Ext.QuickTips.init();
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store : store,
selType :'cellmodel',
columns: [{text:'Company', width:200, dataIndex:'company',locked : true },
{text:'Price' , width:125, dataIndex:'price' },
{text:'Change' , width:125, dataIndex:'change' },
{text:'%Change', width:125, dataIndex:'pctChange'},
{text:'Updated', width:35, dataIndex:'lastChange'}],
height: 350,
width : 600,
title : 'Locking Grid Column',
renderTo:'grid-example',
});
});
grid.on( 'cellclick',
function(){
console.log(arguments);
},
this
)