使用Ext.grid.Panel显示远程数据
对于Ext.grid.Panel而言，它只是负责显示Store数组中心的数据，至于Store保存的数据到底是浏览器本地数据，还是远程服务器的数据，Ext.grid.Panel并不关心。因此，使用Ext.grid.Panel显示远程数据也非常简单，只要在配置Ext.data.Store时通过proxy选项指定加载远程服务器数据即可。
如下示例示范了使用Ext.data.Store来加载远程服务器数据，使用Ext.grid.Panel显示Store所加载的远程数据。
程序清单：codes\06\6.8\Ext.grid\Ext.grid.Panel_remote.html
<body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'id' , type: 'int'},
{name: 'name', type: 'string'},
{name: 'author', type: 'string'},
{name: 'price', type: 'float'},
]
});
// 创建一个Ext.data.Store对象
var bookStore = Ext.create('Ext.data.Store',
{
// 指定使用Book Model管理记录
model: 'Book',
// 使用proxy指定加载远程数据
proxy:
{
type: 'ajax',
url: 'getAllBooks',// 向该URL发送Ajax请求
reader: { // 使用Ext.data.reader.Json读取服务器数据
type: 'json',
root: 'data' // 直接读取服务器响应的data数据
},
},
autoLoad:true// 自动加载服务器数据
});
Ext.create('Ext.grid.Panel', {
title: '查看服务器端图书',
width: 550, // 指定表单宽度
renderTo: Ext.getBody(),
// 定义该表格包含的所有数据列
columns: [
{ text: '图书ID', dataIndex: 'name' , flex: 1 }, // 第1个数据列
{ text: '书名', dataIndex: 'name' , flex: 1 }, // 第2个数据列
{ text: '作者', dataIndex: 'author', flex: 1 }, // 第3个数据列
{ text: '价格', dataIndex: 'price' , flex: 1 }, // 第4个数据列
],
store: bookStore
});
});
</script>
</body>
上面示例中的粗体字代码中通过proxy选项指定从getAllBooks处加载数据，该Servlet就是前面介绍Ext.form.field.ComboBox示例时使用的Servlet，此处不再给出代码。该Servlet将会返回系统中所有图书记录，该图书记录将会由Store负责管理。
在浏览器中浏览该页面，可以看到如图6.74所示页面。
图6.74 显示远程数据
本文节选自
《疯狂Ajax讲义（第3版）》
李刚 编著
电子工业出版社出版
相关推荐
5. **数据绑定**：介绍如何使用Store、Model和Proxy进行数据管理与远程数据交互。 **Ext.js 中文教程**： 教程是学习新工具的最佳途径，中文教程为初学者提供了友好的学习资源。可能包含以下章节： 1. **入门**：...
EXT Grid通常使用Store对象来处理数据模型，Store可以连接到各种数据源，如JSON、XML或者远程API，通过Ajax请求加载数据。 1. 数据绑定（Data Binding）： 数据绑定是EXT Grid的核心特性之一，它允许Grid与数据源...
它提供了大量的组件和功能，包括网格（Grid）这种常用的数据显示控件。这篇博客文章 "ExtJS 使用grid显示数据" 可能详细阐述了如何利用ExtJS的Grid面板来展示和操作数据。 在ExtJS中，Grid Panel是一种数据驱动的...
- **Local Filtering**：默认情况下，ExtJS Grid使用本地过滤，即在客户端对数据进行筛选，无需服务器交互。 - **实时更新**：当用户更改过滤条件时，Grid会即时更新视图，只显示匹配的数据行。 - **性能考虑**：...
Ex4.0共2个压缩包特性，《ext js权威指南》 ...10.3.4 数据汇总功能：ext.grid.featrue.abstractsummary与ext.grid.featrue. summary / 539 10.3.5 分组功能：ext.grid.featrue.grouping / 543 10.3.6 分组汇总...
在"增删改查"实例中，我们将利用`Ext.grid.Panel`的配置项和事件来实现对表格数据的操作。 1. **创建表格（Create）** 创建数据通常涉及到在表格中添加新行。在Ext JS中，我们可以使用`store`对象的`add()`方法来...
在Ext_Js中，主要依赖于`Ext.data.Store`对象来管理数据，以及`Ext.grid.Panel`或`Ext.dataview.DataView`等控件来展示这些数据。分页可以通过`Ext.PagingToolbar`组件实现。 1. **Store对象**：Store是Ext_Js中用...
3. **表格（Grid）**：深入理解Ext Grid Panel的使用，包括列定义、分页、排序、过滤和自定义编辑功能，以及如何处理大规模数据。 4. **表单（Form）**：掌握如何创建和使用各种表单元素，如文本字段、选择框、日期...
var grid = Ext.create('Ext.grid.Panel', { title: '论坛帖子列表', store: store, // 绑定数据存储 columns: [ // 定义列配置 { text: '设备编号', dataIndex: 'deviceno', flex: 1 }, { text: '标题', ...
在本文中，我们将关注EXT 4.0中的Array Grid，这是一种基础的表格展示组件，适合用来显示和操作二维数组数据。 Array Grid的核心是`Ext.grid.Panel`，它是EXT JS中的一个核心组件，用于呈现数据表格。`Ext.grid....
表格数据展示是ExtJS中的另一大亮点，`Ext.grid.Panel`是其核心组件，用于呈现大量结构化数据。在ExtJS4.2中，我们可以通过以下步骤实现表格数据的动态展示： 1. 创建`Ext.data.Store`实例，定义数据模型和数据源，...
- **自定义列渲染**：使用`renderer`函数对数据显示进行格式化。 - **工具栏**：可以添加自定义工具栏来增加功能，如搜索框、按钮等。 4. **示例代码详解** 在压缩包的“示例代码”中，可能包含了以上提到的各种...
6.3.4 在form中使用Ext.Direct加载数据 185 6.3.5 在form中使用Ext.Direct提交数据 187 6.3.6 使用polling方式进行轮询 189 6.4 本章小结 191 第7章 Store 192 7.1 Store的结构 192 7.2 Ext.data.Field 197 7.3 Ext....
2. **分页（Paging）**：使用`Ext.grid.Panel`的`pagingToolbar`配置项启用分页。分页栏包含了页码导航，每页记录数选择等控件。默认情况下，刷新会回到第一页。 3. **保持当前页面**：如果你希望刷新时保持在当前...
它提供了一套完整的组件库，其中`Ext.Grid`是核心组件之一，用于创建数据网格，展示大量结构化数据并支持丰富的交互功能。本篇文章将深入探讨基于ExtJS 5.1的列表封装，以及与之相关的`zGrid.js`和`TaskList.js`两个...
EXT JS中的表格分页通常通过Grid Panel组件实现，该组件可以与数据存储（Store）配合，数据存储负责管理数据，包括加载、过滤、排序和分页。分页功能由Pager Toolbar组件提供，它是一个可自定义的工具栏，包含导航...
对于数据的操作，我们可以使用数据存储的API来实现。例如，增加新记录： ```javascript gridStore.add({ name: '新记录', email: '', phone: '' }); ``` 删除记录： ```javascript gridStore.remove(record); ```...
Ext.grid.Panel是数据展示的网格组件，而Ext.data.Store则负责管理数据，包括加载、缓存和分页功能。 1. **EXTJS分页组件**： - **Ext.toolbar.Paging**：这是EXTJS中的分页工具栏，它提供上一页、下一页、跳转到...
首先，Ext的可编辑表格通常指的是`Ext.grid.Panel`或`Ext.grid.Viewport`，它们提供了一种交互式的表格展示和编辑数据的方式。在这些表格中，我们可以配置各列的编辑器，使得用户可以直接在单元格内进行输入或选择...