0

我已经使用Sencha Touch实现了一个电话间隙应用程序，

I Want to add 4 columns in a list它自己如下图所示

在此处输入图像描述.

现在我使用了 4 个宽度为 25% 的不同列表...，

但我需要在每行中显示 4 列，并在一个列表中。

还有更多在这里我提到标题也作为数据，但是我们如何在每列的单独标题中提到标题。

我的代码可以显示但无效：

   extend: 'Ext.Panel',

   config: {
   layout: {
   type: 'vbox'
   },
   items: [
           {
           xtype: 'toolbar',
           docked: 'top',
           title: 'Color Fields',

           },
                {
           xtype: 'list',
           height: 243,
           margin: '',
           left: 0,
           ui: '',
           width: '20%',

           itemTpl: [
                     '<div><b>{Cloumn1}<b></div>'
                     ],


           data: [
                  {Cloumn1: 'SerialNum' },
                  {Cloumn1: '1'},
                  {Cloumn1: '1'},
                  {Cloumn1: '2'}
                  ]
           },
           {
           xtype: 'list',
           height: 243,
           margin: '',
           left: '25%',
           top: 0,
           ui: '',
           width: '20%',

           itemTpl: [
                     '<div><b>{Cloumn2}<b></div>'
                     ],


           data: [
                  {Cloumn2: 'Color' },
                  {Cloumn2: 'Red'},
                  {Cloumn2: 'Blue'},
                  {Cloumn2: 'White'}
                  ]

           },
           {
           xtype: 'list',
           height: 243,
           margin: '',
           left: '50%',
           top: 0,
           ui: '',
           width: '20%',

           itemTpl: [
                     '<div><b>{Cloumn3}<b></div>'
                     ],


           data: [
                  {Cloumn3: 'Box Type' },
                  {Cloumn3: 'Rectangle'},
                  {Cloumn3: 'Trianger'},
                  {Cloumn3: 'Circle'}
                  ]
           },
4

2 回答 2

1 
xtype:'list',
itemTpl: Ext.create('Ext.XTemplate',
    '<div width = "100%">',
        '<div align="center" style="display: inline-block;overflow: hidden;width: 25%;word-wrap:break-word;max-width:25%; vertical-align:top;">{column1}</div>',
        '<div align="center" style="display: inline-block;overflow: hidden;width: 25%;word-wrap:break-word;max-width:25%; vertical-align:top;">{column2}</div>',
        '<div align="center" style="display: inline-block;overflow: hidden;width: 25%;word-wrap:break-word;max-width:25%; vertical-align:top;">{column3}</div>',
        '<div align="center" style="display: inline-block;overflow: hidden;width: 25%;word-wrap:break-word;max-width:25%; vertical-align:top;">{column4}</div>',
    '</div>'
),
于 2013-01-21T07:42:52.193 回答
1

使用 Mitchell Simoens 的网格扩展。这是链接

于 2012-08-03T02:41:56.420 回答