一、初识ExtJs

介绍了ExtJs是什么，包括MVVM架构、组件化、丰富的UI组件等
强调了ExtJs的学习曲线很陡峭，需要花费大量的时间学习

二、ExtJs组件基础

介绍了ExtJs的组件基础知识，包括容器组件、表单组件、布局等
通过示例代码演示了如何创建容器组件和表单组件

示例一：创建容器组件

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: 'header',
        height: 50
    }, {
        region: 'center',
        xtype: 'tabpanel',
        items: [{
            xtype: 'panel',
            title: 'Tab 1',
            html: 'Hello, Tab 1!'
        }, {
            xtype: 'panel',
            title: 'Tab 2',
            html: 'Hello, Tab 2!'
        }]
    }, {
        region: 'west',
        html: 'navigation',
        width: 200,
        split: true,
        collapsible: true
    }, {
        region: 'south',
        html: 'footer',
        height: 50
    }]
});

示例二：创建表单组件

Ext.create('Ext.form.Panel', {
    title: 'Login',
    bodyPadding: 10,
    width: 300,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        allowBlank: false
    }, {
        xtype: 'textfield',
        name: 'password',
        inputType: 'password',
        fieldLabel: 'Password',
        allowBlank: false
    }],
    buttons: [{
        text: 'Login',
        formBind: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    url: '/login',
                    success: function(form, action) {
                        Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }]
});

三、MVVM架构与数据绑定

介绍了MVVM架构和数据绑定的概念
通过示例代码演示了如何创建ViewModel和绑定数据

示例三：创建ViewModel并绑定数据

Ext.define('UserViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.user',

    stores: {
        userList: {
            fields: ['name', 'email'],
            data: [{
                name: 'Alice',
                email: 'alice@example.com'
            }, {
                name: 'Bob',
                email: 'bob@example.com'
            }, {
                name: 'Charlie',
                email: 'charlie@example.com'
            }]
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'User List',
    viewModel: 'user',
    bind: {
        store: '{userList}'
    },
    columns: [{
        text: 'Name',
        dataIndex: 'name',
        flex: 1
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }]
});