ExtJS 简单的gridpanel
数据源users.json
{
"users": [{
"firstName": 'xu',
"lastName":'yawen',
"age": 24,
"eyeColor": 'black'
},{
"firstName": 'zhang',
"lastName":'wei',
"age": 24,
"eyeColor": 'black'
},{
"firstName": 'zhang',
"lastName":'yu',
"age": 26,
"eyeColor": 'black'
}]
}gird.html
<!DOCTYPE html>
<html>
<head>
<title>store</title>
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.2.1/ext-all-dev.js"></script>
<script type="text/javascript">
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
Ext.onReady(function(){
Ext.create('Ext.grid.Panel', {
title:'Simple grid',
store: myStore,
columns: [
{text: 'firstName', dataIndex:'firstName'},
{text: 'lastName', dataIndex: 'lastName', flex:1},
{text: 'age', dataIndex: 'age'},
{text:'eyeColor',dataIndex: 'eyeColor'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
})
});
</script>
</head>
<body>
</body>