Archive

Posts Tagged ‘column id’

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.