JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="//extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all-gray.css" />
JavaScript
Ext.Loader.setConfig({
enabled: true,
'paths': {
'Ext.ux': 'http://extjs.cachefly.net/ext-4.2.0-gpl/examples/ux/'
}
});
Ext.onReady(function () {
var myStore = new Ext.data.JsonStore({
/*
proxy: new Ext.data.HttpProxy({
url: 'Service.asmx/GetPeople',
headers: {
'Content-type': 'application/json'
}
}),
*/
id: 'Id',
reader: {
type: 'json',
root: 'd',
idProperty: 'Id'
},
fields: ['Id', 'FirstName', 'LastName', 'BirthDate'],
autoLoad: true,
data: [{
"Id": 0,
"FirstName": "sami",
"LastName": "[email protected]",
"BirthDate": "23188219"
}, {
"Id": 1,
"FirstName": "admin",
"LastName": "[email protected]",
"BirthDate": "1111111"
}, {
"Id": 2,
"FirstName": "user",
"LastName": "[email protected]",
"BirthDate": "2222222"
}]
});
var gridTest = new Ext.grid.Panel({
store: myStore, // Our store
renderTo: Ext.getBody(),
forceFit: true,
columns: [ // Grid columns
{
xtype: 'gridcolumn',
width: 100,
text: 'Id',
dataIndex: 'Id',
flex: 1
}, {
xtype: 'gridcolumn',
width: 100,
text: 'Nom',
dataIndex: 'FirstName',
flex: 1
}, {
xtype: 'gridcolumn',
width: 100,
text: 'Mail',
dataIndex: 'LastName',
flex: 1
}, {
xtype: 'gridcolumn',
width: 100,
text: 'Phone',
dataIndex: 'BirthDate',
flex: 1
}]
});
});