Extjs 如何在列表中包含多个列

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

我想在列表中添加4列

如下所示

目前，我使用了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'}
                  ]
           },

extend:'Ext.Panel'，
配置：{
布局：{
类型：“vbox”
},
项目：[
{
xtype:'工具栏'，
停靠：“顶部”，
标题：“颜色字段”，
},
{
xtype:'列表'，
身高：243，
页边空白：''，
左:0,，
用户界面：“”，
宽度：“20%”，
第三方物流：[
“{Cloumn1}”
],
数据：[
{Cloumn1:'SerialNum'}，
{Cloumn1:'1'}，
{Cloumn1:'1'}，
{Cloumn1:'2'}
]
},
{
xtype:'列表'，
高度：243，
页边空白：''，
左：25%，
排名：0，
用户界面：“”，
宽度：“20%”，
第三方物流：[
“{Cloumn2}”
],
数据：[
{Cloumn2:'Color'}，
{Cloumn2:'红色'}，
{Cloumn2:'蓝色'}，
{Cloumn2:'White'}
]
},
{
xtype:'列表'，
身高：243，
页边空白：''，
左：50%，
排名：0，
用户界面：“”，
宽度：“20%”，
第三方物流：[
“{Cloumn3}”
],
数据：[
{Cloumn3:'Box Type'}，
{Cloumn3:'矩形'}，
{Cloumn3:'三角形'}，
{Cloumn3:'圆'}
]
},

使用Mitchell Simoens提供的网格扩展。以下是， itemTpl:Ext.create（'Ext.XTemplate'， '', “{column1}”， “{column2}”， “{column3}”， “{column4}”， '' ),

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