js文件内容
Ext.onReady(function() {
var store = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : 'queryAllAction.action',//★连接控制器，执行查询获得数据源
method : 'GET'
}),
reader : new Ext.data.JsonReader( {
root : 'users',
id : 'id'
}, [ {
name : 'id',
mapping : 'id'
}, {
name : 'username',
mapping : 'username'
}, {
name : 'password',
mapping : 'password'
}, {
name : 'rid',
mapping : 'rid'
} ])
});
var column = new Ext.grid.ColumnModel( [ {
header : '用户编号',
dataIndex : 'id',
width : 150
}, {
header : '用户姓名',
dataIndex : 'username',
width : 150
}, {
header : '用户密码',
dataIndex : 'password',
width : 150
}, {
header : '用户角色',
dataIndex : 'rid',
width : 150
} ]);
column.defaultSortable = true;
var grid = new Ext.grid.GridPanel( {
el : 'usersDiv',//★指定数据的显示位置
width : 700,
height : 500,
title : '用户表',
store : store,//★放置表数据
cm : column,//★放置表头
trackMouseOver : false,
sm : new Ext.grid.RowSelectionModel()
});
grid.render();
store.load();
});
页面内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ShowUsers</title>
<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" src="js/showUsers.js"></script>
</head>
<body>
<div id="usersDiv" style="margin: 10px;"></div>
</body>
</html>
json.jsp 内容固定不可以有其他标记
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:property value="json" escape="false"/>
控制器内容
public class UsersAction implements Action {
private String json;
public String getJson() {
return json;
}
public void setJson(String json) {
this.json = json;
}
public String query(){
json=ui.query();
return SUCCESS;//跳转页面为json.jsp
}
}
业务层内容
public String query() {
List<Users> list= dao.queryAll();
Map<String,Object> map = new HashMap<String , Object>();
map.put("users", list);
return JSONObject.fromObject(map).toString();
}
分享到：
相关推荐
4. **创建Grid Panel**: 创建一个Ext.grid.Panel实例，将Store、Model和Column Model绑定到Grid Panel上。还可以配置其他选项，如分页、排序和过滤。 5. **加载数据**: 在页面加载时，Store会自动发送请求到Web服务...
### Ext2.0框架的Grid使用介绍 #### 一、Ext2.0框架概述 Ext2.0是一款基于JavaScript的库，它提供了大量的用户界面组件，使得开发人员能够轻松地构建出高度交互式的Web应用程序。相比其他框架如YUI等，Ext2.0拥有...
本文介绍了 Extjs Grid 组件的基本使用方法，包括如何定义 `ColumnModel`、如何创建 `Store` 以及如何处理不同格式的数据源。此外，还讨论了如何在 Grid 中添加 CheckBox 以增强交互性。通过掌握这些基本概念，您...
这通常通过 `Ext.Ajax.request` 实现，该方法接受一个配置对象，包括 `url`、`params`、`method`，以及回调函数。在 `success` 回调中，我们处理返回的 JSON 数据，并使用它来重新配置 `GridPanel`。 3. **解析 ...
- **Reader**: 用于解析数据源中的数据，将原始数据转换为可被Grid使用的格式。 #### 二、ColumnModel 和 Sortable 属性 `ColumnModel`是Grid中列模型的核心，用于定义每一列的属性，如标题、数据索引等。例如，...
最后，创建Grid Panel并指定Store和Column配置。例如： ```javascript Ext.create('Ext.grid.Panel', { title: '用户列表', store: store, columns: [ {header: 'ID', dataIndex: 'id', width: 50}, {header...
总的来说，EXTJS的GridPanel结合data store和reader，为开发人员提供了强大而灵活的数据展示工具，能够适应各种业务需求，实现丰富的数据交互和可视化效果。在实际项目中，可以根据具体的数据源和功能需求，灵活运用...
ExtJS 是一个强大的JavaScript框架，主要用于构建富客户端的Web应用程序，而Grid是ExtJS中的一个核心组件，用于展示数据表格。在本篇文章中，我们将深入探讨如何使用ExtJS与Gride进行交互，创建功能丰富的数据网格。...
在本文中，我们将深入探讨如何在ExtJS 4框架中实现Grid组件的修改和删除功能，同时结合Struts2和Hibernate技术，构建一个完整的CRUD（创建、读取、更新、删除）应用。ExtJS 4是一个强大的JavaScript UI库，提供了...
在这段代码中，首先创建了一个名为`resource`的`Store`实例，并指定了四个字段（`imgpath`, `typeImage`, `title`, `type`）。接下来定义了数据的来源URL以及如何解析服务器返回的数据。这里使用的是XML格式的数据，...
10.1.5 列标题的运行流程：ext.grid.column.column / 510 10.1.6 虚拟滚动条的工作原理：ext.grid.pagingscroller / 511 10.1.7 锁定列的运行流程：ext.grid.lockable与ext.grid.lockingview / 516 10.2 使用...
4. **排序**：使用`sortInfo`配置或监听`columnsort`事件实现列排序。 5. **编辑功能**：启用`GridPanel`的`enableColumnResize`, `enableColumnMove`, `enableHdMenu`等选项，提供单元格编辑。 6. **过滤和搜索**：...
在JS文件中，定义Grid的基本配置，包括列模型（column model）、数据源（store）和分页工具栏（paging toolbar）。列模型定义了每一列的数据类型和显示方式，数据源则负责存储和管理数据，分页工具栏则提供了翻页的...
"ExtGridDemo"是一个基于ExtJS 5.1版本的示例，展示了如何使用ExtJS来创建和操作数据网格，即Grid组件。 在ExtJS中，Grid是用于展示大量结构化数据的关键组件。它允许用户对数据进行排序、分页、筛选、编辑等多种...
1. 创建EXTJS Grid：定义列模型、Store和Column模型，配置分页参数。 ```javascript var store = Ext.create('Ext.data.Store', { storeId: 'myStore', model: 'MyModel', proxy: { type: 'ajax', url: 'struts...
- 在Ext TreeGrid中实现分页功能通常需要使用到两个Store：一个是用于处理树形数据的`TreeStore`，另一个则是用于处理分页逻辑的普通`JsonStore`。 3. **自定义序号**： - 为了确保在分页的情况下，每一页的序号...
3. **日期列**: 可以通过设置`renderer`函数来格式化日期，例如使用`Ext.util.Format.dateRenderer`方法。 4. **数字列**: 对于`number`类型的数据，可以设定精度或者货币格式。 5. **操作列**: 可以创建包含按钮或...
- **分页**: 使用`pagingToolbar`插件实现分页功能，设置`pageSize`和`proxy`的`reader`配置。 - **排序与过滤**: `sortable`属性允许列排序，而`filter`配置则用于添加过滤器。 - **行编辑**: 使用`RowEditor`插件...
例如，使用`Ext.toolbar.Paging`添加分页工具栏，通过`Ext.grid.filters.Filter`实现行过滤，或者通过`column.renderer`定义自定义单元格样式和内容。这些功能进一步增强了表格的实用性。 总的来说，"Ext JS的table...
每个列对应一个`Ext.grid.column.Column`对象，包含字段名、标题、宽度等属性： ```javascript columns: [{ xtype: 'treecolumn', // 特殊的列类型，用于显示树结构 text: '文件名', width: 200, dataIndex: ...