Using template to display list Items

Question

I am using sencha touch 2.2.1 . I want to display list items in such way that the title of the item appears on left and its value appears on right. For that I am using itemTpl in which I am using 'table' tag. But the width of the column changes according to the content of the column irrespective of the width given to the columns.

Please find my code below:

   {
            xtype: 'list',
            flex: 1,
            ui: 'round',
            data:[
                { title:'Descriptions', text: 'Change MP3 System'},
                { title:'Priority', text: 'Very High'},
                { title: 'Change Coord', text: 'Eudes Canuto'},
                { title: 'Target Data', text: '20.08.2013'},
                { title: 'LOB', text: 'Electronice'},
                { title: 'Major Change', text: 'Yes'},
                { title:'Risk', text: 'High'}
            ],
            itemTpl: new Ext.XTemplate(
                    '<table style="border:1px solid black; border-spacing: 10px;">',
                        '<tpl for=".">',
                            '<tr>',
                                '<td style="border:1px solid black;padding: 30px;">{title}</td>',
                                '<td style="border:1px solid black;padding: 30px;">{text}</td>',
                            '</tr>',
                        '</tpl>',
                    '</table>'                      
            )
        }

Is there any other way to specify the width of the columns so that the content will get adjusted with equal spacing inside the column irrespective of its contents?

Answer 1

It is not a good idea to use tables in your template. It is much easier to format your items with divs. Tables are for tabular data (ie. like a spreadsheet), not layouts.