Extjs6（特別篇）——項目自帶例子main.js拆分詳解

本文基於extjs6.0.0

一、拆分代碼來看看

　　1、主頁面main是個tab頁；

　　　　寫一些頁面的依賴；

　　　　標明頁面的controller和viewModel

Ext.define('Learning.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',
 requires: [ 'Ext.plugin.Viewport', 'Ext.window.MessageBox', 'Learning.view.main.MainController', 'Learning.view.main.MainModel', 'Learning.view.main.List' ],

　　controller: 'main',
    viewModel: 'main',

　　

　　2、用了自定義的ui，后面三行不知道是啥

    ui: 'navigation',

    tabBarHeaderPosition: 1,
    titleRotation: 0,
    tabRotation: 0,

　　

　　3、title是從viewModel中取的；

　　　　layout中的 align: 'stretchmax' 表示子元素的高度垂直延伸到最大的那個元素。（沒有則如下圖）

    header: {
        layout: {
            align: 'stretchmax'
        },
        title: {
            bind: {
                text: '{name}'
            },
            flex: 0
        },
        iconCls: 'fa-th-list'
    },

　　

 

　　4、tab切換欄的layout也用到了類似的，align: 'stretch' 表示子元素延伸至填滿父容器。（沒有則如下圖）

    tabBar: {
        flex: 1,
        layout: {
            align: 'stretch',
            overflowHandler: 'none'
        }
    },

 

　　

　　

　　5、這個算是響應式吧。高較大的時候，tab欄在上；寬較大的時候，tab欄在左（如下圖）

    responsiveConfig: {
        tall: {
            headerPosition: 'top'
        },
        wide: {
            headerPosition: 'left'
        }
    },

                         

 

　　6、defaults里面是一些默認設置，主要是響應式的設置，寬高不同時，圖標文字位置不同。（可參考上圖）

    defaults: {
        bodyPadding: 20,
        tabConfig: {
            plugins: 'responsive',
            responsiveConfig: { wide: { iconAlign: 'left',
                    textAlign: 'left'
                },
                tall: {
                    iconAlign: 'top',
                    textAlign: 'center',
                    width: 120 } }
        }
    },

 

　　7、這里面包含了tab按鈕和相對應的內容，第一個Home中的內容通過xtype調用了另一個文件list.js，其余幾個內容是從main的viewModel中取的。

　　items: [{
        title: 'Home',
        iconCls: 'fa-home',
        // The following grid shares a store with the classic version's grid as well!
        items: [{
            xtype: 'mainlist'
        }]
    }, {
        title: 'Users',
        iconCls: 'fa-user',
        bind: {
            html: '{loremIpsum}'
        }
    }, {
        title: 'Groups',
        iconCls: 'fa-users',
        bind: {
            html: '{loremIpsum}'
        }
    }, {
        title: 'Settings',
        iconCls: 'fa-cog',
        bind: {
            html: '{loremIpsum}'
        }
    }]
});

 

文中包含一定的主觀理解，可能用詞不夠准確，僅供參考。

完。