Ext JS框架入门指南

<%@ page language="ja va" import="ja va.util.*" pageEncoding="UTF-8"%> 

 
 
 

 

 
 
 

 

 

 
显示表格 

 
 



这个例子虽然简单，但已经包含了表格的基本骨架：定义列、放入窗口、使用 fit 布局让表格填满窗口。实际项目中，这种空表格意义不大，很快你会需要绑定真实数据。

2. 显示本地数据

接下来看看如何将内存中的二维数组绑定到表格。这里需要先定义一个数据模型（Model），然后将数组转换为 Store，最后让表格读取 Store 中的数据。




<%@ page language="ja va" import="ja va.util.*" pageEncoding="UTF-8"%> 

 
 
 

 

 
 
 

 

 

 
显示本地数据 

 
 



注意此处的几个关键点：一是列配置中的 xtype: 'rownumberer' 可以自动生成行号，省去手动编号的麻烦；二是 dataIndex 必须与 Model 的字段名一一对应，否则表格会显示空白。另外，Store 的 data 属性接受二维数组，但前提是 Model 定义的字段顺序与数组内部顺序一致，否则容易错位。一个更健壮的方式是使用对象数组，但这里用二维数组演示了最简洁的绑定方式。

3. 显示跨域 JSONP 数据

最后处理实际项目中最常见的远程数据加载——跨域 JSONP。ExtJS 4.1 内置了 Ext.data.proxy.JsonP，可以轻松获取其他域上的 JSON 数据。下面的示例从 Sencha 官方论坛拉取话题列表，并实现了分页功能。




<%@ page language="ja va" import="ja va.util.*" pageEncoding="UTF-8"%> 

 
 
 

 

 
 
 

 

 

 
显示跨域jsonp数据 

 
 



这段代码中分页功能是通过 bbar 配置的 pagingtoolbar 实现的，其中 displayInfo : true 会显示“第1-10条，共xx条”的提示信息。需要特别留意的是，JSONP 接口返回的数据结构必须与 Reader 中的 root 和 totalProperty 匹配——如果后端返回的字段名不同，表格就会延迟加载甚至报错。另外，autoLoad : true 让 Store 在实例化后立即发起请求，省去了手动调用的步骤。

从空表格到本地数据，再到跨域 JSONP，这三个示例覆盖了 ExtJS 4.1 表格开发的典型场景。理解透了这些基础写法，后面再接触复杂的数据绑定、自定义渲染、编辑模式等特性就会顺手很多。