ExtJs4用Ext.data.ArrayStore的使用实例

最新推荐文章于 2021-06-12 17:59:18 发布

javaPie

最新推荐文章于 2021-06-12 17:59:18 发布

阅读量4.1k

点赞数

分类专栏： ExtJs

ExtJs 专栏收录该内容

246 篇文章

订阅专栏

本文详细介绍了如何在ExtJs4中使用Ext.data.ArrayStore装载本地数组数据，并通过创建Model和Store实例进行操作。展示了如何定义Model字段、创建数据数组以及将这些数据加载到Store中。此外，还提供了创建Grid组件并展示数据的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ExtJs4用Ext.data.ArrayStore的使用实例

2013-07-04 09:54:43 来源：评论：0 点击：3135

Ext.data.ArrayStore可以用来装载本地数组数据

 
         Ext.onReady(
         function
         (){
        
         var 
          list_reader1=
         "list_reader1"
         ;
        
         Ext.define(
         'list_reader1'
         ,{
        
         extend: 
         'Ext.data.Model'
         , 
        
         fields: [ 
        
         {name: 
         'id'
         },
        
         {name:
         'title'
         },
        
         {name:
         'description'
        
         }
        
         ]
        
         });
        
         var 
          dataArray = [[
         '1'
         , 
         "spring in Action"
         ,  
         '' 
          ]
        
         , [
         '2'
         , 
         "ajax高级实战"
         ,
         ''
         ]];
        
         var 
          store = Ext.create(
         "Ext.data.ArrayStore"
         , {
        
         model: list_reader1,
        
         data: dataArray 
        
         });
        
         store.load();
        
         // create the grid
        
         var 
          grid = Ext.create(
         'Ext.grid.Panel'
         , {
        
         store: store,
        
         columns: [
        
         {text: 
         "作者"
         , width: 120, dataIndex: 
         'id'
         , sortable: 
         true
         },
        
         {text: 
         "标题"
         , flex: 1, dataIndex: 
         'title'
         , sortable: 
         true
         },
        
         {text: 
         "描述"
         , width: 125, dataIndex: 
         'description'
         , sortable: 
         true
         } 
        
         ],
        
         forceFit: 
         true
         ,
        
         height:210,
        
         split: 
         true
         ,
        
         region: 
         'north'
        
         });
        
         Ext.create(
         'Ext.Panel'
         , {
        
         renderTo: 
         'binding-example'
         ,
        
         frame: 
         true
         ,
        
         title: 
         'grid示例'
         ,
        
         width: 580,
        
         height: 400,
        
         layout: 
         'border'
         ,
        
         items: [grid ]
        
         });
        
         });
        
         //当然我们也可以不适用model，而直接在store里面定以fields，如下所示
        
         var 
          store = 
         new 
          Ext.data.Store({
        
         fields: [
        
         { name: 
         "id"
         , type: 
         "int" 
          }, 
        
         {
        
         name: 
         'title'
         , type: 
         "string"
        
         }, {
        
         name: 
         'description'
        
         }],
        
         //这个是用来代替model，在这里定义了这个fields之后，
        
         //就会自动创建一个匿名的model来使用的
        
         data: dataArray,
        
         autoLoad: 
         true
        
         });