Extjs4详解

一、Extjs4文件系统

1、Extjs4是一个基于MVC架构设计的JavaScript框架，其主要目的是简化Web应用程序的开发过程。使用Extjs4可以轻松地构建跨浏览器、跨平台的Web应用程序。

2、文件系统是Extjs4的重要组成部分，其中包括了各种类、插件、工具、模版和库文件等，使得开发人员能够轻松地选择自己需要的部分进行应用程序的构建。

3、以下是一个简单的Extjs4文件系统例子：

Ext.require([
    'Ext.tab.*',
    'Ext.window.*',
    'Ext.tip.*'
]);

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();

    var tabs = Ext.createWidget('tabpanel', {
        renderTo: Ext.getBody(),
        width: 600,
        height: 250,
        tabBar: {
            flex: 1,
            layout: {
                pack: 'center'
            }
        },
        items: [{
            title: 'Tab 1',
            html: '<empty panel>'
        }, {
            title: 'Tab 2',
            html: '<empty panel>'
        }, {
            title: 'Tab 3',
            html: '<empty panel>'
        }]
    });

    Ext.createWidget('window', {
        title: 'Layout Window',
        closable: false,
        closeAction: 'hide',
        width: 600,
        height: 350,
        layout: {
            type: 'border',
            padding: 5
        },
        items: [{
            region: 'west',
            title: 'Navigation',
            width: 150,
            split: true,
            collapsible: true,
            floatable: false
        }, {
            region: 'center',
            xtype: 'tabpanel',
            items: [{
                title: 'Tab 1',
                html: '<empty panel>'
            }, {
                title: 'Tab 2',
                html: '<empty panel>'
            }]
        }],
        renderTo: Ext.getBody()
    }).show();
});

二、Extjs4类库的使用

1、类库是Extjs4的核心之一，其主要目的是将应用程序的业务逻辑和界面设计进行分离，并提供丰富的组件和样式以及自定义事件等特性，使得开发人员能够快速构建出漂亮的Web应用程序。

2、以下是一个使用Extjs4类库进行布局管理的例子：

Ext.onReady(function() {
    Ext.createWidget('viewport', {
        layout: 'border',
        renderTo: Ext.getBody(),
        items: [{
            region: 'north',
            xtype: 'panel',
            html: '<h1>Header</h1>'
        }, {
            region: 'west',
            xtype: 'panel',
            width: 150,
            title: 'Navigation',
            layout: 'accordion',
            split: true,
            items: [{
                title: 'Submenu 1',
                html: '<p>Submenu 1 content</p>'
            }, {
                title: 'Submenu 2',
                html: '<p>Submenu 2 content</p>'
            }]
        }, {
            region: 'center',
            xtype: 'tabpanel',
            items: [{
                title: 'Tab 1',
                html: '<p>Tab 1 content</p>'
            }, {
                title: 'Tab 2',
                html: '<p>Tab 2 content</p>'
            }]
        }]
    });
});

三、Extjs4插件的使用

1、插件是Extjs4的另一个重要组成部分，其主要目的是扩展已有组件的功能或添加新的功能，如表单验证、提示信息、滚动条等。

2、以下是一个使用Extjs4插件进行表单验证的例子：

Ext.onReady(function() {
    Ext.createWidget('form', {
        title: 'Simple Form',
        renderTo: Ext.getBody(),
        width: 350,
        bodyPadding: 10,
        items: [{
            xtype: 'textfield',
            name: 'name',
            fieldLabel: 'Name',
            allowBlank: false
        }, {
            xtype: 'textfield',
            name: 'email',
            fieldLabel: 'Email Address',
            vtype: 'email',
            allowBlank: false
        }],
        buttons: [{
            text: 'Save',
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        success: function(form, action) {
                            Ext.Msg.alert('Success', action.result.msg);
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failure', action.result.msg);
                        }
                    });
                }
            }
        }]
    });
});

四、Extjs4工具箱的使用

1、工具箱是Extjs4的另一个重要组成部分，其主要目的是提供一些编程辅助工具，如布局管理器、Ajax异步请求、事件处理等，方便开发人员进行开发。

2、以下是一个使用Extjs4工具箱进行Ajax异步请求的例子：

Ext.Ajax.request({
    url: 'test.php',
    method: 'GET',
    params: {
        name: 'John',
        email: 'john@example.com'
    },
    success: function(response) {
        var text = response.responseText;
        Ext.Msg.alert('Success', text);
    },
    failure: function(response) {
        var text = response.responseText;
        Ext.Msg.alert('Failure', text);
    }
});

五、Extjs4模版的使用

1、模版是Extjs4的另一个重要组成部分，其主要目的是提供一种简单而强大的方式来构建HTML页面。使用模版可以根据不同的数据生成不同的HTML页面，同时还可以进行逻辑处理、格式化、循环等操作。

2、以下是一个使用Extjs4模版构建列表的例子：

Ext.createWidget('panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    title: 'List',
    tpl: [
        '<tpl for="data">',
            '<div class="item">',
                '<h1>{title}</h1>',
                '<p>{description}</p>',
            '</div>',
        '</tpl>'
    ],
    data: {
        data: [{
            title: 'Item 1',
            description: 'This is item 1'
        }, {
            title: 'Item 2',
            description: 'This is item 2'
        }, {
            title: 'Item 3',
            description: 'This is item 3'
        }]
    }
});