Archive

Posts Tagged ‘ExtJS’

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 – zamena podataka u postojećem Store objektu

maj 18th, 2012 No comments

U prethodnom postu je prikazano kako možete preuzeti podatke iz Store objekta. Sada ćemo prikazati kako ih možete zameniti sa novim vrednostima. Pogodno ukoliko imate combo polje kome je potrebno promeniti listu u zavisnosti od nekog uslova.

Podaci koje želite da smestite u Store moraju imati sledeću strukturu:

myData = [ ["1", "val1"] , ["2","val2"] ]

Smeštanje podataka možete uraditi na sledeći način:

Ext.getCmp('fieldID').store.loadData(myData)

Gde je „fieldID“ ID elementa forme kome je dodeljen Store objekat.

Categories: JavaScript Tags: ,

ExtJS 4 – preuzimanje podataka iz Store objekta

maj 18th, 2012 No comments

Ukoliko vam je potrebno da preuzmete podatke iz Store objekta, to možete uraditi na sledeći način:

var myData = Ext.pluck(storeObj.data.items, 'data');

Povratna vrednost je dvodimenzionalni niz strukture slične navedenoj:

// myData = [ ["1", "val1"] , ["2","val2"] ]
Categories: JavaScript Tags: ,

ExtJS 4 rowexpander ne pojavljuje skrol

januar 30th, 2012 No comments

RowExpander plugin u okviru ExtJS 4.0.7 ima grešku. Ukoliko ga implementirate u okviru Grid objekta i sve linije se vide, sa desne strane nećete videti skrol. Međutim, ukoliko otvorite neki od detalja i sadržaj postane višlji nego što je maksimalna visina objekta, skrol se i dalje neće pojaviti.

Kako bi ovo regulisali potrebno je ubaciti sledeću liniju u okviru RowExpander.js dokumenta na kraju toggleRow() metode:

	
this.view.refresh();

Ova linija će forsirati osvežavanje grid objekta i samim tim prikazivanje skrola ukoliko je to potrebno.

Dokument RowExpander.js se nalazi u folderu extjs/examples/ux/

Categories: JavaScript Tags: , ,

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.

Šta je hidden, a šta hidable u ExtJS 4 Grid objektu?

januar 8th, 2012 No comments

Prilikom konfigurisanja Grid objekta, obratite pažnju na dva veoma slična atributa: hidden i hideable. Oba mogu imati vrednosti true/false, a namena im je sledeća:

  • hidden – definiše da li će se kolona inicijalno videti ili ne. ovu inicijalnu vrednost kolone je kasnije moguće promeniti kroz zaglavlje Grid objekta,
  • hideable – definiše da li je dozvoljeno datu kolonu sakriti ili ne, ukoliko je false, nije dozvoljeno. Kolona se ne pojavljuje u listi kolona za checkbox-ovima za manipulaciju prikaza vidljivih kolona
Categories: JavaScript Tags: ,

Selektovanje prvog reda Grid objekta u ExtJS 4

januar 8th, 2012 No comments

Ukoliko želite da selektujete prvu kolonu u okviru grid objekta, to možete uraditi na sledeći način:

gridObj.getSelectionModel().select(0);

Ovaj deo koda je najbolje ubaciti u okviru događala load kod učitavanja podataka za Grid objekat. Primer:

storeObj = Ext.create('Ext.data.Store', {
	autoLoad	: true,
	model		: 'UsersModel',
	proxy		: {
		type		: 'ajax',
		actionMethods	: { read:'POST' },
		noCache		: false,
		url		: '/users/get_list_of_users',
		reader		: {
			type		:'json',
			root		:'users',
			totalProperty	:'numUsers'
		}
	},
	listeners	: {
		load	: function(store, rec, successful, operation, obj)
		{
			gridObj.getSelectionModel().select(0);
		}
	}
});
Categories: JavaScript Tags: , ,

ExtJS 4 i FireFox 7

januar 8th, 2012 No comments

Prošlo je već neko vreme od kako je Firefox verzija 7 ugledala svetlost dana. Ono što je interesantno je da od ove verzije je ubačena podrška u okviru CSS-a za  text-overflow.

Projekte koje sam realizovao u ExtJS 4 i koji su u okviru sebe koristili grid objekat sa kolonama u kojima se prikazuju samo ikonice (kao što sam već govorio u okviru Ikonica u zaglavlju Grid objekta) su odjednom dobile tri tackice (…).  Iz nekog razloga sadržaj ćelije nije mogao biti prikazan i umesto trenutnih 25px širine potrebno definisati 29px (iako su ikonice 16x16px).

Posle malo istraživanja sam otkrio da je u pitanju podrška za text-overflow i da je u ExtJS 4 automatski postavljena vrednost ellipsis koja kreira ovakav efekat. Do verzije 7 Firefox nije obrađivao ovu vrednost atributa pa se greška nije videla- Kako bi je otklonili potrebno je da proširite kolonu na 29px, ili da napravite promenu u CSS-u tako što ćete predefinisati stil za ćeliju grida na sledeći način:

.x-grid-cell-inner { text-overflow:clip; }

Na ovaj način isključujete prikazivanje … ukoliko se sadržaj ne može prikazati.

Categories: Browser, JavaScript Tags: ,

ExtJS 4: Tasteri levo/desno/backspace ne funkcionišu u Operi za vtype:’email’

decembar 8th, 2011 No comments

U Opera pretraživaču, ukoliko se u formi koristi vtype atribut, nije bitna vrednost atributa, neki tasteri prestanu da funkcionišu. One koje san detektovao za sada su strelice levo/desno i backspace.

Malo sam tražio po netu i primetio da nisam jedini koji ima taj problem:
http://www.sencha.com/forum/showthread.php?144563-Not-working-cursor-buttons-in-vtype-email-button&p=687793#post687793

Evo koda koji je potrebno smestiti u neki eksterni fajl npr. adv-vtypes.js i pozvati ga u okviru dokumenta gde se radi provera e-mail adrese.

/* Work in ExtJS 4*/
// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.field.VTypes,
{
    // Valid e-mail
    e_mail: function(val, field)
    {
        return /^\\S+@\\S+\\.\\S+$/.test(val);
    },
    e_mailText: 'This field should be an e-mail address in the format "user@example.com"',
});

Prilikom konfigurisanja forme, za dato polje, potrebno je navesti „vtype:’e_mail'“ i provera ispravnosti će funkcionisati.

Kako promeniti hover status linije Grid-a?

novembar 21st, 2011 No comments

U okviru ExtJS 4 Ukoliko želite da se dešava neka promena kada prelazite preko redova u grid objektu, potrebno je da izmenite klasu „.x-grid-row-over .x-grid-cell-inner“. Npr. ukoliko želite da prilikom prelaska preko linije ona bude boldirana potrebno je dodati sledeći kod u okviru vašeg CSS-a:

/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner { font-weight: bold; }

Napomena: Vaš CSS je potrebno učitati posle extjs-all.css.

Categories: JavaScript Tags: , ,