Question

我使用 Sencha Touch，

实施了手机间隙应用程序

I Want to add 4 columns in a list 自我如下所示

enter image description here

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

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

此外我还提到Headers也作为数据，但我们如何在每个列的单独标题中提到标题。

我的代码用于显示但无效：

   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'}
                  ]
           },

Answer 1

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

Answer 2

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

如何在列表中包含多个列

2 个答案: