saas-one/frontend/operation-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'
    ],

    layout: 'card',
    height: 110,

    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>',
        '">',
        '<div class="title">{title}</div>',
        '<div class="value">{content}</div>',
        '</div>',
        '</div>',
        '</div>',
        '</tpl>',
        '</div>'
    ],

    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            cards: {
                
            },
            userCls: 'x-info-card ' + me.userCls,
            lbar: [{
                itemId: 'card-prev',
                hidden: true,
                margin: '0 8 0 0',
                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,
        currentIndex = me.currentIndex,
        p = me.up('home'),
        cards = me.cards,
        datas = [],
        items = [];
        size = Math.ceil(me.body.el.getBox().width / 230);

        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-box',
                listeners: {
                    itemclick: function(th, record, item, index, e, eOpts) {
                        saas.util.BaseUtil.openTab(record.get('viewType'), record.get('title'), record.get('id'));
                    }
                }
            });

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

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

        if(Ext.isNumber(currentIndex)) {
            me.setActiveItem(me.items.items[currentIndex]);
        }else {
            me.currentIndex = 0;
        }
        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.currentIndex = me.currentIndex + incr;

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