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