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

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

你可能感兴趣的:(Panel)