`
llyzq
  • 浏览: 585572 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

6.8.3 使用Ext.grid.Panel显示远程数据

 
阅读更多

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所示页面。

分享到:
评论

相关推荐

    gradle-6.8.3-all.zip&gradle-6.8.3-bin.zip.zip

    在给定的文件信息中,我们有两个版本的Gradle 6.8.3:`gradle-6.8.3-all.zip` 和 `gradle-6.8.3-bin.zip`。这两个zip文件是Gradle的发行包,用于在本地系统上安装和使用Gradle。 1. **Gradle-6.8.3-all.zip**: 这个...

    gradle-6.8.3-all.zip

    gradle-6.8.3-all.zip

    npp_V6.8.3_Installer.1441522921.rar

    《关于Notepad++ 6.8.3安装程序的详细解析》 Notepad++是一款备受开发者喜爱的免费源代码编辑器,尤其在Windows操作系统中应用广泛。标题中的"npp_V6.8.3_Installer.1441522921.rar"指示的是Notepad++ 6.8.3版本的...

    gradle-6.8.3-all.zip 快速下载

    Gradle-6.8.3 该版本大大提高了Kotlin DSL构建脚本编译的性能,对Java工具链支持进行了一些改进,包括供应商选择,并使得直接从命令行执行复合构建中的任何任务变得容易。此版本还引入了新的依赖项管理API,以实现...

    CE6.8.3汉化版.rar

    然而,值得注意的是,虽然CE在合法范围内可以用于软件开发和逆向工程的学习,但使用它来修改在线游戏数据可能会违反游戏的用户协议,甚至可能导致账号被封禁。因此,合理和合法地使用CE是至关重要的。 总的来说,CE...

    elasticsearch-rest-high-level-client-6.8.3-API文档-中英对照版.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;...

    mysql-connector-net-6.8.3-noinstall.zip

    10. **故障排查**:如果在使用过程中遇到问题,如连接失败或数据操作异常,可以检查网络连接、数据库服务器状态、连接字符串是否正确,或者查看MySQL Connector/Net的错误日志以获取更多信息。 总结来说,MySQL ...

    Gradle-6.8.3最新版CSDN下载

    Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具。它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,目前也增加了基于Kotlin语言的kotlin-based DSL,抛弃了基于XML的各种繁琐配置。

    elasticsearch-6.8.3-API文档-中英对照版.zip

    赠送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文档...

    elasticsearch-6.8.3-API文档-中文版.zip

    赠送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文档...

    ExtJSWeb应用程序开发指南(第2版)

    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...

    elasticsearch-rest-client-6.8.3-API文档-中文版.zip

    赠送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...

    elasticsearch-rest-high-level-client-6.8.3-API文档-中文版.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;...

    elasticsearch-cli-6.8.3-API文档-中文版.zip

    赠送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; ...

    elasticsearch-core-6.8.3-API文档-中文版.zip

    赠送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;...

    最新版windows gradle-6.8-bin.zip

    《Windows环境下Gradle 6.8的安装与使用详解》 Gradle,作为一个强大的构建自动化工具,被广泛应用于Java、Android以及其他多种语言的项目中。本文将详细介绍如何在Windows操作系统上安装并使用最新版的Gradle 6.8...

    elasticsearch-rest-client-6.8.3-API文档-中英对照版.zip

    赠送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...

    parent-join-client-6.8.3-API文档-中文版.zip

    赠送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;...

    lang-mustache-client-6.8.3-API文档-中文版.zip

    赠送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-...

Global site tag (gtag.js) - Google Analytics