Archive

Posts Tagged ‘ExtJS’

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

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

jul 27th, 2013 1 comment

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);

Primena Defaults atributa na sve kolone Grid Objekta

jul 20th, 2013 No comments

U gotovo svakom objektu koji ima nabrajanja u okviru ExtJS 4 moguće je zajedničke atribute izdvojite u posebnu, defaults, sekciju. Ovom prilikom navodim primer kako to uraditi za kolone Grid objekta.

Prvo primer bez primene defaults atributa:

var mygrid = Ext.create(''Ext.grid.Panel'', {
    //... store config, other config...
    columns: [
            { header:'ID', dataIndex:'id', width: 65, hidden:true, sortable:true, width:100 },
            { header:'Firma', dataIndex:'company_name', hidden:false, sortable:true, width:100 },
            { header:'Adresa', dataIndex:'company_address', hidden:false, sortable:true, width:100 }
    ]
});

Sada i primer sa primenom defaults atributa:

var mygrid = Ext.create(''Ext.grid.Panel'', {
    //... store config, other config...
    columns: {
        items: [
            { header:'ID', dataIndex:'id', width: 65, hidden:true },
            { header:'Firma', dataIndex:'company_name' },
            { header:'Adresa', dataIndex:'company_address' }
        ],
        defaults: { hidden:false, sortable:true, width:100 }
    }
});
Categories: JavaScript Tags: ,

Problem sa skrolom u ExtJS 4.0.7 Grid objektu

februar 13th, 2013 No comments

Verzija 4 je umesto skrola koji kreira sam pretraživač ubacila svoj skrol. Kod njega se često dešava da se sadržaj „zamrzne“. Verzija 4.1 se vratila na prirodni skrol. Za one koji i dalje koriste neku od 4.0.x verzija evo rešenja:

Ext.define('Ext.ux.grid.Panel', {
  extend: 'Ext.grid.Panel',
 
  initComponent: function()
  {
    var me = this;
    me.callParent(arguments);
    me.on('scrollershow', function(scroller)
    {
      if (scroller && scroller.scrollEl) {
        scroller.clearManagedListeners();
        scroller.mon(scroller.scrollEl,'scroll',scroller.onElScroll,scroller);
      }
    });
  },
 
  onViewRefresh: function()
  {
    var me = this;
    try { me.callParent(); }
    catch (e) {};
  }
});

Ovaj kod stavite pri vrhu stranice, ili sačuvajte kao poseban fajl i učitajte. U svom kodu umesto da objekat pozivate sa

Ext.create('Ext.grid.Panel', { ...

to uradite sa:

Ext.create('Ext.ux.grid.Panel', { ...
Categories: JavaScript Tags: ,

Problem sa maskom za učitavanje kod ComboBox-a

februar 13th, 2013 No comments

Problem je uočljiv kod ExtJS 4.0.7. Dešava se, ne uvek, da prilikom učitavanje dinamične liste za combobox ostane maska za učitavanje. Lista se učita, ali maska ostane preko pa je combobox automatski neupotrebljiv.

Problem je rešen u verziji 4.1, ali za one koji još uvek koriste 4.0.7 evo rešenja. Negde na početku koda, van svih objekata ubacite kod koji prepisuje originalni loadMask atribut:

Ext.override(Ext.LoadMask,
{
    onHide: function() { this.callParent(); }
});

Ovim kodom se automatki rešava problem kod svih combobox polja na strani.

Categories: JavaScript Tags: ,

ExtJS4 Grid Cell click događaj

februar 13th, 2013 No comments

Ukoliko vam je potrebno da se u okviru Grid objekta reaguje klikom na određenu kolonu, a ne ceo red, ovaj događaj je za vas. Prvi put je ubačen u okviru verzije 3. Tom prilikom se preuzima indeks kolone i nemogu se koristiti nazivi kolona koji se koriste za zaglavlje.

Primer dodavanja događaja bi bio:

	
listeners: {
    cellclick: function(gridView,htmlElement,columnIndex,dataRecord)
    {
        if(columnIndex == 3) {
            // Ovde ubacite kod koji ce se izvrsiti
            // kada se klikne na 4. kolonu u Grid objektu
        }
    }
}
Categories: JavaScript Tags: , ,

Tab tooltip u ExtJS4

novembar 24th, 2012 No comments

U trećoj verziji popularnog radnog okruženja je postojao atribut kojim je ovo bilo definisano. U pitanju je tabTip atribut. U verziji 4 je izbačen ali evo dva predloga kako to da uradite.
Prvi je upotrebom tabConfig atributa na sledeći način:

tabConfig : {
    tooltip:'tekst tooltipa'
}

Drugi je upotrebom metode tab objekta na sledeći način:

tabObj.tab.setTooltip('tekst tooltipa');
Categories: JavaScript Tags: ,

ExtJS 4 Selektovanje tacke stabla na osnovu internog ID-a

novembar 24th, 2012 No comments

Jedan od načina da se pristupi elementu u okviru ExtJS strukture je na osnovu njegovog ID-a. Ova metoda je naročito bila zastupljena u verziji 3. Ova metoda podrazumeva upotrebu getCmp() metode na sledeći način:

var element = Ext.getCmp('idName');

Ovakav pristup elementima stabla nije moguć, iako oni imaju definisan ID. Razlog je taj što je ID definisan u okviru stabla njegov interni i nije mu moguće pristupiti direkno van objekta stabla.

Da bi ovo uradili potrebno je koristiti metodu objekta stabla findChild(„attribut type“, „attribut name“, true). Detaljnije o metodi možete pročitati u okviru API dokuemntacije. Evo kratkog primera:

var treepanel = Ext.getCmp(‘treeID’);
var element = treepanel.getRootNode().findChild(„id“,’nodeID’, true);
treepanel.getSelectionModel().select(record);

U navedenom primeru u prvoj liniji selektuje se objekat stabla. U drugoj liniji je prikazano kako se dolazi do željenog elementa. Prvo se koristi metoda koja uzima osnovni (root) element stabla i onda se traži njegov „potomak“ koji ima definisan atribut ID čija vrednost je „nodeID“. Treća linija je primer kako možete da selektujete taj element stabla stvarajući efekat kao da ste na njega kliknuli.

Categories: JavaScript Tags: , ,