// 首先创建一个Ext.data.JsonReader用于解析数据
// 假设数据为:{"message":"0","totalCount":"2","books":[{"id":"001","name":"语文","useless":"不需要用到的信息"},
// {"id":"002","name":"数学","useless":"不需要你"}]}
// 下面是Reader的代码
var bookReader = new Ext.data.JsonReader({
totalProperty : "totalCount", // 数据记录总数,分页需要
root : "books" // 数据记录数组节点
},
// 每条记录的具体解析方式,id映射(mapping)数据中的id,name映射数据中的name
[{
name : 'id',
mapping : 'id'
}, {
name : 'name',
mapping : 'name'
}])
// 然后创建Ext.data.Store,这个是GridPanel的数据提供者
var store = new Ext.data.Store({
// listBook.do是一个http请求,此请求返回前面假设的数据
url : 'listBook.do',
reader : bookReader
});
// 如果有需要可以自动加载数据
// store.load();
// 接着创建GridPanel的选择模式和列模式(展现的列)
// 选择模式
var sm = new Ext.grid.CheckboxSelectionModel();
// 列模式
var cm = new Ext.grid.ColumnModel(
[
// 自动序号
new Ext.grid.RowNumberer(),
sm,
{
// 列名ID,数据对应store的id
header : "ID",
dataIndex : "id",
width : 120,
// 是否自动隐藏,这里的隐藏的列用户可以手动控制是否显示
//hidden : true
}, {
// 书名,数据对应store的name
header : "书名",
dataIndex : 'name',
width : 80
}]);
// 最后就是创建Ext.grid.GridPanel了
var bookGrid = new Ext.grid.GridPanel({
// 定义Grid在页面中的唯一标识,这样可以随时通过Ext.getCmp("book_gird")来获得此gird
id : "book_grid",
// 设定grid带有行边框
stripeRows : true,
// 前面定义的store
store : store,
// 前面定义列模式
cm : cm,
// tbar : {} 表标头选项
// 表底部加入一个分页查询bar
bbar : new Ext.PagingToolbar({
id : 'bookGrid-paging-toolbar',
pageSize : 25, // 一页显示25行
store : store, // 前面定义的store
displayInfo : true, // 是否显示总体信息
displayMsg : "第 {0} - {1} 条 共 {2} 条",
emptyMsg : "没有符合条件的记录"
}),
sm : sm,
width : 1075,
height : 800,
frame : true,
title : "书本列表",
//iconCls : 'book'
});
说明: PagingToolbar在做翻页操作时会自动提交start和limit两个参数,我们只需在后台用
request.getParameter("start")和request.getParameter("limit")获取出来并传入sql查询就行了
|
相关推荐
在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...
Ext grid panel 是Ext JS框架中的一个组件,用于展示表格形式的数据。它提供了丰富的功能,如分页、排序、筛选等,并且可以通过配置实现自定义样式和交互行为。对于实时数据的展示,保持滚动条位置不变是一个关键...
ExtJS的PagingStore是其框架中用于实现前端分页功能的重要组件,主要适用于处理大量数据的场景,以提高网页性能并提供良好的用户体验。在ExtJS 3.x版本中,PagingStore是与GridPanel结合使用,使得用户可以逐页加载...
Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍如何在 Ext GridPanel 中实现加链接操作,包括基本原理、代码实现及注意事项。 #### 一、Ext GridPanel 基础 在了解如何添加链接之前...
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
EXT GridPanel是EXT JS库中的一个核心组件,用于创建数据密集型的表格视图。它在Web应用程序中常用于展示大量结构化数据,并提供多种交互功能,如排序、分页、筛选和编辑等。在EXT GridPanel中,获取某一单元格的值...
在本文中,我们将深入探讨如何扩展ExtJS的GridPanel组件,以实现带有分页和选中状态的功能。ExtJS是一个强大的JavaScript库,用于构建富客户端应用程序,而GridPanel是其核心组件之一,用于展示和操作表格数据。通过...
在本例中,我们使用ExtJS 4.2创建了一个简单的表格控件,并使用Ext.PagingToolbar实现了分页功能。首先,我们创建了一个表格控件grid,并将其渲染到页面上,然后定义了分页工具条bbar。bbar使用Ext.PagingToolbar...
GridPanel是EXTJS中的一个核心组件,它允许开发者以网格形式展示数据,支持多种功能,如排序、分页、筛选、编辑等。在EXTJS中,GridPanel通常与Store结合使用,Store负责管理数据,而GridPanel则负责显示这些数据。 ...
GridPanel是ExtJs中的核心组件之一,它提供了丰富的功能来展示和操作表格数据。你可以通过配置列、排序、过滤、分页等功能来定制你的表格。GridPanel通常与Store配合使用,Store负责管理数据,而GridPanel负责展示...
通过以上步骤,我们成功地创建了一个基本的`Ext.grid.Panel`,并且了解了如何定义模型、创建存储以及配置GridPanel。此外,我们也简单介绍了GridPanel的一些高级特性。这些功能使得`Ext.grid.Panel`成为了一个非常...
var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, displayMsg: '显示 {0} - {1} 行 总数 {2} 行', emptyMsg : '没有数据显示' }) }); store...
本例详细展示了如何使用 ExtJS 创建一个具有数据存储、分页、删除等功能的表格组件。通过对数据模型、列模型、表格配置及数据操作的深入理解,可以更好地利用 ExtJS 的强大功能开发出高效的 Web 应用程序。希望本...
ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...
本文将详细解析Ext_Js中的分页显示原理,并通过一个具体的案例来展示其实现过程。 #### 二、Ext_Js分页显示原理 分页显示的核心在于如何有效地处理和展示大量数据。在Ext_Js中,主要依赖于`Ext.data.Store`对象来...
总的来说,EXTJS 2.02 GridPanel是一个功能丰富的表格组件,适用于构建交互性强、数据展示复杂的Web应用。对于开发者而言,掌握EXTJS GridPanel的使用,不仅可以提高开发效率,还能为用户提供优秀的用户体验。
- **功能描述**:Trigger Field 是一个带有触发器按钮的文本框。 - **主要用途**:适用于需要在文本框旁边添加一个按钮以触发某个动作的场景。 通过以上介绍可以看出,ExtJS 提供了丰富的 UI 组件库,涵盖了从基础...
除了GridPanel,ExtJS还提供了许多其他组件,如FormPanel(用于创建表单)、TreePanel(用于展示树形数据结构)、Viewport(全屏布局容器)等,它们共同构成了一个强大的Web开发工具箱。 在源码层面,ExtJS使用了...
在现代Web应用程序开发中,特别是基于ExtJS框架的应用程序中,`GridPanel`是处理表格数据展示的一个非常重要的组件。它不仅可以帮助开发者轻松地展示数据,还提供了丰富的交互功能,如排序、分页等。本文将通过一个...
在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...