Sencha touch вложенной список с номером поля и кнопкой для элементов списка?

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

Принятая ответ не работает для меня может - что работал садилось itemTpl внутри конфигурации элемента listConfig в NestedList:

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