Question

I have implemented a phone gap application using Sencha Touch,

I Want to add 4 columns in a list it self as shown bellow

.

For now i used 4 different lists with 25% width…,

But i need to display 4 columns in each row, with in a single list.

And more over Here i mentioned Headers also as data, But how sh’d we mentioned header in a separate header for each column.

My code its working for display but invalid :

   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

Use the grid extension from Mitchell Simoens. Here is the link