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',
    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>'
    ],

    initComponent: function () {
        var me = this;

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

        me.callParent(arguments);
    },

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

        me.removeAll();
        for(var x = 0; x < infoData.length;) {
            var d = [];
            for(var y = 0; y < size && x < infoData.length; y++) {
                d.push(infoData[x]);
                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.hidePageTrigger();
        }

        me.updateLayout(true);
    },

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

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