Extjs5.1正式版已经出来一段时间了，为了与时俱进，从这篇文章开始，使用Extjs5.1,所以标题也变成“Extjs5.1××××××”。
这篇文章讲Grid组件，先搭建好环境。
我把Extjs5.1需要用到的库文件整理到ext文件中，如果想按照这篇文章一步一步来做这个例子的话，点击这里下载，然后根据下面的步骤搭建环境。如果不想一步一步做的话，可以不用下载，文章最后我会提供完整的源码下载。
新建一个项目，名称就叫ExtGridDemo吧，然后把下载的ext包复制到项目里面，同时创建其他文件及文件夹（MVVM项目结构）
index.html
<!DOCTYPE HTML><html manifest=""><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="UTF-8"><title>MyApp</title><link rel="stylesheet" type="text/css" href="ext/ext-theme-crisp-all.css"><script type ="text/javascript" src="ext/bootstrap.js"></script><script type ="text/javascript" src="ext/ext-theme-crisp.js"></script><script type ="text/javascript" src="app.js"></script></head><body></body></html>
app.js
Ext.application({name: 'MyApp',extend: 'MyApp.Application',autoCreateViewport: 'MyApp.view.Main'});
app/Application.js
Ext.define('MyApp.Application', {extend: 'Ext.app.Application',name: 'MyApp'});
app/view/Main.js
Ext.define('MyApp.view.Main', {extend: 'Ext.Container',layout:'center',style: 'background:#E6E6E6'});
浏览器中打开index.html，里面暂时没有任何东西，只有一个背景色
接下来我们在view中创建MyGrid.js文件。
MyGrid.js
Ext.define('MyApp.view.MyGrid', {extend: 'Ext.grid.Panel',xtype: 'my-grid',title: 'Grid Demo',columnLines: true,width:800,initComponent:function(){var me = this;me.columns = [{text: '姓名',flex: 1,align: 'center',dataIndex: 'name'}, {text: '性别',flex: 1,align: 'center',dataIndex: 'sex'}, {text: '邮箱',flex: 1,align: 'center',dataIndex: 'email'}]me.callParent();}});
同时在Main.js中引入MyGrid.js并使用
Ext.define('MyApp.view.Main', {extend: 'Ext.Container',requires: ['MyApp.view.MyGrid'],layout:'center',style: 'background:#E6E6E6',items:{xtype:'my-grid'}});
刷新浏览器页面，效果
接下来为grid添加数据
首先创建数据模型，model包中创建User.js
User.js
Ext.define('MyApp.model.User', {extend: 'Ext.data.Model',fields: [{name: 'name', type: 'string'},{name: 'sex', type: 'string'},{name: 'email', type: 'string'}]});
再创建数据仓库，store包中创建User.js
User.js
Ext.define('MyApp.store.User', {extend: 'Ext.data.Store',alias: 'store.user',//设置store别名model: 'MyApp.model.User',autoLoad: true,proxy: {type: 'ajax',url: 'data/users.json',reader: {type: 'json',rootProperty: 'users',successProperty: 'success'}}});<strong></strong>
然后在项目根目录下建立data包，用于存放json数据。由于我们这里没涉及到后台，所以用到的json数据不从后台读取，这里从我们的data包里面读取。data包下建立模拟数据。
于千万年之中，于千万人之中，在时间无涯的荒野中，
