http://book.2cto.com/201303/17477.html
对于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所示页面。
相关推荐
npp_V6.8.3_Installer.1441522921.rar
解决官网下载慢的问题 gradle-6.8.3-all.zip gradle-6.8.3-bin.zip
gradle-6.8.3-all.zip
Gradle-6.8.3 该版本大大提高了Kotlin DSL构建脚本编译的性能，对Java工具链支持进行了一些改进，包括供应商选择，并使得直接从命令行执行复合构建中的任何任务变得容易。此版本还引入了新的依赖项管理API，以实现...
mysql-connector-net-6.8.3-noinstall.zip
赠送jar包：elasticsearch-rest-high-level-client-6.8.3.jar； 赠送原API文档：elasticsearch-rest-high-level-client-6.8.3-javadoc.jar； 赠送源代码：elasticsearch-rest-high-level-client-6.8.3-sources.jar；...
赠送jar包：elasticsearch-6.8.3.jar； 赠送原API文档：elasticsearch-6.8.3-javadoc.jar； 赠送源代码：elasticsearch-6.8.3-sources.jar； 赠送Maven依赖信息文件：elasticsearch-6.8.3.pom； 包含翻译后的API文档...
5.1.3 使用Ext.panel.Panel 5.2 标准布局类 5.2.1 Auto自动布局 5.2.2 Fit自适应布局 5.2.3 Accordion折叠布局 5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute绝对位置布局 5.2.7 CheckboxGroup...
一个很不错的内存修改器，内含教程，简单且很容易上手。
赠送jar包：elasticsearch-6.8.3.jar； 赠送原API文档：elasticsearch-6.8.3-javadoc.jar； 赠送源代码：elasticsearch-6.8.3-sources.jar； 赠送Maven依赖信息文件：elasticsearch-6.8.3.pom； 包含翻译后的API文档...
赠送jar包：elasticsearch-rest-client-6.8.3.jar； 赠送原API文档：elasticsearch-rest-client-6.8.3-javadoc.jar； 赠送源代码：elasticsearch-rest-client-6.8.3-sources.jar； 赠送Maven依赖信息文件：elastic...
赠送jar包：elasticsearch-rest-high-level-client-6.8.3.jar； 赠送原API文档：elasticsearch-rest-high-level-client-6.8.3-javadoc.jar； 赠送源代码：elasticsearch-rest-high-level-client-6.8.3-sources.jar；...
赠送jar包：elasticsearch-cli-6.8.3.jar； 赠送原API文档：elasticsearch-cli-6.8.3-javadoc.jar； 赠送源代码：elasticsearch-cli-6.8.3-sources.jar； 赠送Maven依赖信息文件：elasticsearch-cli-6.8.3.pom； ...
赠送jar包：elasticsearch-core-6.8.3.jar； 赠送原API文档：elasticsearch-core-6.8.3-javadoc.jar； 赠送源代码：elasticsearch-core-6.8.3-sources.jar； 赠送Maven依赖信息文件：elasticsearch-core-6.8.3.pom；...
赠送jar包：elasticsearch-rest-client-6.8.3.jar； 赠送原API文档：elasticsearch-rest-client-6.8.3-javadoc.jar； 赠送源代码：elasticsearch-rest-client-6.8.3-sources.jar； 赠送Maven依赖信息文件：elastic...
赠送jar包：parent-join-client-6.8.3.jar； 赠送原API文档：parent-join-client-6.8.3-javadoc.jar； 赠送源代码：parent-join-client-6.8.3-sources.jar； 赠送Maven依赖信息文件：parent-join-client-6.8.3.pom；...
赠送jar包：rank-eval-client-6.8.3.jar； 赠送原API文档：rank-eval-client-6.8.3-javadoc.jar； 赠送源代码：rank-eval-client-6.8.3-sources.jar； 赠送Maven依赖信息文件：rank-eval-client-6.8.3.pom； 包含...
赠送jar包：lang-mustache-client-6.8.3.jar； 赠送原API文档：lang-mustache-client-6.8.3-javadoc.jar； 赠送源代码：lang-mustache-client-6.8.3-sources.jar； 赠送Maven依赖信息文件：lang-mustache-client-...
赠送jar包：aggs-matrix-stats-client-6.8.3.jar； 赠送原API文档：aggs-matrix-stats-client-6.8.3-javadoc.jar； 赠送源代码：aggs-matrix-stats-client-6.8.3-sources.jar； 赠送Maven依赖信息文件：aggs-matrix-...