saas-platform/frontend/saas-web/app/view/home/Home.js

Ext.define('saas.view.home.Home', {
    extend: 'Ext.container.Container',
    xtype: 'home',

    requires: [
        'saas.view.home.MsgCard',
        'Ext.slider.Single',
        'Ext.form.field.Display',
        'Ext.layout.container.Border'
    ],

    layout: {
        type: 'vbox',
        pack: 'start',
        align: 'stretch'
    },

    bodyPadding: 5,

    defaults: {
        xtype: 'container'
    },

    items: [
        {
            height: 200,
            layout: 'column',
            margin: '0 0 20 0',
            items: [
                {
                    xtype: 'msgcard',
                    containerColor: 'cornflower-blue',
                    columnWidth: 0.25,
                    margin: '0 15 0 0',
                    data: {
                        count: 0,
                        title: '库存预警',
                        icon: 'exclamation-triangle'
                    }
                },
                {
                    xtype: 'msgcard',
                    containerColor: 'green',
                    columnWidth: 0.25,
                    margin: '0 15 0 0',
                    data: {
                        count: 11,
                        title: '未发货销售订单',
                        icon: 'shopping-cart'
                    }
                },
                {
                    xtype: 'msgcard',
                    containerColor: 'magenta',
                    columnWidth: 0.25,
                    margin: '0 15 0 0',
                    data: {
                        count: 6,
                        title: '未审核销售订单',
                        icon: 'check'
                    }
                },
                {
                    xtype: 'msgcard',
                    containerColor: 'orange',
                    columnWidth: 0.25,
                    data: {
                        count: 5,
                        title: '未审核购货订单',
                        icon: 'calendar-check-o'
                    }
                },
            ]
        },
        {
            xtype: 'tabpanel',
            flex: 10,
            cls: 'shadow',
            items: [
                {
                    title: '销货'
                },
                {
                    title: '购货'
                },
                {
                    title: '仓库'
                }
            ]
        }
    ]
});