如何在Sencha touch的每一行中製作多列的列表？

我想要在每一行中有多列的列表。該行也可以組成圖像。我能夠從商店獲得價值。但無法以適當的方式顯示它們。我需要的視圖象下面這樣：如何在Sencha touch的每一行中製作多列的列表？

enter image description here

請幫助。在此先感謝

2012-07-09 Arindam Mukherjee

以下是我該怎麼做。爲列表創建一個視圖，如下所示。不知道你是如何創建你的意見，所以添加額外的代碼，如果你仍然有麻煩。

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

來源

2012-07-09 20:16:33

我試圖用下面的代碼：itemTpl：Ext.create（ 'Ext.XTemplate'， \t \t \t '

{firstName}

{lastName}

{heading}

' \t \t \t \t \t \t \t \t \t \t \t），但字段來了一個垂直接連一次 – 2012-07-10 10:37:25

當然會。 Divs佔用父級的寬度。更何況，
是一個換行符，這也會導致更多的空間。你需要使用類似於我上面的東西來使其正常工作。嘗試像下面這樣的小東西 '

{firstName}

{lastName}

' 如果您使用div，我所擁有的style標籤是必不可少的。嘗試查找一些基本的HTML。最後Sencha只不過是html，css和javascript。 – 2012-07-10 14:26:12

查看上面的例子 - 我用更多的信息更新了它。 – 2012-07-10 14:48:51

嘗試使用div結構意味着根據您的數據div內的div。

來源

2012-07-10 20:51:52 Ayesha

如何在Sencha touch的每一行中製作多列的列表？

回答

相關問題