2012-04-12 40 views
1

我是一名新的sencha學習者,我想要做的是將圖像添加到嵌套列表文本中。在NestedList中添加圖片附近的圖片 - Sencha Touch 2

我試圖修改kithcensink exapmle代碼,這是我的nestedlist

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的圖像。

回答

2

一般情況下,你可以做的比你所需要的是通過定製您getItemTextTpl(把它放到你的Ext.NestedList定義,例如更多:

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

定義模板,無論你通過返回的字符串喜歡