Sencha Touch - 列表/ nestesList包含图片

Question

今天早上我开始使用Sencha Touch，我可以使用一些帮助。

如果我创建这样一个nestedList：

var data = { 
    text: 'Groceries', 
    items: [{ 
     text: 'Ninja', 
     items: [{ 
      text: 'Water', 
      items: [{ 
       text: 'Sparkling', 
       leaf: true 
      },{ 
       text: 'Still', 
       leaf: true 
      }] 
     },{ 
      text: 'Coffee', 
      leaf: true 
     },{ 
      text: 'Espresso', 
      leaf: true 
     },{ 
      text: 'Redbull', 
      leaf: true 
     },{ 
      text: 'Coke', 
      leaf: true 
     },{ 
      text: 'Diet Coke', 
      leaf: true 
     }] 
    }],{ 
     text: 'Fruit', 
     items: [{ 
      text: 'Bananas', 
      leaf: true 
     },{ 
      text: 'Lemon', 
      leaf: true 
     }] 
    },{ 
     text: 'Snacks', 
     items: [{ 
      text: 'Nuts', 
      leaf: true 
     },{ 
      text: 'Pretzels', 
      leaf: true 
     },{ 
      text: 'Wasabi Peas', 
      leaf: true 
     }] 
    },{ 
     text: 'Empty Category', 
     items: [] 
    }] 
}; 

我如何图像添加到列表中？例如，如果我想让可口可乐标志旁边的字符串饮食焦炭。我试着在里面设置一个html图像，但这只是给了我一个空白的项目。尽管有“text”属性，但我无法找到如何操作列表项的任何信息。我知道这是可能的，因为我看到一个包含联系人列表和联系人照片的例子。

我希望你能提前帮助我，谢谢你。

Answer 1

您可以将额外的字段添加到Ext.regModel，因此您想添加一个来保存图像的路径。

您可以将任何您想要的HTML添加到列表itemTpl，以便您可以在其中添加图像。

以下示例来自sencha api docs，我将其修改为使用图像，以便您了解如何添加它们。

希望有帮助！

Ext.setup({ 
     icon: 'icon.png', 
     glossOnIcon: false, 
     onReady: function() { 



      Ext.regModel('Contact', { 
       fields: ['firstName', 'lastName', 'imgURL'] 
      }); 

      var store = new Ext.data.JsonStore({ 
       model : 'Contact', 
       sorters: 'lastName', 

       getGroupString : function(record) { 
        return record.get('lastName')[0]; 
       }, 

       data: [ 
        {firstName: 'Tommy', lastName: 'Maintz', imgURL:'myImage.png'}, 
        {firstName: 'Rob',  lastName: 'Dougan', imgURL:'myImage.png'}, 
        {firstName: 'Ed',  lastName: 'Spencer', imgURL:'myImage.pngg'}, 
        {firstName: 'Jamie', lastName: 'Avins', imgURL:'myImage.png'}, 

       ] 
      }); 

      var list = new Ext.List({ 
       fullscreen: true, 

       itemTpl : '<img src="{imgURL}" width="20" heigh="20"></img><span>{firstName} {lastName}</span>', 
       //grouped : true, 
       //indexBar: true, 

       store: store 
      }); 
      list.show(); 


     } 
    });