ext怎么定义json数据

ExtJS中如何定义JSON数据：规范与实践指南

在ExtJS开发中，JSON（JavaScript Object Notation）作为轻量级的数据交换格式，是前后端数据交互的核心载体，无论是从后端API获取数据、定义前端模型结构，还是配置组件属性，都离不开对JSON数据的规范定义，本文将从JSON数据的基础定义、在ExtJS中的核心应用场景、规范设计原则及实践案例出发,系统介绍ExtJS中定义JSON数据的方法与最佳实践。

JSON数据的基础定义：语法与结构

JSON本质上是一种基于JavaScript对象语法的数据格式，通过键值对（Key-Value Pair）的结构组织数据，具有易读、易解析的特点，在ExtJS中,JSON数据的定义需遵循标准语法规则：

基本语法结构

对象（Object）：用花括号包裹，无序集合，包含多个键值对，键需用双引号包裹，值可以是字符串、数字、布尔值、数组、对象或null，键值对之间用逗号分隔。
示例：
```
{
  "name": "张三",
  "age": 25,
  "isActive": true,
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
}
```
数组（Array）：用方括号 [] 包裹，有序集合，元素可以是任意JSON数据类型，元素之间用逗号分隔。
示例：
```
[
  {"id": 1, "name": "商品A", "price": 99.99},
  {"id": 2, "name": "商品B", "price": 149.99}
]
```

ExtJS中JSON数据的特殊要求

ExtJS作为企业级前端框架，对JSON数据的规范性要求更高，主要体现在：

键名一致性：前后端约定的键名需保持大小写、命名规范（如驼峰命名或下划线命名）统一，避免因键名不匹配导致数据解析失败。
数据类型明确：ExtJS的模型（Model）会校验JSON字段的数据类型（如String、Number、Date等），JSON中的值需与模型定义的类型一致（例如日期字段需为ISO 8601格式字符串）。
必填字段完整性：若模型定义了必填字段（如{ name: 'id', type: 'int', useNull: true }），JSON数据中需包含这些字段,否则可能导致模型验证失败。

ExtJS中JSON数据的核心应用场景

在ExtJS中，JSON数据的应用贯穿数据层、视图层与逻辑层,以下是核心场景及定义方法：

模型（Model）与代理（Proxy）：定义数据结构

模型是ExtJS中数据操作的基础，通过Ext.data.Model定义数据字段的类型、验证规则及默认值，而代理（Proxy）负责与数据源（如后端API、本地存储）交互,处理JSON数据的读取与写入。

示例：定义用户模型及JSON映射

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [ // 定义字段，对应JSON中的键
        { name: 'id', type: 'int' },           // JSON: {"id": 1}
        { name: 'username', type: 'string' },  // JSON: {"username": "admin"}
        { name: 'email', type: 'string' },     // JSON: {"email": "admin@example.com"}
        { name: 'createTime', type: 'date', dateFormat: 'c' }, // JSON: {"createTime": "2023-10-01T12:00:00Z"}
        { name: 'isActive', type: 'boolean', defaultValue: true } // JSON: {"isActive": true}（可选，有默认值）
    ],
    proxy: {
        type: 'ajax', // 使用Ajax代理与后端交互
        url: '/api/users', // 后端API地址
        reader: {
            type: 'json', // 指定响应数据为JSON格式
            rootProperty: 'data', // JSON数据中列表数据的根节点（如{"data": [...], "total": 10}）
            totalProperty: 'total', // 总记录数字段
            successProperty: 'success' // 操作成功标识字段（如{"success": true, "data": [...]})
        },
        writer: {
            type: 'json',
            writeAllFields: true, // 写入所有字段（可根据需求设置为false，仅修改变更字段）
            encode: true // 是否将数据编码为JSON字符串
        }
    }
});

说明：

fields定义了模型字段与JSON键的映射关系，type指定字段类型（ExtJS会自动转换JSON值为对应类型）。
reader用于解析后端返回的JSON数据，rootProperty指向列表数据所在的节点，避免直接解析顶层对象导致数据读取错误。

数据存储（Store）：管理JSON数据集合

存储（Store）是模型的集合，负责管理、排序、过滤数据,通常从代理加载JSON数据并转换为模型实例。

示例：定义用户存储并加载JSON数据

Ext.define('MyApp.store.UserStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User', // 关联User模型
    autoLoad: true, // 自动加载数据
    proxy: {
        type: 'ajax',
        url: '/api/users',
        reader: {
            type: 'json',
            rootProperty: 'items' // 假设后端返回{"items": [...], "total": 5}
        }
    }
});
// 使用存储加载数据
const userStore = Ext.create('MyApp.store.UserStore');
userStore.load({
    scope: this,
    callback: function(records, operation, success) {
        if (success) {
            console.log('加载成功，数据量：', records.length); // records为User模型实例数组
        } else {
            console.log('加载失败：', operation.getError());
        }
    }
});

说明：

Store通过代理从后端获取JSON数据，经reader解析后转换为模型实例，存储在data属性中。
可通过sorters、filters对数据进行排序和过滤，所有操作均基于模型实例，而非原始JSON。

视图组件（Grid、Form等）：渲染JSON数据

视图组件（如Grid表格、Form表单）通过绑定Store或直接配置JSON数据,实现数据的展示与编辑。

示例1：Grid表格展示JSON数据

Ext.create('Ext.grid.Panel', { '用户列表',
    width: 600,
    height: 300,
    store: Ext.create('MyApp.store.UserStore'), // 绑定UserStore
    columns: [
        { text: 'ID', dataIndex: 'id', width: 50 }, // dataIndex对应模型字段名（即JSON中的键）
        { text: '用户名', dataIndex: 'username', flex: 1 },
        { text: '邮箱', dataIndex: 'email', flex: 1 },
        { text: '状态', dataIndex: 'isActive', renderer: function(value) {
            return value ? '激活' : '未激活'; // 布尔值转换
        }}
    ],
    renderTo: Ext.getBody()
});

示例2：Form表单编辑JSON数据

Ext.create('Ext.form.Panel', { '编辑用户',
    width: 400,
    bodyPadding: 10,
    defaults: { labelWidth: 60 },
    items: [
        { xtype: 'hiddenfield', name: 'id' }, // 对应JSON中的"id"字段
        { xtype: 'textfield', name: 'username', fieldLabel: '用户名' },
        { xtype: 'textfield', name: 'email', fieldLabel: '邮箱' },
        { xtype: 'checkboxfield', name: 'isActive', fieldLabel: '激活状态' }
    ],
    buttons: [{
        text: '保存',
        handler: function() {
            const form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    url: '/api/users/update',
                    success: function(form, action) {
                        Ext.Msg.alert('成功', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('失败', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});

说明：