Список Сенча со строками столбцов

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

Вы можете использовать отличный плагин TouchGridPanel от Mitchell Simoens

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