使用模板显示列表项

时间:2013-10-08 07:08:13

标签: css css3 html-table sencha-touch sencha-touch-2

我正在使用sencha touch 2.2.1。我想以这样的方式显示列表项,即项目的标题显示在左侧,其值显示在右侧。为此我使用itemTpl,其中我使用'table'标签。但是,无论列的宽度如何,列的宽度都会根据列的内容而变化。

请在下面找到我的代码:

   {
            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>'                      
            )
        }

是否还有其他方法可以指定列的宽度,以便在列内部以相等的间距调整内容,而不管其内容如何?

1 个答案:

答案 0 :(得分:1)

在模板中使用表格并不是一个好主意。使用div格式化项目要容易得多。表格用于表格数据(例如电子表格),而不是布局。