1

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

我试图修改 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'
                    }
                ]
            }
        ]
    };

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

例如,在这个站点中你可以看到一个嵌套列表示例,我需要一个靠近 Blues、Jazz、Pop、Rock 的图像。

4

1 回答 1

2

通常,您可以通过自定义getItemTextTpl(将其放入您的Ext.NestedList定义中,例如:

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

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

于 2012-04-12T11:29:57.517 回答