Archive

Posts Tagged ‘ExtJS 4’

Dodavanje QTip-a na GridPanel ćeliju u ExtJS 4.0

novembar 8th, 2014 No comments

Potrebno je da dodate tooltip (quick tip) na ćeliju Grid objekta u ExtJS 4.0? Prilikom definisanja kolone, potrebno je da dodate atribut „rendered“, kome prosledite funkciju.

...
columns [
    ...
    {
      text:"Bookmark", 
      dataIndex:"title", 
      flex:1, 
      renderer:function(value,metaData) 
      {
        metaData.tdAttr = 'data-qtip="' + value + '"';
        return value;
      }
    },
    ...
}
...

Par napomena:

  1. Da bi prikazali tooltip, potrebno je da dodate liniju „Ext.QuickTips.init();“ pre definicanja Grid objekta kojom inicijalizujete prikazivanje tooltip-ova
  2. data-qtip je jedan od četiri atributa za tooltip. Tooltip atributi su:
    • data-qtip – tekst tooltip-a
    • data-qtitle – naslov tooltip-a
    • data-qwidth – širina tolltip-a
    • data-qalign – Definiše poziciju tooltipa u odnosu na original. Primer: „tl-br“ definiše da se gornji-levi ugao tooltip-a prikazuje dole-desno u odnosu na original

Sa malo modififikacije, dobićete fin tooltip izgenerisan za svaku ćeliju u Grid objektu.

Categories: JavaScript Tags: , ,

Extjs4 stablo (de)selektovanje svih tačaka

oktobar 20th, 2014 No comments

Ukoliko koristite Extjs treePanel sa checkbox kako bi selektovali elemente, evo rešenja kako da selektujete/deselektujete sve elemente u stablu.

Primer za selektovanje:

Ext.getCmp('tree-list').getRootNode().cascade(function(n) 
{
    n.set("checked",true); 
});

Primer za deselektovanje:

Ext.getCmp('tree-list').getRootNode().cascade(function(n) 
{
    n.set("checked",false); 
});
Categories: JavaScript Tags: ,

Extjs promena pozadinske boje ćelije grid objekta u zavisnosti od vrednosti

oktobar 20th, 2014 No comments

Ukoliko je potrebno promeniti boju jedne ćelije Grid objekta, koristite renderer atribut.
Primer: Pretpostavimo da imamo ćeliju koja ima brojčanu vrednost. Ukoliko je ta vrednost veća od 0 onda je pozadinska boja zelena, u suprotnom je crvene boje.
Evo dela koda koji to opisuje

renderer : function(v, md) 
{
    if(parseInt(v) > 0)
        md.style = "background-color:green;";
    else
        md.style = "background-color:red;";
}

ExtJS 4 – Tree Grid sa linijama

maj 14th, 2013 No comments

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