Archive

Posts Tagged ‘grid header icon’

Ikonica u zaglavlju Grid objekta, drugi deo

jun 5th, 2012 No comments

Pre izvesnog vremena sam pisao o tome kako je moguce postaviti ikonicu u zaglavlju grid objekta. Tom prilikom je za iniciranje postavljanja ikonice u određenu kolonu korišćen ID atribut kolone. Mana ovakvog pristupa je u tome što ukoliko imate više grid objekata koji imaju kolone koje se ponavljaju morate da menjate vrednost ID atributa a samim tim i da dodajete nov stil u CSS.

Kako bi se ovaj problem prevazišao, potrebno je CSS stil definisati kao klasu, a zatim u okviru definisanja kolone koristiti CLS atribut. Primer postavljanja ikoice bi bio:

.colFlag .x-column-header-inner
{
    background:transparent url(../../images/icons/famfam/flag_red.png)
    no-repeat 3px 3px !important;
    text-indent:-250px;
}

A zatim prilikom definisanja atributa kolone grid objekta postaviti, npr.:

	
{
    dataIndex:'idTip',
    align:'center',
    header:'Naziv kolone',
    width:24,
    hideable:false,
    menuDisabled:true,
    cls:'colFlag',
    tooltip:'Tekst koji se vidi ukoliko se koristi header tooltip plugin',
}

ExtJS 4: Ikonica u zaglavlju Grid objekta

novembar 13th, 2011 No comments

Prilikom prelaska sa verzije 3 na verziju 4 ExtJS Framework-a dosta stvari nije funkcionisalo. Malo ne logično jer uglavnom su stvari nizbrdo kompatibilne i trebalo bi da novije verzije podrže sve sto su stare verzije radile, ali momci iz Senche su to pravilo ovoga puta preskočili.

Razlog je očigledan, strukturna promena framefork-a je tolika da nije bilo moguće zadržati stari koncept, a i želeli su da kreiraju jezgro koje će biti zajednočko sa Sencha Touch framework-om koji je namenjen izradi aplikacija za mobilne telefone. Neki rez je morao da se napravi.

Kako bilo, promene su napravljene, ostaje da se prilagodimo.

Kako je to rađeno pre

Za one koji još uvek koriste ExtJS 3 i koji žele da prikažu ikonicu u okviru zaglavlja grida, shvatiće da za to ne postoji neka standardna opcija, parametar i sl. Da bi se to ostvarilo potrebno je da se koloni dodeli neki ID npr „colFlag“ , a zatim da se u okviru CSS-a doda nova klasa sa imenom „.x-grid3-hd-colFlag“ (stil ima naziv : .x-grid3-hd-DEFINISANI_ID). Sadržaj klase je sledeći:

.x-grid3-hd-colFlag {
    background:transparent url(../../images/icons/famfam/flag_red.png)
    no-repeat 3px 3px !important;
    text-indent:-250px;
}

Navedeni primer poziva ikonicu veličine 16×16 tačaka koja će biti prikazana u okviru zaglavlja, a navedeni tekst u konfiguracionim delu JavaScripta je pomeren za 250 tačaka na levo kako bi se „izgubio“ iz vidnog dela bloka. Evo i vizuelnog prikaza:

Kako je u verziji 4

U verziji 4 je promenjena struktura stranice koju kreira, verzija 3 je imala u okviru sebe tabele za prikaz headera, dok nova verzija je sve prevela u DIV tagove. Iz tog razloga je došlo i do restruktuiranja naziva ID i CLASS kod elemenata na strani.

U verziji 4 se takođe definiše ID koloni koja se menja, ali se u okviru CSS-a drugačije vrši pozivanje:

#colFlag .x-column-header-inner {
    background:transparent url(../../images/icons/famfam/flag_red.png)
    no-repeat 3px 3px !important;
    text-indent:-250px;
}

Iz navedenog primera se vidi da je potrebno samo izmeniti klasu „.x-column-header-inner“ ali ispred nje se dodaje ID kolone za koju zelimo da ona važi. Na ovaj način se koristi uvek ista klasa ali se podešava opseg njenog delovanja, tj samo u okviru navedenog ID.

Treba voditi računa da ukoliko postoji više Grid objekata na stranici kojima je potrebno definisati istu ikonicu, nije dobro da se postavlja isti ID pošto on mora biti jedinstven i biće potrebno definisati više ID-jeva, npr. colFlag1, colFlag2… i za njih identične stilove u okviru CSS-a.