煎茶列表與列線

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