Archive

Archive for the ‘JavaScript’ Category

Prestupna godina

januar 31st, 2015 No comments

Evo primera kako da u Javascript-u na jednostavan nacin u proverite da li je godina prestupna ili ne:

var isLeap = (((cYear%4)==0) || (((cYear%100)!=0) && ((cYear%400)==0)));

gde je cYear promenljiva u kojoj je smestena godina.

Categories: JavaScript Tags:

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

Extjs4 stablo (de)selektovanje svih tačaka

oktobar 20th, 2014 No comments

Ukoliko koristite Extjs treePanel sa checkbox kako bi selektovali elemente, evo rešenja kako da selektujete/deselektujete sve elemente u stablu.

Primer za selektovanje:

Ext.getCmp('tree-list').getRootNode().cascade(function(n) 
{
    n.set("checked",true); 
});

Primer za deselektovanje:

Ext.getCmp('tree-list').getRootNode().cascade(function(n) 
{
    n.set("checked",false); 
});
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;";
}

Extjs 4 textfield koje odobrava samo brojeve

februar 17th, 2014 No comments

ExtJS 4 sadrži polje „numberfield“ koje se koristi za unos brojeva. Ukoliko ej broj cifara prevelik, ovo polje može praviti problema. U tim situacijama, može pomoći tekstualno polje („textfield“) kome treba postaviti filter za unos samo cifara.

Prilikom podešavanja osobina tekstualnog polja dodajte atribut „maskRe“. On vam omogućava da kreirate masku uz pomoć regularnog izraza. Evo maske koja dozvoljava unos samo cifara (i decimalne tačke):

    maskRe:/[0-9.]/
Categories: JavaScript Tags: ,

Podesite pozadinsku boju za kolonu Grid objekta u ExtJS4

avgust 6th, 2013 1 comment

Ukoliko želite da određenu kolonu Grid objekta obojite drugom bojom, npr. crvenom, uradite sledeće:

  • U podešavanjima kolone dodati atribut tdCls:’cell-red’ gde je „cell-red“ CSS klasa i onda
  • U CSS dokumentu u kome se nalaze stilovi za aplikaciju (bitno je da se CSS dokument učitava posle extjs-all.css) dodati sledeću liniju:
    .cell-red	.x-grid-cell-inner	{ background-color:#ffe0e0; } 
    

Ukoliko je potrebno, dodatno modifikujte stil kolone.

Kako onemogućiti da ExtJS forma prosledi „emptyText“?

jul 27th, 2013 No comments

Ukoliko unesete „emptyText“ atribut u polje forme, ne zaboravite da dodate atribut

submitEmptyText: false

u delu za potvrdu forme. Ukoliko ovo ne uradite, tekst atributa „emptyText“ će biti poslat kao regularan tekst.

Primer:

this.up('form').getForm().submit({
	method			: 'POST',
	params			: { kontakti:izmene_kontakti },
	waitMsg			: core_messages.snimanje,
	submitEmptyText	: false,
	...

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.

Uklanjanje dugmeta za osvežavanje iz objekta za straničenje

jul 27th, 2013 No comments

Kada se aktivira straničenje (Pagination objekat) sa Grid objektom, dobija se cela paleta alata za navigaciju. Jednom prilikom sam dobio zahtev da se dugme za osvežavanje isključi iz straničenja i prebaci u Toolbar iznad Grid objekta. Procedura bi mogla da e svede na sledeće:

Prvo je potrebno isključiti dugme za osvežavanje:

...
	bbar: Ext.create('Ext.toolbar.Paging', {
		store			: storeObject,
		displayInfo		: true,
		beforePageText	: 'Page',
		afterPageText	: 'of  {0}',
		displayMsg		: 'Elements {0} - {1} of {2}', 
		emptyMsg		: 'No elements',
		listeners		: { afterrender	: function() { this.child('#refresh').hide(); } }
    }),
...

Ključ je u praćenju događaja „afterRender“, preciznije, da se čeka dok se objekat pojavi na stranici. Onda se vrši sakrivanje dugmeta čiji je itemId „#refresh“. Na identičan način je moguće isključiti bilo koji element iz navigacije.

Posle ovoga, potrebno je ubaciti dugme za osvežavanje u okviru palete alata i dodati atrobut „handler“:

storeObject.pageLoad(storeObject.currentPage);

Kreiranje PHP objekta bez upotrebe klase

jul 20th, 2013 No comments

U okviru JavaScript-a, kreiranje objekta je krajnje jednostavno:

myObj = {};
myObj.abc = "Here we go";

U PHP-u ovo možete uraditi na sledeći način:

$myObj = new stdClass();
$myObj->abc = 'Here we go';