html - 如何在 Sencha touch 中制作每行包含多列的列表？

Question

我想要一个每行包含多列的列表。该行还可以包含图像。我能够从商店获得值(value)。但无法以适当的方式显示它们。我需要如下 View :

请帮忙。 提前致谢

Answer 1

下面是我的做法。为列表创建一个 View ，如下所示。 不确定您是如何创建 View 的，因此如果您仍然遇到问题，请添加额外的代码。

Ext.define('AppName.view.CustomList', {
  extend: 'Ext.List',
  xtype: 'customlist',
  config: {
    store: 'StoreName',
    itemTpl: Ext.create('Ext.XTemplate',
                '<div style="float:left; width: 50%">{Column1Name}</div>',
                '<div style="float:left; width: 50%">{Column2Name}</div>',
                '<div style="clear:both"></div>'
        )
  }
});

编辑:以下是您可以使用的布局更新。它应该很近，您可能需要清除:两个另一个地方，我相信这可能更干净，但我只是给您一些可以使用的东西。

 itemTpl: Ext.create('Ext.XTemplate',
            '<div>',
              '<div style="float:left; width: 30%">{firstName}</div>',
              '<div style="float:left; width: 40%">{feedbackHeading}</div>',
              '<div style="float:left; width: 30%">{date}</div>',
            '</div>',
            '<div>',
              '<div style="float:left; width: 30%">{lastName}</div>',
              '<div style="float:left; width: 40%">{feedbackSummary}</div>',
              '<div style="float:left; width: 30%">{location}</div>',
            '</div>',
            '<div style="clear:both"></div>'
    )