extjs主界面

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainview',
    layout: 'fit',
    items: [
        {
            xtype: 'tabpanel',
            items: [
                {
                    title: 'Tab 1',
                    items: [{
                        xtype: 'gridpanel',
                        // ... 其他配置
                    }]
                },
                // 其他标签页
            ]
        }
    ],
    listeners: {
        afterrender: function(panel) {
            // 懒加载示例
            Ext.create('Ext.grid.Panel', {
                renderTo: panel.body,
                store: Ext.getStore('MyStore'),
                columns: [
                    // 列定义
                ]
            });
        }
    }
});

Ext.define('MyApp.view.LayoutExample', {
    extend: 'Ext.container.Container',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [
        {
            xtype: 'panel',
            flex: 1,
            title: 'Panel 1'
        },
        {
            xtype: 'panel',
            flex: 2,
            title: 'Panel 2'
        }
    ]
});

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' }
    ]
});

var store = Ext.create('Ext.data.Store', {
    model: 'MyApp.model.User',
    proxy: {
        type: 'ajax',
        url: '/api/users',
        reader: {
            type: 'json',
            rootProperty: 'users'
        }
    },
    autoLoad: true
});