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

Question

我想要一个每行包含多列的列表。该行也可以包含图像。我能够从商店获取值。但无法以正确的方式显示它们。我需要如下视图：

请帮忙。提前致谢

Answer 1

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

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>'
    )

Answer 2

根据您的数据，尝试使用 div 结构意味着 div 内的 div。