Sencha Touch - 带有图像的列表/nestesList

Question

我今天早上开始使用 Sencha Touch，我需要一些帮助。

如果我创建一个像这样的嵌套列表：

var data = {
    text: 'Groceries',
    items: [{
        text: 'Ninja',
        items: [{
            text: 'Water',
            items: [{
                text: 'Sparkling',
                leaf: true
            },{
                text: 'Still',
                leaf: true
            }]
        },{
            text: 'Coffee',
            leaf: true
        },{
            text: 'Espresso',
            leaf: true
        },{
            text: 'Redbull',
            leaf: true
        },{
            text: 'Coke',
            leaf: true
        },{
            text: 'Diet Coke',
            leaf: true
        }]
    }],{
        text: 'Fruit',
        items: [{
            text: 'Bananas',
            leaf: true
        },{
            text: 'Lemon',
            leaf: true
        }]
    },{
        text: 'Snacks',
        items: [{
            text: 'Nuts',
            leaf: true
        },{
            text: 'Pretzels',
            leaf: true
        },{
            text: 'Wasabi Peas',
            leaf: true
        }]
    },{
        text: 'Empty Category',
        items: []
    }]
};

如何将图像添加到列表中？例如，如果我想在减肥可乐旁边有可口可乐标志。我尝试设置 html 里面有一个图像，但这只是给了我一个空白项目。尽管有“文本”属性，但我找不到任何有关如何操作列表项的信息。我知道这是可能的，因为我看到了一个包含带有联系人照片的联系人列表的示例。

我希望你能帮助我并提前谢谢你。

Answer 1

您可以向 Ext.regModel 添加额外的字段，因此您需要添加一个字段来保存图像的路径。

您可以将任何您想要的 HTML 添加到列表 itemTpl 中，以便您可以在其中添加图像。

下面的示例来自 sencha api 文档，我将其修改为使用图像让您了解如何添加它们。

希望有帮助！

代码片段

Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {

        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName', 'imgURL']
        });

        var store = new Ext.data.JsonStore({
            model: 'Contact',
            sorters: 'lastName',

            getGroupString: function(record) {
                return record.get('lastName')[0];
            },

            data: [{
                firstName: 'Tommy',
                lastName: 'Maintz',
                imgURL: 'myImage.png'
            }, {
                firstName: 'Rob',
                lastName: 'Dougan',
                imgURL: 'myImage.png'
            }, {
                firstName: 'Ed',
                lastName: 'Spencer',
                imgURL: 'myImage.pngg'
            }, {
                firstName: 'Jamie',
                lastName: 'Avins',
                imgURL: 'myImage.png'
            }]
        });

        var list = new Ext.List({
            fullscreen: true,

            itemTpl: '<img src="{imgURL}" width="20" heigh="20"></img><span>{firstName} {lastName}</span>',
            //grouped : true,
            //indexBar: true,

            store: store
        });
        list.show();
    }
});