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

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

    latyou: 'fit',

    initComponent: function() {
        var me = this;

        var view = Ext.create('Ext.view.View', {
            store : Ext.create('Ext.data.Store', {
				fields: ['title', 'content', 'color'],
				data: me.infoData,
			}),
            tpl: new Ext.XTemplate([
                '<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>'
            ]),
            itemSelector: 'div.x-info-card-body',
        });

        Ext.apply(me, {
            userCls: 'x-info-card ' + me.userCls,
            items: [{
                xtype: 'button',
                cls: 'x-scroller-button x-scroller-button-left',
                // iconCls: 'x-sa sa-arrows-left',
                disabled: true,
                handler: function() {
                    me.scrollBody(1);
                }
            }, view, {
                xtype: 'button',
                cls: 'x-scroller-button x-scroller-button-right',
                // iconCls: 'x-sa sa-arrows-right',
                handler: function() {
                    me.scrollBody(-1);
                }
            }]
        });

        me.callParent(arguments);
    },

    listeners: {
        boxready: function(th) {
            var list = Ext.fly(th.items.items[1].el.dom);
            var listWidth = Number(list.getStyle('width').replace('px', ''));
            var bodyWidth = th.body.getBox().width;
            var btns = th.query('button');

            if(listWidth <= (bodyWidth-88)) {
                btns[0].setVisible(false);
                btns[1].setVisible(false);
                return;
            }

            Ext.fly(th.body).on('mousewheel', function() {
                var ev = window.event;
                var delta = ev.wheelDelta;

                if(ev.preventDefault) {
                    ev.preventDefault();  
                }
                else {
                    ev.cancel=true;
                }
                th.scrollBody(delta/120);
            })
        }
    },

    scrollBody: function(delta) {
        var me = this;
        var list = Ext.fly(me.items.items[1].el.dom);
        var marginLeft = Number(list.getStyle('marginLeft').replace('px', ''));
        var le = marginLeft + delta * 50;
        var MAX_LEN = list.getBox().width - (me.body.getBox().width - 88);

        if(le > 0) {
            le = 0;
            me.scrollLeftDisabled();
        }else if(le < -MAX_LEN) {
            le = -MAX_LEN;
            me.scrollRightDisabled();
        }else {
            me.scrollEnable();
        }

        list.setStyle({
            marginLeft: le + 'px'
        });
    },
    
    scrollLeftDisabled: function() {
        var me = this;
        var leftBtn = me.query('button')[0];
        leftBtn.setDisabled(true);
    },

    scrollRightDisabled: function() {
        var me = this;
        var rightBtn = me.query('button')[1];
        rightBtn.setDisabled(true);
    },

    scrollEnable: function() {
        var me = this;
        var btns = me.query('button');

        for(var i = 0; i < btns.length; i ++) {
            btns[i].setDisabled(false);
        }
    }
});