Home > JavaScript > ExtJS 4 – Tree Grid sa linijama

ExtJS 4 – Tree Grid sa linijama

ExtJS 4 vam daje mogućnost da kombinujete dva objekta: stablo (Tree) i tabelarni prikaz (Grid). Ovaj efekat postižete tako što prilikom kreiranja objekta stabla dodate „column“ atribut i u okviru njega navedete kolone koje želite da prikažete, onako kako bi to uradili i za tabelarni prikaz. Ono što ne funkcioniše jesu linije koje razdvajaju redove, kakve tabelarni prikaz ima standardno.

null

Ukoliko želite da prikažete linije potrebno je da kreirate dodatni CSS stil koji ćete potom uključiti u okviru konfiguracionog dela stabla. Za ovu priliku ću kreirati dva stila:

.border-line > td {
  border-bottom: 1px solid #eee !important;
}
.border-cell > td {
  border-bottom: 1px solid #eee !important;
  border-right: 1px solid #eee !important;
}

Drugi korak je poziv odgovarajućeg stila na sledeći način:

viewConfig: {
  getRowClass: function(record) { return 'border-line'; }
}

Navedeni kod će kreirati liniju ispod svakog reda stabla što otprilike izgleda ovako:

line

A ukoliko stil „border-line“ zamenite sa „border-cell„, dobićete efekat sličan sledećoj slici:

cell

  1. No comments yet.
  1. No trackbacks yet.