ext 实现 滚动 看板 点击 展示 图片

1，效果如图

2，思路

实现左右滚动 其实元素并没有滚动 只是调整了 viewModel 中的数据的位置 

在左右两个按钮的点击事件 分别调整 viewModel 中的数组 是往前位移 还是往后 位移 

点击数据块 显示 图片 是在点击的时候 改变图片块绑定的图片的路径 同时 给被点击的数据块切换样式 

滚动的时候 也分别将前面或者后面的数据块的样式切换了 

3，主要代码

/**
 * Created by Sukla on 2017/11/21.
 */
Ext.define('app.view.common.myTabChangeViewPanel.MyTabChangeViewPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.my-tab-change-view-panel',
    buttons:[
        '->',
        {
            text:'投食'
        },
        {
            text:'铲屎'
        },
        '->'
    ],
    controller: Ext.create('Ext.app.ViewController', {
        /**
         *自定义切换页展示面板
         * 清除第一个的数据 同时 添加一个新的数据
         */
        panelChangeTabData: function (e) {
            var vm = this.getView();
            var arr = vm.getViewModel().data.arr;
            var isLeft = true;
            var activeBtnId = -1;
            if (e.itemId == "left") {
                arr.push(arr.shift())
            } else if (e.itemId == "right") {
                arr.unshift(arr.pop())
                isLeft = false;
            }
            vm.getViewModel().set('arr', arr);
            for (var i = 0; i < 5; i++) {
                vm.getViewModel().set('name' + (i + 1), arr[i].name);
                vm.getViewModel().set('age' + (i + 1), arr[i].age);
                if (vm.items.items[1].items.items[1].items.items[i].hasCls('btn-active-cls')) {
                    vm.items.items[1].items.items[1].items.items[i].removeCls('btn-active-cls')
                    activeBtnId = i
                }
            }
            if (activeBtnId > -1) {
                if (isLeft) {
                    activeBtnId--;
                } else {
                    activeBtnId++;
                }
                activeBtnId = (activeBtnId + 5) % 5;
                vm.items.items[1].items.items[1].items.items[activeBtnId].addCls('btn-active-cls')
            }
        },
        /**
         * 自定义切换页展示面板
         * 点击显示图片
         */
        showTabImage: function (e) {
            for (var i = 0; i < 5; i++) {
                if (this.getView().items.items[1].items.items[1].items.items[i].hasCls('btn-active-cls')) {
                    this.getView().items.items[1].items.items[1].items.items[i].removeCls('btn-active-cls')
                }
            }
            e.addCls('btn-active-cls');
            for (var i = 0; i < 5; i++) {
                if (this.getView().items.items[1].items.items[1].items.items[i].hasCls('btn-active-cls')) {
                    this.getViewModel().set('imgsrc', this.getViewModel().data.arr[i].img);
                }
            }
        }
    }),
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    viewModel: {
        data: {
            imgsrc: 'resources/images/khjz/pdf/timg.gif',
            arr: [
                {name: '杰瑞', age: 1, img: 'resources/images/khjz/pdf/timg1.gif'},
                {name: '大黄', age: 2, img: 'resources/images/khjz/pdf/timg2.gif'},
                {name: '小白', age: 3, img: 'resources/images/khjz/pdf/timg3.gif'},
                {name: '咪咪', age: 4, img: 'resources/images/khjz/pdf/timg4.gif'},
                {name: '发财', age: 5, img: 'resources/images/khjz/pdf/timg5.gif'}
            ]
        }
    },

    initComponent: function () {
        var arr = this.getViewModel().data.arr;
        for (var i = 0; i < 5; i++) {
            this.getViewModel().set('name' + (i + 1), arr[i].name);
            this.getViewModel().set('age' + (i + 1), arr[i].age);
        }
        this.items = [
            {
                flex: 0,
                height: 0,
                width: 0,
                xtype: 'grid',
                reference: 'myTabChangeViewData',
                store: Ext.create('Ext.data.Store', {
                    data: [
                        {
                            'name': [1, 2, 3, 4, 5]
                        }
                    ]
                })

            },
            {
                height: 150,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'button',
                        width: 100,
                        itemId: 'left',
                        cls: 'tab-change-view-btn-left',
                        handler: 'panelChangeTabData'
                    },
                    {
                        xtype: 'container',
                        padding: '10',
                        flex: 1,
                        scrollable: 'x',
                        cls: 'my-tab-scroll-panel',
                        layout: {
                            type: 'hbox',
                            align: 'stretch'
                        },
                        defaults: {
                            xtype: 'button',
                            flex: 1,
                            cls: 'tab-change-view-btn',
                            html: '<span><label>NAME:</label></span><br><span><label>AGE:</label></span>',
                            handler: 'showTabImage'
                        },
                        items: [
                            {
                                bind: {
                                    html: '<span><label>尊称:</label>{name1}</span><br><span><label>贵庚:</label>{age1}</span><br><span><label>最爱:</label>{name1}</span><br><span><label>等级:</label>{age1}</span>'
                                }
                            },
                            {
                                bind: {
                                    html: '<span><label>尊称:</label>{name2}</span><br><span><label>贵庚:</label>{age2}</span><br><span><label>最爱:</label>{name2}</span><br><span><label>等级:</label>{age2}</span>'
                                }
                            },
                            {
                                bind: {
                                    html: '<span><label>尊称:</label>{name3}</span><br><span><label>贵庚:</label>{age3}</span><br><span><label>最爱:</label>{name3}</span><br><span><label>等级:</label>{age3}</span>'
                                }
                            },
                            {
                                bind: {
                                    html: '<span><label>尊称:</label>{name4}</span><br><span><label>贵庚:</label>{age4}</span><br><span><label>最爱:</label>{name4}</span><br><span><label>等级:</label>{age4}</span>'
                                }
                            },
                            {
                                bind: {
                                    html: '<span><label>尊称:</label>{name5}</span><br><span><label>贵庚:</label>{age5}</span><br><span><label>最爱:</label>{name5}</span><br><span><label>等级:</label>{age5}</span>'
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'button',
                        width: 100,
                        itemId: 'right',
                        cls: 'tab-change-view-btn-right',
                        handler: 'panelChangeTabData'
                    }
                ]
            },
            {
                flex: 1,
                reference: 'show-tab-image',
                scrollable:true,
                bind: {
                    html: '<img style="display:block;margin:0 auto;width:100%;height:100%" src = "{imgsrc}">'
                }
            },

        ]
        this.callParent();
    }
})