Archive

Posts Tagged ‘row color’

ExtJS 4 grid row u boji

januar 30th, 2012 No comments

Prikazću dva načina kako možete da određenom redu Grid objekta promenite boju .

getRowClass() način
Prilikom definisanja Grid objekta potrebno je dodati sekciju viewConfig na sledeći način:

	
viewConfig : {
    getRowClass: function (record, rowIndex, rowParams, store)
    {
        if (record.get(ELEMENT_LISTE) == VREDNOST) return CSS_KLASA;
    }
}

U okviru navedenog koda, postoje 3 promenljive kojima je potrebno dodeliti konkretne vrednosti prilikom implementacije. To su:

  • ELEMENT_LISTE, element Store objekta koji se smešta u Grid objekat. navodi se pod navodnicima, npr. record.get(‘status’)
  • VREDNOST, konkretna vrednost sa kojom poredimo element u listi
  • CSS_KLASA, CSS klasa koja će biti implementirana ukoliko je uslov ispunjen. Navodi se pod navidnicima.

Po potrebi je moguće implementirati više uslova kako bi se linije u Grid objektu obojile u više različitih boja, ili koristiti switch() iskaz koji to omogućava.

grid renderer način
Ukoliko je potrebno promeniti izgled samo neke od ćelija u liniji moramo koristiti renderer atribut u okviru columns configurisanja grid objekta. Podešavanje ćelije kojoj želimo da promenimo izgled bi moglo da se podesi na sledeći način:

    columns : [
        { dataIndex:'column1', renderer:function(v, md, r) 
            {
                if (r.data.status == 0) 
                    md.style = 'background-color: #ffdddd !important;'; return '<b>'+v+'<\/b>'; 
            } 
        },
        { dataIndex:'column2' }
    ],

Renderer atribut se koristi kada želimo da promenimo izgled konkretne ćelije. Prilikom poziva funkcije koja će izvršiti tu promenu prosleđujemo vrednosti koje su nam neophodne za rad. Ukupan broj promenljivih koje je moguće navesti za verziju ExtJS 4 je sedam i njihov opis je sledeći:

  • value – trenutna vrednost ćelije
  • metaData – objekat koji ukazuje na trenutnu ćeliju
  • record – objekat koji sadrži vrednosti svih ćelija trenutne linije
  • rowIndex – broj koji definiše koja je to linija po redu
  • colIndex – broj koji definiše koja je to kolona u liniji
  • store – kompletan sadržaj vrednosti koje su prosleđene Grid objektu
  • view – objekat za trenutni prikaz grid-a

Uglavnom se vrši prosleđivanje samo prve promenljive koja predstavlja trenutnu vrednost ćelije, ili kao u navedenom primeru prve tri. Druga promenljiva prosleđuje objekat trenutne ćelije što je neophodno ukoliko želimo da promenimo njen dizajn, treća prosleđuje sve vrednosti trenutne linije što nam omogućava da u zavisnosti od neke vrednosti (u navedenom primeru je to status) izvršimo promenu izgleda ćelije.