Question

我是一名新的学习者，我想做的是将图像添加到嵌套列表文本中。

我试图修改kithcensink exapmle代码，这是我的嵌套列表

    Ext.require('Ext.data.TreeStore', function() {
Ext.define('Kitchensink.view.NestedList', {
    requires: ['Kitchensink.view.EditorPanel', 'Kitchensink.model.Kategori'],
    extend: 'Ext.Container',
    config: {
        layout: 'fit',
        items: [{
            xtype: 'nestedlist',
            store: {
                type: 'tree',
                id: 'NestedListStore',
                model: 'Kitchensink.model.Kategori',
                root: {},
                proxy: {
                    type: 'ajax',
                    url: 'altkategoriler.json'
                }
            },  

            displayField: 'text',



            listeners: {
                leafitemtap: function(me, list, index, item) {
                    var editorPanel = Ext.getCmp('editorPanel') || new Kitchensink.view.EditorPanel();
                    editorPanel.setRecord(list.getStore().getAt(index));
                    if (!editorPanel.getParent()) {
                        Ext.Viewport.add(editorPanel);
                    }
                    editorPanel.show();
                }
            }
        }]
    }
});

}）;

我修改了商店文件

    var root = {
        id: 'root',
        text: 'Lezzet Dünyası',
        items: [
            {
                text: 'Ana Menü',
                id: 'ui',
                cls: 'launchscreen',
                items: [
                    {
                        text: 'Et Yemekleri',
                        leaf: true,
                        view:'NestedList3',
                        id: 'nestedlist3'
                    },
                    {
                        text: 'Makarnalar',
                        leaf: true,
                        view: 'NestedList2',
                        id: 'nestedlist2'
                    },
                    {
                        text: 'Tatlılar',
                        leaf: true,
                        view: 'NestedList4',
                        id: 'nestedlist4'
                    },
                    {
                        text: 'Çorbalar',
                        view: 'NestedList',
                        leaf: true,
                        id: 'nestedlist'
                    }
                ]
            }
        ]
    };

如何编辑代码以在嵌套列表文本附近添加图像？

例如，在this网站中，您可以看到嵌套列表示例，我需要在Blues，Jazz，Pop，Rock附近拍摄图像。

Answer 1

通常，您可以通过自定义getItemTextTpl（将其放入Ext.NestedList定义中来完成所需工作，例如：

getItemTextTpl: function(node) {
  return '<span><img src="image_url" alt="alternative_text">{text}</span>';
}

通过返回的字符串定义您喜欢的任何模板。

在NestedList- Sencha Touch 2中添加文本附近的图像

1 个答案: