Sencha觸摸與列表項的數字字段和按鈕的嵌套列表？

Question

我有這個下面的代碼，我想顯示圖像和其他html元素作爲嵌套列表的項目。可以實現這一點？ 我的代碼是

Ext.setup({ 
tabletStartupScreen: 'tablet_startup.png', 
phoneStartupScreen: 'phone_startup.png', 
icon: 'icons/logo4_1.png', 
glossOnIcon: false, 

title:'Item List', 
fullscree:true, 
onReady: function() { 

var data = { 
title:'Item List', 
    text: 'Groceries', 
    items: [{ 
     text: 'Beverages', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [{ 
      text: 'Water', 
      imgURL:'\images\beverage\colas.jpg', 
      items: [{ 
       text: 'Sparkling', 
       imgURL:'\images\beverage\colas.jpg', 
       leaf: true 
      },{ 
       text: 'Still', 
       imgURL:'\images\beverage\colas.jpg', 
       leaf: true 
     }] 
     }, { 
      text:'Coffee', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }, { 
      text: 'Espresso', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }, { 
      text: 'Redbull', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }, { 
      text: 'Coke', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }, { 
      text: 'Diet Coke', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }] 
    },{ 
    text: 'Fruits', 
    imgURL:'\images\beverage\colas.jpg', 
    items: [{ 
     text: 'Bananas', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    }, 
    { 
     text: 'Watermelon', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    } 
    , 
    { 
     text: 'Grapes', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [{text:'Black Grapes',leaf: true},{text:'Green Grapes',leaf:true}] 
    }, 
    { 
     text: 'Pear', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    } 
    ,{ 
     text: 'Apple', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    }] 
    }, 
    { 
     text: 'Bread and Bakery', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [{ 
      text: 'Bread', 
      imgURL:'\images\beverage\colas.jpg', 
      items: [{ 
      text: 'White Bread', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true, 
      }, 
      { 
      text: 'Brown Bread', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true, 
      }, 
      { 
      text: 'Sandwich Bread', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true, 
      }] 
    },{ 
     text: 'Pretzels', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    },{ 
     text: 'Cup Cakes', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    }] 
},{ 
    text: 'Personal Care', 
    imgURL:'\images\beverage\colas.jpg', 
    items: [ 
    { 
     text: 'Shampoo', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [ 
    { 
     text: 'Dove', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Sunsilk', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Garnier', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    ] 
    }, 
    { 
     text: 'Soaps', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [ 
    { 
     text: 'Dove', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Pears', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Lux', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    ] 
    }, 
    { 
     text: 'Hair Oil', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [ 
    { 
     text: 'Vatika', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Almond Oil', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Parachute Coconut oil', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    ] 
    }, 
    { 
     text: 'Body Lotions', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [ 
    { 
     text: 'Dove', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Ponds', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Nivea', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    ] 
    }, 

    ] 
}] 

};

Ext.regModel('ListItem', { 
    fields: ['text','imgURL'], 
    //fields: [{name: 'text', type: 'string'},{name: 'imageURL', type: 'string'}], 

}); 

var store = new Ext.data.TreeStore({ 
    model: 'ListItem', 
    root: data, 
    proxy: { 
     type: 'ajax', 
     reader: { 
      type: 'tree', 
      root: 'items' 
     } 
    } 
}); 

var leftNav = new Ext.NestedList({ 
fullscreen:true, 
    dock: 'left', 
    useTitleAsBackText: true, 
     title: 'Item List', 
     icon: 'icons/logo4_1.png', 
     itemTpl : '<img src="{imgURL}" width="100" heigh="100"></img><span>{text}</span> <span><button>Add to Cart</button>', 
     width: '350', 
     image:'image', 
     dockedItems:[{ 
     html:'<img src="icons/logo4_1.png" width="100" height="40"/>', 
     dock:'top', 
     }], 
     store: store, 
     }); 

new Ext.Panel({ 
    fullscreen: true, 

    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    defaults: { 
     flex: 1 
    }, 
    dockedItems:[leftNav] 
}); 
if(Ext.is.Phone) 
     { 
     fullscreen:true; 
     } 

}} ）

雖然現在用的是imgUrl的領域它不工作.. PLZ幫助..回答感激..！

Answer 1

您需要設置嵌套列表項的模板。您可以通過添加一個getItemTextTpl屬性您嵌套列表配置

getItemTextTpl: function(node){ 
    return '{imgURL} - {text}'; 
} 

你可以看看我是如何用getItemTextTplin this question

Answer 2

接受的答案不爲我工作做的 - 什麼工作是設置在NestedList的listConfig配置物品內部的itemTpl：

Ext.define('project.view.FooList', { 
    extend: 'Ext.dataview.NestedList', 
    config: { 
     fullscreen: true, 
     title: 'Foo, bro', 
     listConfig: { 
      itemTpl: new Ext.XTemplate('{text}, bro') 
     }, 
     store: 'FooStore' 
    } 
});