0

SenchaTouchを使用してPhoneGapアプリケーションを実装しました。

I Want to add 4 columns in a list以下に示すようにそれは自己です

ここに画像の説明を入力してください。

今のところ私は25％幅の4つの異なるリストを使用しました...、

ただし、各行に4つの列を表示し、1つのリストに表示する必要があります。

さらに、ここではデータとしてヘッダーについても言及しましたが、各列の個別のヘッダーでヘッダーについて言及したのはどうしてですか。

私のコードは表示には機能しますが無効です：

   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

MitchellSimoensのグリッド拡張機能を使用します。ここにリンクがあります

于 2012-08-03T02:41:56.420 に答える
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 に答える