ext js - ColumnModel绑定到复杂的json对象

// 1. 加载Ext JS库并配置应用程序
Ext.onReady(function() {
    // 2. 创建一个Ext.data.Store
    var store = Ext.create('Ext.data.Store', {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'name', type: 'string' },
            { name: 'email', type: 'string' },
            { name: 'phone', type: 'string' },
            { name: 'address', type: 'string' }
        ],
        data: [
            { id: 1, name: 'John Doe', email: 'john.doe@example.com', phone: '123-456-7890', address: { street: '123 Main St', city: 'Anytown', state: 'CA', zip: '12345' } },
            { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', phone: '555-555-5555', address: { street: '456 Oak St', city: 'Othertown', state: 'NY', zip: '67890' } }
        ]
    });

    // 3. 在Ext JS表格中，使用store属性将表格绑定到Ext.data.Store
    Ext.create('Ext.grid.Panel', {
        title: 'Complex JSON Binding Example',
        store: store,
        columns: [
            { text: 'ID', dataIndex: 'id' },
            { text: 'Name', dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email' },
            { text: 'Phone', dataIndex: 'phone' },
            {
                text: 'Address',
                columns: [
                    { text: 'Street', dataIndex: 'address.street' },
                    { text: 'City', dataIndex: 'address.city' },
                    { text: 'State', dataIndex: 'address.state' },
                    { text: 'Zip', dataIndex: 'address.zip' }
                ]
            }
        ],
        renderTo: Ext.getBody()
    });
});