Archive

Archive for the ‘JavaScript’ Category

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

U ExtJS 4.2 hidden polje zauzima prostor

maj 21st, 2013 No comments

ExtJS 4.2 je već neko vreme među nama i kao svaka prva veća verzija ima sitnih grešaka. Jedna od njih je i ta da skrivena polja u formi, nisu potpuno skrivena. Polja se ne vide, ali zato se vidi tabela u okviru koje se polje nalazi i time stvara nekih 3-5px visine za svako sakriveno polje.

Greška je već uočena od strane ljudi iz Sencha tima i biće ispravljena u narednoj verziji. U međuvremenu evo jednostavnog načina kako to da zakrpite. U okviru CSS fajla koji koristite za svoje stilove ubacite sledeću liniju

.x-form-item-hidden { display:none; }

Navedeni stil se nalazi u okviru gore pomenute tabele. Na ovaj način će hidden polje stvarno postati u potpunosti sakriveno.

Detaljnije o problemu možete pogledati na lokaciji

ExtJS 4 – Tree Grid sa linijama

maj 14th, 2013 No comments

ExtJS 4 vam daje mogućnost da kombinujete dva objekta: stablo (Tree) i tabelarni prikaz (Grid). Ovaj efekat postižete tako što prilikom kreiranja objekta stabla dodate „column“ atribut i u okviru njega navedete kolone koje želite da prikažete, onako kako bi to uradili i za tabelarni prikaz. Ono što ne funkcioniše jesu linije koje razdvajaju redove, kakve tabelarni prikaz ima standardno.

null

Ukoliko želite da prikažete linije potrebno je da kreirate dodatni CSS stil koji ćete potom uključiti u okviru konfiguracionog dela stabla. Za ovu priliku ću kreirati dva stila:

.border-line > td {
  border-bottom: 1px solid #eee !important;
}
.border-cell > td {
  border-bottom: 1px solid #eee !important;
  border-right: 1px solid #eee !important;
}

Drugi korak je poziv odgovarajućeg stila na sledeći način:

viewConfig: {
  getRowClass: function(record) { return 'border-line'; }
}

Navedeni kod će kreirati liniju ispod svakog reda stabla što otprilike izgleda ovako:

line

A ukoliko stil „border-line“ zamenite sa „border-cell„, dobićete efekat sličan sledećoj slici:

cell

jqTransform izmena opcija select taga

mart 10th, 2013 1 comment

jqTransform je dodatak (plugin) za jQuery koji omogućava da dodatno stilizujete vaše forme. Ukoliko su u pitanju statične forme sve funkcioniše kako treba, možete čak implementirati dodatke za validaciju i sl. Ukoliko je potrebno da promenite sadržaj neke od lista select taga, dolazi do problema. Promenom liste se ne vrši njeno automatsko prikazivanje i u njenoj vizuelno promenjenom izgledu. Razlog je taj što se promenili listu, ali je ona sakrivena i potrebno je nekako saopštiti jqTransform dodatku da želite da je osvežite.

U tu svrhu koristite funkciju jqTransSelect(), ali pre toga je potrebno iskomentarisati jednu liniju dodatka. U okviru dodatka pronađite i iskomentarišite liniju

if($select.hasClass('jqTransformHidden')) {return;}

A potom u okviru neke od javascript funkcija osvežite listu na sledeći način

$('#selectID').jqTransSelect(); // gde je selectID ID select taga

Evo malo detaljnijeg primera kako bi sve to moglo da se uradi, zajedno sa promenom liste.

<script language="javascript">
function setPersons()
{
  var persons = $('#personen').val();
  var data = $('#sessie').val();
  data = data.split('-');
  var selectList = "<option value=''>Select element</option>";
  for (var i =1; i <= 5; i++)
    selectList += "<option value='" + i + "'>" + i + "</option>";
  $('#selectID').html(selectList).jqTransSelect();
}

javascript in_array()

mart 10th, 2013 No comments

Za one koji su navikli na PHP funkciju in_array() evo kako da tu funkcionalnost kreiraju u JavaScript-u:

Array.prototype.in_array = function(p_val) 
{
  for(var i = 0, l = this.length; i < l; i++) {
    if(this[i] == p_val) return true;
  }
  return false;
}

// example
var v_array = [ 5, 10, 15, 20, 25];
document.writeln(v_array.in_array(10)); // will return 

Detaljnije pogledajte na originalnoj lokaciji

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