看代码就会明白的，test.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>动态生成表格</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="js/extjs-4.1.0/resources/css/ext-all.css">
<script type="text/javascript" src="js/extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript" src="js/extjs-4.1.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//创建表格,可以加入更多的属性。
Ext.create("Ext.grid.Panel",{
title:'动态表格~~~~~~~~~~~',
width:400,
height:300,
id : 'configGrid',
name : 'configGrid',
columns : [], //注意此行代码，至关重要
displayInfo : true,
emptyMsg : "没有数据显示",
renderTo:'grid',//渲染到页面
forceFit: true
});
//通过ajax获取表头已经表格数据
Ext.Ajax.request({
url: 'js/calmm/data.json', //从json文件中读取数据，也可以从其他地方获取数据
method : 'POST',
success : function(response) {
//将返回的结果转换为json对象，注意extjs4中decode函数已经变成了：Ext.JSON.decode
var json = Ext.JSON.decode(response.responseText); //获得后台传递json
//创建store
var store = Ext.create('Ext.data.Store', {
fields : json.fields,//把json的fields赋给fields
data : json.data //把json的data赋给data
});
//根据store和column构造表格
Ext.getCmp("configGrid").reconfigure(store, json.columns);
//重新渲染表格
Ext.getCmp("configGrid").render();
}
});
})
</script>
</head>
<body>
<!-- 将表格渲染在此处 -->
<div id="grid"></div>
</body>
</html>
数据文件，data.json:
{
'fields': [
{'name': 'id', 'type': 'int'},
{'name': 'name', 'type': 'string'},
{'name': 'sex', 'type': 'string'},
{'name': 'add', 'type': 'string'}
],
'data': [
{'id': '1', 'name': 'AAA', 'sex': '男','add':'SSS'},
{'id': '2', 'name': 'BBB', 'sex': '男','add':'SSS'},
{'id': '3', 'name': 'CCC', 'sex': '男','add':'SSS'},
{'id': '4', 'name': 'DDD', 'sex': '女','add':'是'},
{'id': '5', 'name': 'EEE', 'sex': '男','add':'撒的发生'}
],
'columns': [
{'header': '编号', 'dataIndex': 'id'},
{'header': '姓名', 'dataIndex': 'name'},
{'header': '性别', 'dataIndex': 'sex'},
{'header': '地址', 'dataIndex': 'add'}
]
}
运行效果：
![]()
![]()
![]()
分享到：
相关推荐
通过这个离线版API，开发者可以学习ExtJS 4.1的组件系统，包括Grids（表格）、Forms（表单）、Panels（面板）、Windows（窗口）以及许多其他UI元素。此外，他们还可以了解到数据绑定、模型（Models）、存储（Stores...
- 统计图表：Extjs的Charts模块可以生成各种动态图表，如柱状图、饼图、线图等，方便数据可视化。 - 表单：FormPanel组件用于创建交互式的表单，可以包含各种输入控件，如文本框、选择框、日期选择器等。 5. **...
在JasperReport+SSH框架中，ExtJS可以用来创建交互式的用户界面，比如表格、图表和其他复杂的前端组件，提升用户体验。 结合这些组件，开发者可以构建出高效、可维护的企业级应用。例如，Struts处理HTTP请求，...
在标题中提到的"ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)"，这是一个为ExtJS的Grid组件提供的插件，允许用户将Grid中的数据导出到Excel格式，方便数据分析和存储。这种功能对于那些需要处理大量表格数据的...
至于ExtJS，它是一个强大的JavaScript UI框架，提供了一系列丰富的组件，如表格、树形视图、图表等，用于构建复杂的Web界面。它的组件化设计使得开发者可以轻松构建出具有高度交互性和视觉吸引力的应用程序。 在...
**4.1 Extjs 是脚本的世界** - **概念**: Extjs 支持将 HTML 页面与 JavaScript 脚本完全分离。 - **优势**: 提高代码可维护性和重用性。 **4.2 Ext.onReady 事件** - **作用**: 当 DOM 加载完成后执行回调函数。...
3. **创建组件**: 使用 ExtJS 提供的 API 创建 UI 组件，如面板、表格等。 4. **绑定数据**: 通过数据存储（Store）将数据绑定到组件。 5. **渲染**: 设置组件的渲染位置并显示。 #### 二、ExtJS 的 Heart—Ext....
8.3. DomHelper和Template动态生成html 8.3.1. DomHelper用来生成小片段 8.3.2. 批量生成还是需要Template模板 9. 沉寂吧！我们要自己的控件。 9.1. 下拉树形选择框TreeField 9.2. 带全选的checkbox树形...
5. **装饰模式**：动态地给一个对象添加一些额外的职责，就增加功能而言，装饰模式相比生成子类更加灵活。 6. **中介者模式**：定义一个中介对象来封装一系列的对象交互，同事之间不再相互引用，使其耦合松散，而且...
4.1 ext js框架的命名空间：ext / 90 4.1.1 概述 / 90 4.1.2 apply和applyif方法 / 90 4.1.3 不推荐的extend方法 / 92 4.1.4 数据及其类型检测 / 95 4.1.5 其他的基础方法 / 99 4.2 为框架顺利运行提供支持 /...
8.3. DomHelper和Template动态生成html 8.3.1. DomHelper用来生成小片段 8.3.2. 批量生成还是需要Template模板 8.4. Ext.data命名空间 8.4.1. proxy系列 8.4.1.1. 人畜无害的MemoryProxy 8.4.1.2. 常规武器HttpProxy...
4.1. 不用ext的form啊，不怕错过有趣的东西吗？ 4.2. 慢慢来，先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒，从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. ...
- 支持创建丰富的用户界面(UI)组件，如表格、树形菜单等。 ### 第2章 系统概要设计 #### 2.1开发环境以及应用平台 - 开发环境需考虑硬件配置、操作系统等因素。 - 应用平台需要支持多终端访问，如PC、移动设备等...