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'
        }]
    }
});