网站seo综合诊断,网站建设的培训,移动网站开发百度百科,网站 建设在作用使用Ext.grid.Panel显示远程数据 对于Ext.grid.Panel而言#xff0c;它只是负责显示Store数组中心的数据#xff0c;至于Store保存的数据到底是浏览器本地数据#xff0c;还是远程服务器的数据#xff0c;Ext.grid.Panel并不关心。因此#xff0c;使用Ext.grid.Panel显示远… 使用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 typetext/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版》 李刚 编著 电子工业出版社出版 转载于:https://blog.51cto.com/bvbroadview/1139443
