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

Ext.define('saas.view.home.InfoCard', {
    extend: 'Ext.panel.Panel',
    xtype: 'infocard',

    id: 'infocard',

    requires: [
        'Ext.layout.container.Card'
    ],

    BaseUtil: Ext.create('saas.util.BaseUtil'),

    layout: 'card',
    height: 150,

    cardTpl: [
        '<div class="x-row">',
        '<tpl for=".">',
        '<div class="x-col">',
        '<div>',
        '<div class="x-box ',
        '<tpl if="color"> x-bg-{color}</tpl>',
        '<tpl else"> x-bg-default</tpl>',
        '">',
        '<h3>{title}</h3>',
        '<p>{content}</p>',
        '</div>',
        '</div>',
        '</div>',
        '</tpl>',
        '</div>'
    ],

    cards: {
        unship: {
            title: '七天内待出货销售',
            color: 'yellow'
        },
        unstorage: {
            title: '七天内待入库采购',
            color: 'purple'
        },
        unpay: {
            title: '七天内待付款',
            color: 'red'
        },
        unreceive: {
            title: '七天内待收款',
            color: 'pink'
        },
        unauditcheck: {
            title: '未审核验收',
            color: 'blue'
        },
        unauditship: {
            title: '未审核出货',
            color: ''
        }
    },

    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            userCls: 'x-info-card ' + me.userCls,
            lbar: [{
                itemId: 'card-prev',
                hidden: true,
                cls: 'x-scroller-button x-scroller-button-left',
                handler: function() {
                    me. showPrevious();
                },
                disabled: true
            }],
            rbar: [{
                itemId: 'card-next',
                hidden: true,
                cls: 'x-scroller-button x-scroller-button-right',
                handler: function() {
                    me.showNext();
                }
            }],
            items: [],
        });

        me.callParent(arguments);
    },

    listeners: {
        boxready: function(m) {
            m.initCardItems();
        }
    },

    initCardItems: function() {
        this.addCardItems({});
    },

    addCardItems: function(infoData) {
        infoData = infoData || {};
        var me = this,
        p = me.up('home'),
        cards = me.cards,
        datas = [],
        items = [];
        size = Math.ceil(me.body.el.getBox().width / 235);

        me.removeAll();

        var cl = Ext.Object.getAllKeys(cards);

        for(var x = 0; x < cl.length;) {
            var d = [];
            for(var y = 0; y < size && x < cl.length; y++) {
                var key = cl[x];
                d.push(Ext.merge(cards[key], {
                    content: infoData[key] || 0
                }));
                x++;
            }
            datas.push(d);
        }

        Ext.Array.each(datas, function(d, i) {

            var store = Ext.create('Ext.data.Store', {
                fields: ['title', 'content', 'color'],
                data: d,
            });

            var view = Ext.create('Ext.view.View', {
                store: store,
                tpl: new Ext.XTemplate(me.cardTpl),
                itemSelector: 'div.x-info-card-body',
            });

            var item = {
                xtype: 'panel',
                id: 'card-' + i,
                items: view
            };
            me.add(item);
        });

        if(datas.length > 1) {
            me.showPageTrigger();
        }

        me.updateLayout(true);
    },

    showPageTrigger: function() {
        var me = this;
        me.down('#card-prev').show();
        me.down('#card-next').show();
    },

    showNext: function () {
        this.doCardNavigation(1);
    },

    showPrevious: function (btn) {
        this.doCardNavigation(-1);
    },

    doCardNavigation: function (incr) {
        var me = this;
        var l = me.getLayout();
        var i = l.activeItem.id.split('card-')[1];
        var c = me.items.items.length;
        var next = parseInt(i, 10) + incr;
        l.setActiveItem(next);

        me.down('#card-prev').setDisabled(next === 0);
        me.down('#card-next').setDisabled(next === (c-1));
    }
});