煎茶列表与列线

Question

我们如何创建煎茶列表给出即列线

Answer 1

你可以用类似的方式定义列表如下：

list = { 
    xtype: 'list', 
    itemTpl: [ 
    '<table>', 
     '<tr>', 
     '<td class="first-child">{title}</td>', 
     '<td>{title}</td>', 
     '<td>{title}</td>', 
     '<td>{title}</td>', 
     '<td>{title}</td>', 
     '<td class="last-child">{title}</td>', 
     '</tr>', 
    '</table>'   
    ], 
    emptyText: '<div class="emptytext">Empty list.</div>' 
}; 

然后使用下面的CSS风格的元素：

.x-list .x-list-item { 
    min-height: 0; 
    padding: 0; 
} 

.x-list .x-list-item div table tr td { 
    border-right: 1px solid #000; 
    font-size: 80%; 
    height: 100%; 
    padding: 5px; 
    width: 15%; 
} 

.x-list .x-list-item div table { 
    width: 100%; 
} 

.x-list .x-list-item div table tr .first-child { 
    width: 25%; 
} 

.x-list .x-list-item div table tr .last-child { 
    border-right: none; 
} 

这应该得到Ë你是这样的：

Answer 2

您可以通过米切尔Simoens使用优秀TouchGridPanel插件

https://github.com/mitchellsimoens/Ext.ux.TouchGridPanel