Code:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
function init() {
Ext.QuickTips.init();
Ext.define('employee', {
extend : 'Ext.data.Model',
fields : [
{name: 'eid', type: 'string'},
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
var data = {
employees : [
{
eid : '1238-2318-1238-1777',
firstName : 'Nick',
lastName : 'Arnold',
age : 25,
eyeColor : 'Green'
},{
eid : '2382-2390-2312-7866',
firstName : 'Steve',
lastName : 'Buscemi',
age : 53,
eyeColor : 'Brown'
}
]
};
var store = Ext.create('Ext.data.ArrayStore', {
storeId : 'employeeStore',
model : 'employee',
autoLoad: true,
data : data,
proxy : {
type: 'memory',
reader : {
type : 'json',
root : 'employees'
}
}
});
Ext.create('Ext.grid.Panel', {
title : 'Ext 4 Grid',
store : store, //Ext.data.StoreManager.lookup('employeeStore'),
columns : [
{
header : 'Name',
dataIndex : 'firstName'
},{
header : 'Eyes',
dataIndex : 'eyeColor'
},{
header : 'Age',
dataIndex : 'age'
}
],
height : 200,
width : 400,
viewConfig : {
stripRows : true
},
renderTo: 'grid-ext4-test-div'
});
}
Ext.onReady(init);
I'm seeing this in all browsers.