关闭

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

2811人阅读 评论(0) 收藏 举报
分类:

使用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版)》

李刚 编著

电子工业出版社出版

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

extjs gridpanel 单元格内容全部显示

如果grid panel 中单元格数据g
  • zebing007
  • zebing007
  • 2014-08-18 18:35
  • 2042

Extjs4 GridPanel 加载从数据库读取图片(双击图片放大)

Extjs4 GridPanel 加载从数据库读取图片(双击图片放大),学习Extjs4框架知识,一点学习积累 每天进步一点点-----
  • zhizhuomsj
  • zhizhuomsj
  • 2016-05-23 17:33
  • 2121

表格数据分组:Ext.grid.GroupingView

表格数据分组:Ext.grid.GroupingView 博客分类:  ExtJS_3.0 EXT  1、Ext.grid.GroupingView       主要配置...
  • evilcry2012
  • evilcry2012
  • 2016-01-25 15:28
  • 1275

关于Ext.grid.Panel显示远程数据无法加载问题的解决

该问题其实是JSON数据的应用
  • u013532827
  • u013532827
  • 2014-04-13 17:13
  • 652

Ext.grid.Panel远程加载数据分页,提供添加删除修改等操作

Ext.grid.Panel远程加载NorthWind中Customers数据,并提供分页、添加、删除、修改和查看操作,界面如下图: Ext.grid.Panel Ajax加载数据 添加界面 修改...
  • shuyizhi
  • shuyizhi
  • 2015-03-20 09:38
  • 2027

Extjs4.1向Ext.grid.Panel创建的gridpanel中动态在第一行插入数据

一、配置Ext和导包 Ext.Loader.setConfig({     enabled: true }); Ext.Loader.setPath('Ext.ux', 'ext-4.1.0-...
  • e_wsq
  • e_wsq
  • 2012-04-18 09:23
  • 2874

使用Ext.grid.Panel生成表格

使用Ext.grid.Panel生成表格 Ext.grid.Panel继承了Ext.panel.Panel,因此它的很多地方都类似于Ext.panel.Panel,但定义Ext.grid.Panel...
  • broadview2006
  • broadview2006
  • 2013-02-25 07:28
  • 2620

EXT数据展示(Ext.grid.Panel)

在网上看到好多关于EXT的例子,但大多数都是用的EXT代理ajax请求的方式,我这里写的是把EXT与ajax拆开的。下面为EXT代码:var dataSource = ''; var myStore ...
  • leipeng321123
  • leipeng321123
  • 2015-08-20 17:43
  • 554

Ext.grid.Panel 数据动态改变后刷新grid

转自:http://www.cnblogs.com/webRongS/p/5759917.html gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数...
  • Dorothy1224
  • Dorothy1224
  • 2016-12-01 11:25
  • 3610

使用Dynamic LINQ实现Ext Grid的远程排序

  • 2009-04-15 17:22
  • 2.03MB
  • 下载
    个人资料
    • 访问:3849276次
    • 积分:55748
    • 等级:
    • 排名:第58名
    • 原创:1456篇
    • 转载:83篇
    • 译文:1篇
    • 评论:3784条
    博客专栏
    文章存档
    最新评论