ext怎么定义json数据

Ext JS 中如何定义和使用 JSON 数据

在 Ext JS 开发中，JSON（JavaScript Object Notation）作为轻量级的数据交换格式，扮演着连接前端组件与后端服务的核心角色，无论是请求数据、配置组件，还是处理业务逻辑，都离不开对 JSON 数据的定义与操作，本文将系统介绍 Ext JS 中定义 JSON 数据的核心方法、最佳实践及常见应用场景。

JSON 数据在 Ext JS 中的核心地位

Ext JS 是一款企业级前端框架，其核心架构高度依赖结构化数据来驱动组件渲染、事件处理和数据交互，JSON 以其简洁的键值对结构、可读性强的语法以及与 JavaScript 的原生兼容性，成为 Ext JS 中数据传递的“通用语言”。

数据绑定：Grid、Tree、Form 等组件通过 JSON 数据动态渲染界面；
请求数据：通过 Ext.Ajax 或 Ext.data.proxy.Proxy 从后端获取 JSON 格式的响应数据；
配置组件：组件的 config 属性（如 title、fields、columns）常以 JSON 对象形式定义；
数据模型：Ext.data.Model 通过 JSON 定义字段结构,实现数据校验与转换。

直接定义 JSON 数据：基础语法与场景

在 Ext JS 中，最简单的 JSON 数据定义方式是直接使用 JavaScript 对象或数组字面量，无需额外依赖,这种方式常用于静态数据配置或小型演示场景。

定义简单 JSON 对象

// 定义用户信息对象
var user = {
    id: 1,
    name: "张三",
    age: 25,
    email: "zhangsan@example.com",
    isActive: true
};
// 在组件中使用
Ext.create('Ext.panel.Panel', { '用户信息',
    width: 300,
    height: 200,
    html: `<p>姓名：${user.name}</p><p>邮箱：${user.email}</p>`,
    renderTo: Ext.getBody()
});

定义 JSON 数组（适用于列表数据）

// 定义商品列表数组
var products = [
    { id: 101, name: "笔记本电脑", price: 4999, category: "电子产品" },
    { id: 102, name: "办公椅", price: 899, category: "家具" },
    { id: 103, name: "咖啡机", price: 299, category: "家电" }
];
// 在 Grid 中渲染数据
Ext.create('Ext.grid.Panel', { '商品列表',
    width: 500,
    height: 300,
    columns: [
        { text: 'ID', dataIndex: 'id', width: 50 },
        { text: '商品名称', dataIndex: 'name', flex: 1 },
        { text: '价格', dataIndex: 'price', formatter: 'currency' },
        { text: '分类', dataIndex: 'category' }
    ],
    store: {
        data: products // 直接将 JSON 数组作为 store 数据
    },
    renderTo: Ext.getBody()
});

特点：直接定义、无需额外处理，适合数据量小、结构固定的场景，但缺点是数据硬编码,难以动态更新或复用。

通过 Ext.data.Model 定义结构化 JSON 数据

当数据需要结构化校验、类型转换或复杂业务逻辑处理时，Ext JS 提供了 Ext.data.Model 模型来定义 JSON 数据的“骨架”，Model 明确了字段类型、默认值、校验规则等,确保数据符合预期格式。

定义 Model 类

// 定义用户模型
Ext.define('App.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },              // 整型字段
        { name: 'name', type: 'string' },         // 字符串字段
        { name: 'age', type: 'int' },             // 整型字段
        { name: 'email', type: 'string' },        // 字符串字段
        { name: 'joinDate', type: 'date', dateFormat: 'Y-m-d' }, // 日期字段，指定解析格式
        { name: 'salary', type: 'float', defaultValue: 0 },       // 浮点型字段，默认值 0
        { name: 'isActive', type: 'boolean' }     // 布尔型字段
    ],
    // 定义校验规则
    validators: {
        name: { type: 'presence', message: '姓名不能为空' },
        email: { type: 'email', message: '邮箱格式不正确' }
    }
});

使用 Model 创建 JSON 实例

// 创建 Model 实例（本质是结构化的 JSON 对象）
var user = Ext.create('App.model.User', {
    name: "李四",
    email: "lisi@example.com",
    joinDate: "2023-01-15",
    salary: 8000
});
// 获取 JSON 数据（可通过 toJSON() 方法转换为标准 JSON）
console.log(user.getData()); // 输出：{ id: null, name: "李四", age: null, email: "lisi@example.com", joinDate: "2023-01-15T00:00:00", salary: 8000, isActive: false }
console.log(user.toJSON());  // 输出：{"id":null,"name":"李四","age":null,"email":"lisi@example.com","joinDate":"2023-01-15T00:00:00","salary":8000,"isActive":false}
// 在 Form 中绑定数据
Ext.create('Ext.form.Panel', { '用户表单',
    width: 400,
    height: 300,
    items: [
        { xtype: 'textfield', fieldLabel: '姓名', name: 'name' },
        { xtype: 'textfield', fieldLabel: '邮箱', name: 'email' },
        { xtype: 'numberfield', fieldLabel: '薪资', name: 'salary' }
    ],
    buttons: [
        { text: '保存', handler: function() {
            console.log('表单数据：', user.getData());
        }}
    ],
    renderTo: Ext.getBody()
});
userForm.loadRecord(user); // 将 Model 数据加载到表单

优势：通过 Model 定义数据结构，可实现字段类型自动转换（如字符串 "123" 转为整型 123）、数据校验（如必填字段、邮箱格式）、默认值设置等,提升数据一致性和开发效率。

通过 Store 管理批量 JSON 数据

Store 是 Ext JS 中数据的核心容器，负责管理一组 Model 实例（即 JSON 数据集合），并提供排序、过滤、分页等功能，Store 的 data 属性可直接接收 JSON 数组，或通过代理（Proxy）从后端加载 JSON 数据。

定义本地 Store（直接绑定 JSON 数组）

// 定义商品 Store
Ext.define('App.store.Products', {
    extend: 'Ext.data.Store',
    model: 'App.model.Product', // 假设已定义 Product 模型
    data: [ // 直接传入 JSON 数组
        { id: 101, name: "笔记本电脑", price: 4999, category: "电子产品" },
        { id: 102, name: "办公椅", price: 899, category: "家具" },
        { id: 103, name: "咖啡机", price: 299, category: "家电" }
    ]
});
// 在 Grid 中使用 Store
Ext.create('Ext.grid.Panel', { '商品列表（Store 管理）',
    width: 500,
    height: 300,
    columns: [
        { text: 'ID', dataIndex: 'id', width: 50 },
        { text: '商品名称', dataIndex: 'name', flex: 1 },
        { text: '价格', dataIndex: 'price', formatter: 'currency' },
        { text: '分类', dataIndex: 'category' }
    ],
    store: Ext.create('App.store.Products'), // 创建 Store 实例
    renderTo: Ext.getBody()
});

定义远程 Store（通过代理加载 JSON 数据）

实际开发中，数据通常来自后端 API，Store 可通过 proxy 配置异步加载 JSON 数据：

// 定义远程用户 Store
Ext.define('App.store.Users', {
    extend: 'Ext.data.Store',
    model: 'App.model.User',
    autoLoad: true, // 自动加载数据
    proxy: {
        type: 'ajax', // 使用 Ajax 代理
        url: '/api/users', // 后端 API 地址
        reader: {
            type: 'json', // 指定响应数据格式为 JSON
            rootProperty: 'data', // JSON 数据中数组字段的名称（如 {"data": [...]}）
            totalProperty: 'total' // 分页时总