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

Posted 2023-02-25

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

【英文标题】：Adding image near text in NestedList- Sencha Touch 2

【发布时间】：2012-04-12 10:59:58

【问题描述】：

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

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

    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 站点中，您可以看到一个嵌套列表示例，我需要一个靠近布鲁斯、爵士、流行、摇滚的图像。

【参考方案1】：

通常，您可以通过自定义 getItemTextTpl 来做更多的事情（将其放入您的 Ext.NestedList 定义中，例如：

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

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