Archive

Posts Tagged ‘extjs grid’

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: , ,

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

Brisanje slektovanog reda u Grid objektu

jul 27th, 2013 No comments

Evo primera kako jednostavno da obrišete red u okviru Grid objekta:

Potrebno je da imate dugme koje će inicirati akciju. U primeru, dugme je postavljeno u okviru toolbar-a

tbar : [{
    iconCls: 'cross- line ',
    text: 'Delete',
    tooltip:{ title:'Delete Rows' , text: 'Delete selected rows' },
    handler : function(ths, e)
    {
       Ext.Msg.confirm('Delete Confirmation', 'Delete selected rows?', function(btn)
        {
            if (btn == 'yes') {
                store_object.remove( ths.up('grid').
                                          getView().
                                          getSelectionModel().
                                          getSelection() );
            }
        });
    }
}]

Ukoliko korisnik potvrdi brisanje, selektovani redovi će biti uklonjeni iz skladista podataka. Kako bi došli do selektovanih redova, potrebno je proći kroz strukturu.

Promenljiva „ths“ je prva u seriji. Ona ukazuje na dugme koje smo pritisli. Dugme je deop Grid objekta. Funkcija up(‘grid’) uzima prvi Grid objekat koji je iznad u hijerarhiji (roditelj). Na sličan način se mogu zahtevati i drugi objektu, npr. stablo ili forma. Kada smo dosegli do Grid objekta, uzimamo selektovane redove.