Archive

Posts Tagged ‘grid’

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

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