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();
}
分享到：
相关推荐
这篇"Ext框架的Grid使用介绍"将深入探讨Grid的使用方法和技巧。 Grid组件在EXT JS中扮演着数据表格的角色，可以展示多列数据，并且支持排序、分页、筛选、编辑等功能。它的灵活性在于能够根据需求定制各种复杂的...
EXT-JS Grid是EXT-JS库中的一个核心组件，它被广泛用于展示和操作大量数据。Grid提供了一种高效、可定制的表格视图，允许用户进行数据浏览、排序、筛选、分页以及编辑。EXT Designer是Sencha公司提供的一个可视化...
用于Ext开发Grid中遇到的所锁列的问题，这个很有帮助
在JavaServer Pages (JSP) 开发中，EXT 是一个流行的JavaScript 框架，它提供了丰富的用户界面组件，包括Grid（数据网格）和Table。EXT 提供了一种优雅的方式来展示和操作数据，尤其适用于创建交互式的Web应用程序，...
总结来说，"Ext Grid 导出Excel"这个话题涵盖了从JavaScript数据结构到Excel文件格式转换的过程，涉及到的主要技术有Ext JS的Grid和Store组件，以及第三方库SheetJS。这个过程对于那些需要提供数据导出功能的Web应用...
在Ext JS这个强大的JavaScript框架中，Grid Panel是用于展示数据的常用组件，它支持大量数据的分页和排序。在处理大数据集时，Grid往往会出现纵向滚动条，以方便用户浏览表格内容。当数据行数非常多时，用户可能希望...
在前端开发领域，特别是在使用Ext JS框架时，保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下，这一功能可以确保用户在数据刷新后仍然停留在之前查看的位置，提供更好的用户体验。 ####...
根据提供的文件信息，我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `...总之，在使用 Ext JS 构建复杂应用时，理解并掌握 Grid 组件的高级特性是非常重要的。
在EXT JS这个强大的JavaScript框架中，Grid组件是用于展示大量结构化数据的核心组件。"ext grid 显示数据"这一主题，是深入理解EXT JS开发的关键知识点之一，特别是在处理表格和列表展示时。在"LearningExtJS 第五...
EXT JS 3.2.1虽然已经是较旧的版本，但其核心概念和方法在后续版本中仍然适用，因此学习这部分内容对于理解EXT JS的Grid组件依然有价值。 1. **EXT JS Grid组件基础** - Grid组件是EXT JS中的一个核心组件，用于...
1. **EXT Grid**: EXT Grid是EXT JS中的核心组件之一，用于展示大量数据。它提供了丰富的特性，如排序、筛选、分页、编辑等。在这个例子中，Grid从数据库获取数据，这意味着后端可能使用了Ajax请求或者Store对象来与...
- **Ext JS 的架构**：了解 Ext JS 的整体架构有助于更好地掌握其使用方法。 - **样式定制**：可以通过自定义 CSS 来调整 Grid 的外观。 - **事件处理**：掌握如何为 Grid 添加事件监听器，例如点击行时触发的操作。...
文档"document"可能包含了EXT2.0 GRID的详细配置、使用方法、示例代码等，对于理解和使用EXT GRID组件至关重要。通过深入学习这个文档，你可以掌握EXT GRID的基本用法和高级特性，从而在项目中构建出功能强大的数据...
找了半天，结果在extjs的老家找到一个前辈写的代码，可以在grid上面加上合计， <br>但是却只能合计grid里面的数据，但是我们平常一般是只显示20行或者30行，这样的合计就没有什么意义，我们的合计数据是单独从...
综上所述，EXT Grid导出Excel涉及到的技术主要包括EXT Grid的数据操作、XLSX.js库的使用、自定义按钮和事件处理、文件下载触发机制以及可能的样式转换和性能优化。通过这些技术，我们可以实现EXT Grid数据的便捷导出...
Ext JS是一个强大的JavaScript框架，它提供了一系列高级UI组件，帮助开发者构建功能丰富的、交互性强的Web应用程序。 首先，让我们来了解一下Ext Grid。Grid是一种表格视图组件，用于显示大量结构化数据。它允许...
"Ext grid 导出Excel"是一个常见需求，它涉及到了JavaScript库Ext JS中的数据网格组件（Ext Grid）与Microsoft Excel文件格式的交互。下面我们将深入探讨这个主题。 首先，Ext JS是一个强大的JavaScript UI框架，它...
本篇文章将深入探讨两种流行的JavaScript表格组件——GT-Grid和EXT-Grid，并通过对比分析它们的特点、功能和使用场景，以帮助开发者选择最适合项目需求的组件。 GT-Grid与EXT-Grid都是用于构建高性能、可定制的表格...
EXT Grid是一款基于JavaScript的强大的数据网格组件，广泛用于Web应用程序中展示、操作和管理大量结构化数据。它提供了丰富的功能，如排序、过滤、分页、编辑等，并且支持自定义列、行以及多种交互模式。在EXT Grid...
在EXT JS这个强大的JavaScript框架中，EXT Grid是一个非常重要的组件，用于展示大量结构化数据，并提供了丰富的交互功能。本文将深入探讨"EXT Grid数据绑定"这一主题，包括数据查找和如何将查找结果重新填充到Grid中...