image - 如何在 sencha touch 中创建这样的图像查看器？

Question

我需要在 sencha touch 中创建一个像这样的图像查看器。它应该显示图像的缩略图。单击缩略图应显示放大的图像。我是煎茶的新手。请帮我。

Answer 1

AFAIK 没有这样的标准画廊插件，所以你必须自己做。你可以试试这个：

在布局中创建一个具有 2 个面板的容器vbox，较大的顶部面板将有一个image，而下部面板将是一个水平的list。在itemtap任何列表项上，您可以src更改image. 您可以通过使用提供缩略图和大图像 url 的商店从服务器加载数据来创建这个简单的列表。

我还没有测试过，但这应该是这样的：

{
    xtype : 'panel',
    layout : 'vbox',
    items : [{
        xtype : 'panel',
        flex : 5,
        items : [{
            xtype : 'image',
            id : 'myImg',
            src : 'http://xyz.com/asdf.jpg'
        }]
    },{
        xtype : 'panel',
        items : [{
            xtype : 'list',
            listeners: {
            itemtap: function(list, index, item, rec) {
                Ext.getCmp("myImg").setSrc(rec.get('bigImgUrl'));
            }
        }
        }]
    }]
}