Ext Store用法

后台返回数据

一般在ExtStore的子类有ArrayStore, DirectStore, GroupingStore, JsonStore, XmlStore比较常用的有两种:SimpleStoreJsonStore

1.直接使用Store

var MyRecord = Ext.data.Record.create([

    {name : 'rjp.fuelPhotoId'},

    {name : 'dateString'},

    {name : 'enterName'}

    ]);

    var dataProxy = new Ext.data.HttpProxy(

            {

                url:'runlog/findAllPhoto.action'

            }

    );

    var theReader = new Ext.data.JsonReader({

        root : "list",

        totalProperty : "totalCount"

    }, MyRecord);

    var store = new Ext.data.Store({

        proxy : dataProxy,

        reader : theReader

    });

a.      每个store最少需要两个组件的支持,分别是proxyreaderproxy用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例。

b.      Store内部并不知道数据对象的格式 (它可能是一个Array, XML或者JSON) Store对象使用一个 DataReader 类的可配置实现从数据对象创建 Record 的实例。

c.      Store中的proxy配置项可以替换为url:如果没有指定 proxy,此url将会被用来隐含配置一个 HttpProxy

2.simpleStore的用法和Store相同

3.JsonStore的用法

 

由于Store内部定义为Json格式因此reader配置项不在需要

var queryStore = new Ext.data.JsonStore({

        url : 'runNew/getOperateTicketList.action',

        root : 'list',

        totalProperty : 'totalCount',

        fields : rungridlist //构造器,和上面的MyRecord相同

    });

后台返回的数据是以Json格式返回的:pg是一个对象包含listtotalCount

 

 

本地数据

store : new Ext.data.SimpleStore({

           fields : ['value', 'text'],

           data : [['','全部'],['0','未上报'],['1','采购员已申请']]

       }),

Store中插入一条数据

var storeSubShow = new Ext.data.JsonStore({

        fields : ['empId', 'chsName', 'stationId', 'stationName', 'ssDeptId', 'ssDeptName', 'jdDeptId', 'jdDeptName']

    })

    storeSubShow.insert(0, new Ext.data.Record({

        'empId' : '',

        'chsName' : '',

        'stationId' : '',

        'stationName' : '',

        'ssDeptId' : '',

        'ssDeptName' : '',

        'jdDeptId' : '',

        'jdDeptName' : ''

    }));

Ext JS 中,`Store` 是用于管理和操作数据的核心组件之一。它负责从各种数据源加载数据、对数据进行排序、过滤、更新,并支持与前端组件(如 Grid、ComboBox)绑定以实现动态交互功能。以下是其主要使用方法和功能: ### 数据定义与模型 Ext JS 的 `Store` 通常与一个 `Model` 相关联,用于定义数据结构。例如: ```javascript Ext.define('Person', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' } ] }); ``` 通过定义模型,可以确保 `Store` 能够正确解析和处理数据[^2]。 ### 数据代理(Proxy) `Store` 支持多种类型的代理来管理数据的加载和保存。常见的代理包括: - **MemoryProxy**:用于本地内存数据。 - **AjaxProxy**:用于通过 HTTP 请求从服务器获取数据。 - **JsonPProxy**:用于跨域请求。 例如,使用 `MemoryProxy` 加载静态数据: ```javascript var store = new Ext.data.Store({ model: 'Person', proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, PersonRecord) }); ``` ### 数据加载 可以通过调用 `load()` 方法触发数据加载。如果使用的是 `AjaxProxy`,则会向服务器发送请求并附加分页参数,如 `page`、`start` 和 `limit` [^3]。例如: ```javascript store.load({ params: { start: 0, limit: 10 } }); ``` ### 数据增删改 #### 添加数据 通过 `add()` 方法可以向 `Store` 中添加新的记录: ```javascript store.add({ name: 'John Doe', age: 30 }); ``` #### 删除数据 通过 `remove()` 方法可以从 `Store` 中删除指定记录: ```javascript var record = store.getAt(0); store.remove(record); ``` #### 更新数据 修改记录后,可以通过 `save()` 方法将更改提交到服务器: ```javascript record.set('age', 35); record.save(); ``` ### 数据排序与过滤 `Store` 提供了内置的排序和过滤功能: - **排序**:通过 `sort()` 方法对数据进行排序。 - **过滤**:通过 `filter()` 方法对数据进行过滤。 例如: ```javascript store.sort('name', 'ASC'); store.filter('age', 30); ``` ### 分页支持 结合 `PagingToolbar` 组件,可以轻松实现分页功能。当使用 `AjaxProxy` 时,`Store` 会自动附加分页参数到请求中,以便后端根据这些参数返回对应页的数据 [^3]。 ### 前端与后端交互 对于需要从后端获取数据的场景,`Store` 可以通过配置 `AjaxProxy` 或 `JsonPProxy` 来实现异步请求。后端接口需要根据 `page`、`start` 和 `limit` 参数返回相应数据 [^3]。 ### 示例代码 以下是一个完整的示例,展示了如何定义 `Store` 并与 `Grid` 结合使用: ```javascript Ext.onReady(function () { // 定义模型 Ext.define('Person', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' } ] }); // 创建 Store var store = Ext.create('Ext.data.Store', { model: 'Person', proxy: { type: 'ajax', url: '/api/persons', reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true }); // 创建 Grid Ext.create('Ext.grid.Panel', { title: 'Persons', store: store, columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Age', dataIndex: 'age' } ], height: 200, width: 400, renderTo: Ext.getBody() }); }); ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值