1

私は新しい煎茶学習者です。私がやりたいことは、ネストされたリストのテキストに画像を追加することです。

私は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'
                    }
                ]
            }
        ]
    };

ネストされたリスト テキストの近くに画像を追加するには、コードをどのように編集すればよいですか?

たとえば、このサイトでは入れ子になったリストの例を見ることができます。ブルース、ジャズ、ポップ、ロックに近い画像が必要です。

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 に答える