`
llyzq
  • 浏览: 576517 次
  • 性别: 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所示页面。

分享到:
评论

相关推荐

    UPS、蓄电池、空开、电缆配置计算方法.pptx

    5G通信行业、网络优化、通信工程建设资料

    node-v7.4.0.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    Unity mesh减面工具 Mesh Simplify 1.12

    Unity mesh减面工具 Mesh Simplify 1.12

    基于Springboot+Vue酒店客房入住管理系统-毕业源码案例设计.zip

    网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    JAVA扫雷游戏程序+源码

    扫雷游戏是一款经典的计算机游戏,它的目标是在一个方格矩阵中找出所有隐藏的地雷。玩家需要通过点击方格来揭示其内容,如果方格中有地雷,则游戏结束;如果没有地雷,则会显示周围8个方格中地雷的数量。玩家需要根据这些信息来判断哪些方格是安全的,并继续点击其他方格。 在JAVA扫雷游戏程序中,我们使用了一个二维数组来表示游戏的方格矩阵。每个方格可以包含以下三种状态之一:未被揭示、有地雷或安全。我们还使用了一些辅助变量来跟踪游戏中的状态,例如已揭示的方格数量和剩余的地雷数量。 当玩家点击一个方格时,程序会检查该方格是否已经被揭示。如果是,则不做任何操作;否则,程序会揭示该方格的内容,并根据其是否包含地雷来更新游戏状态。如果方格中有地雷,则游戏结束;否则,程序会递归地揭示周围的方格,直到遇到已经揭示的方格为止。 为了提高游戏的可玩性,我们可以添加一些额外的功能,例如计时器、难度级别选择和自定义方格大小等。此外,我们还可以使用图形用户界面(GUI)来美化游戏界面,使其更加友好和易于操作。

    python-3.8.19-amd64-full.exe

    仅供个人娱乐使用,不要乱用造成侵权,搬运自git删hub.co除m/ad中ang1345/Pyt文honW部ind分ows

    网络安全网络安全视频教程56讲全在线地址.txt

    【网络安全】网络安全视频教程56讲全在线地址.txt

    299-企业数字化转型方案20220804.pptx

    299-企业数字化转型方案20220804.pptx

    参考资料-人工智能对劳动力市场的影响机制研究.pdf

    参考资料-人工智能对劳动力市场的影响机制研究.pdf

    3D Facial Expressions

    3D Facial Expressions through Analysis-by-Neural-Synthesis

    AI设计工具-美图设计室:一键生成海报宣传画.txt

    AI设计工具-美图设计室:一键生成海报宣传画

    node-v10.12.0-linux-armv6l.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    基于Springboot+Vue的商业辅助决策系统的设计与实现-毕业源码案例设计.zip

    网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    5MHz 函数发生器使用说明书

    5MHz 函数发生器使用说明书

    大学生就业平台微信小程序+ssm后端毕业源码案例设计.zip

    网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    通信驻地网施工组织方案.doc

    5G通信、网络优化与通信建设

    管道顶管工程施工技术.doc

    5G通信、网络优化与通信建设

    Unity 穿墙挖洞-CSG

    Unity 穿墙挖洞——CSG

    基于Python的医院挂号系统带vue前后端分离毕业源码案例设计.zip

    网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    199-实时数据仓库建设体系.pdf

    199-实时数据仓库建设体系.pdf

Global site tag (gtag.js) - Google Analytics