Sencha touchez la liste imbriquée avec le champ numérique et le bouton pour les éléments de la liste?

Question

J'ai ce code suivant et je veux afficher des images et d'autres éléments html comme éléments de la liste imbriquée. Est-ce que cela peut être réalisé? mon code est

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; 
     } 

}} )

si je utilise le champ imgURL sa ne fonctionne pas .. Plz aider .. Réponses apprécié ..!

Answer 1

Vous devez définir le modèle de vos éléments de liste imbriqués. Vous pouvez le faire en ajoutant une liste imbriquée vous attribut getItemTextTpl config

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

Vous pouvez jeter un oeil à la façon dont je getItemTextTplin this question

Answer 2

La réponse acceptée ne fonctionne pas pour moi - ce qui a fonctionné a été mise en l'itemTpl dans l'élément de configuration listConfig dans le 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' 
    } 
});