CODEWITHSUNDEEP
javascriptcsssencha-touchextjs
heyjii
heyjii

Reputation: 834

Sencha List with column lines

How can we create a sencha list as given ie column lines

enter image description here

Upvotes: 1

Views: 2586

Answers (2)

stan229
stan229

Reputation: 2607

You can use the excellent TouchGridPanel plugin by Mitchell Simoens

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

Upvotes: 1

Moz Morris
Moz Morris

Reputation: 6761

You could define your list in a similar manner to this:

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>'
};

Then use the following CSS to style the elements:

.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;
}

That should give you something like this:

Sencha List - Styled

Upvotes: 2

Related Questions