ExtAngular 7.5.0

显示私有类

ExtAngular 数据包

ExtAngular 中许多处理大量数据的组件（如网格和图表）都使用 ExtAngular 数据包中的类来加载、排序、过滤和准备数据以进行显示。本指南解释了使用 ExtAngular 数据包的基础知识。

`Ext.data.Store`

Ext.data.Store 类用于将数据加载到网格、树、列表、图表、D3 可视化等中。此示例显示了 Ext.data.Store 与 Grid 的典型用法

import { Component } from '@angular/core';
declare var Ext: any;

@Component({
    selector: 'app-root-1',
    styles: [``],
    template: `
    <grid title="Users" [store]="this.store" fitToParent="true">
        <column text="Name" dataIndex="name"></column>
        <column text="Email" dataIndex="email"></column>
    </grid>
    `
})
export class ExampleComponent {
    store = Ext.create('Ext.data.Store', {
        fields: ['name', 'email'],
        data: [
          { name: 'Tim Smith', email: '[email protected]' },
          { name: 'Jill Lindsey', email: '[email protected]' }
        ]
      });
}

存储可以配置 fields 数组或 model。上面的示例通过 data 配置使用内联数据。在大多数实际应用程序中，您将使用 proxy 配置您的存储以从服务器获取数据。

`Ext.data.Proxy`

存储可以通过设置 proxy 配置从服务器获取数据，该配置采用 Ext.data.proxy.Proxy 子类的配置选项。我们可以修改之前的示例中的存储，以使用 Ext.data.proxy.Ajax 从 users.json 获取数据

store = Ext.create('Ext.data.Store', {
  fields: ['name', 'email'],
  autoLoad: true,
  proxy: {
    type: 'ajax', // refers to the alias "proxy.ajax" on Ext.data.proxy.Ajax
    url: 'users.json'
  }
})

在这里，我们将 autoLoad 配置设置为 true，以便在创建存储后立即获取数据。我们也可以设置 autoLoad: false，稍后通过调用来获取数据

this.store.load();

排序

您可以通过指定 sorters 配置来对存储中的数据进行排序

store = Ext.create('Ext.data.Store', {
  fields: ['name', 'email'],
  autoLoad: true,
  proxy: {
    type: 'ajax', // refers to the alias "proxy.ajax" on Ext.data.proxy.Ajax
    url: 'users.json'
  },
  sorters: [{
    property: 'email',
    direction: 'ASC'
  }]
})

或通过调用 sort 方法

this.store.sort([{
  property: 'email',
  direction: 'ASC'
}])

默认情况下，排序在客户端完成。您可以通过在存储上设置 remoteSort: true 来配置服务器端排序。当 remoteSort 设置为 true 时，代理将随每个请求一起发送 sorters 配置作为参数。例如

users.json?sort=[{"property":"email","direction":"ASC"}]

过滤

您可以通过指定 filters 配置来过滤存储中的数据

store = Ext.create('Ext.data.Store', {
  fields: ['name', 'email'],
  autoLoad: true,
  proxy: {
    type: 'ajax', // refers to the alias "proxy.ajax" on Ext.data.proxy.Ajax
    url: 'users.json'
  },
  filters: [{
    property: 'email',
    value: /@sencha.com$/
  }]
})

或使用自定义过滤器函数

filters: [{
  filterFn: record => record.get('email').match(/@sencha.com$/i)
}]

我们还可以通过调用 filterBy 方法来过滤存储中的数据

this.store.filterBy(record => record.get('email').match(/@sencha.com$/i));

我们可以通过调用来删除任何现有过滤器

this.store.clearFilters();

与排序一样，默认情况下，过滤在客户端完成。我们可以设置 remoteFilter: true 以在服务器上过滤。当 remoteFilter 设置为 true 时，filters 配置将作为参数随每个请求一起发送。例如

users.json?filter=[{"property":"email","value":"@sencha.com"}]

链式存储

当存储被过滤或排序时，所有使用它的组件都会自动刷新。有时我们希望在一个组件中显示所有数据，而在另一个组件中显示数据的子集。我们可以通过使用 Ext.data.ChainedStore 来做到这一点。

例如，我们可以在一个网格中显示所有用户，而在另一个网格中仅显示特定域中的用户

import { Component } from '@angular/core'
declare var Ext: any;

@Component({
    selector: 'app-root-1',
    styles: [``],
    template: `
    <container layout="vbox">
      <grid [title]="'All Users'" [store]="allUsers">
        ...
      </grid>
      <grid [title]="'Sencha Users'" [store]="senchaUsers">
        ...
      </grid>
    </container>
    `
})
export class ExampleComponent {
    allUsers = Ext.create('Ext.data.Store', {
      autoLoad: true,
      proxy: {
        type: 'ajax',
        url: 'users.json'
      }
    });

    senchaUsers = Ext.create('Ext.data.ChainedStore', { 
      source: allUsers, 
      filters: [{ 
        property: 'email', 
        value: '@sencha.com' 
      }] 
    });
}

`Ext.data.Model`

存储可以配置 fields 数组或 model。实际上，指定 fields 数组会创建一个隐式模型。模型允许您在多个存储中重用一组字段。模型还为我们提供了一种定义用于解释数据的可重用逻辑的方法。这是一个定义模型的示例

Ext.define('MyApp.model.User', {
  extend: 'Ext.data.Model',
  fields: [
    { name: 'name', type: 'string' },
    { name: 'email', type: 'string' },
    { name: 'age', type: 'integer' },
    { name: 'active', type: 'boolean', defaultValue: true, convert: value => value == 'Yes' }
  ]
});

在上面的示例中，我们使用 convert 配置来处理自定义数据格式，在本例中，将“Yes”转换为 true，并将所有其他值转换为 false。

请注意，Ext.define 的第一个参数（在本例中为“MyApp.model.User”）是我们想要创建的类的名称。它将作为全局变量导出。如果我们不想导出全局变量，我们可以简单地指定 null 作为第一个参数。例如

export default Ext.define(null, {
  extend: 'Ext.data.Model',
  ...
})

计算字段

模型可以定义其值从其他字段计算得出的字段。例如

Ext.define('MyApp.model.Substance', {
  fields: [{
    name: 'volume',
    type: 'float'
  }, {
    name: 'mass',
    type: 'float'
  }, { 
    name: 'density',
    calculate: ({ volume, mass }) => volume / mass
  }]
})

访问字段数据

我们可以使用 get 方法访问模型字段的值

record.get('email');

所有具体的（非计算的）字段都可通过 data 属性获得

const { name, email } = record.data;

目录

介绍

术语、图标和标签

访问级别

成员类型

成员语法

成员标志

类图标

成员图标

导航和功能

类成员快速导航菜单

Getter 和 Setter 方法

历史记录栏

搜索和过滤器

API 文档类元数据

展开和折叠示例和类成员

桌面与移动视图

查看类源代码

ExtAngular 7.5.0

目录

ExtAngular 数据包

`Ext.data.Store`

`Ext.data.Proxy`

排序

过滤

链式存储

`Ext.data.Model`

计算字段

访问字段数据

ExtAngular 7.5.0