Prihlásenie





Home Blogy Technológia Dojo.DataGrid s Widget-om
Dojo.DataGrid s Widget-om PDF Vytlačiť E-mail
Napísal Ján Šuňavec   
04.05.2009

Dojo je asi jeden z najlepších JavaScript frameworkov s ktorými som mal možnosť pracovať. Nieje to len jedna knižnica s funkciami, ale má aj sadu vizuálnych komponent. Asi najpoužívanejšia komponenta je DataGrid. Nanešťastie pridať do jedného riadku ďalšiu komponentu je trochu zložité.

Preto si dnes ukážeme, ako integrovať ProgressBar do dojo.DataGrid-u. Výsledok bude vyzerať nejako takto. Uvedený príklad je funkčný pod Dojo 1.3.


Na začiatku treba načítať DOJO a DIJIT súbory a potrebné knižnice. 

<script type='text/javascript' src='http://localhost/dojo/dojo/dojo.js' 
djConfig='parseOnLoad: true, isDebug: false'></script>
<script type='text/javascript' src='http://localhost/dojo/dijit/dijit.js'>
</script>

<script type="text/javascript">
dojo.require("dijit.ProgressBar");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
</script>

HTML stránka, kde je uložený DIV, kam sa grid zobrazí. 

<html>
<head>
</head>
<body id="body" class="tundra" >

    <div id="filelist"></div>

</body>
</html>


Vytvorenie gridu so základnými parametrami. Táto funkcionalita musí byť vykonaná pri načítaní stránky. Všimnite si použitie časti formatter, ktorá sa používa na formátovanie čísel. V našom prípade sa zavolá funkcia makeProgress.


var emptydata = {identifier:'id', label:'filename', items:[]};
var datas = new dojo.data.ItemFileWriteStore({data: emptydata});

var layout = [           
    { field: "filename", name: "Filename", width: 'auto', editable:false },
    { field: "destination", name: "Destination", width: 'auto', editable:false  },
    { field: "progress", name: "Progress", width: "150px", editable:false, 
formatter: makeProgress },
    { field: "size", name: "Size", width: "90px", editable:false  },
    { field: "speed", name: "Speed", width: "90px", editable:false  }
];

var grids = new dojox.grid.DataGrid({
    structure: layout,
    store: datas,
    query: { filename: '*' },
    rowsPerPage: 4
}, 'filelist');

grids.startup();

funkcia makeProgress nerobí nič iné len vráti <DIV> tag. Možno vás napadne prečo nevrátiť rovno <div dojoType="dijit.ProgressBar"></div>. Bohužial, dojo nebude parsovať dojoType a namiesto ProgressBar-u sa vám zobrazí obyčajný div. Takže vrátime DIV tag a o sekundu neskôr zavoláme funkciu buildProgressBar.

function makeProgress(value, rowIndex) {
   var cell = this;

   setTimeout(function() { buildProgressBar(rowIndex, cell); }, 1);

   return '<div></div>';
}

Do div tagu ktorý vracia funkcia formatter sa pripojí ProgressBar, ktorý sme predtým vytvorili, ale len za predpokladu, že ešte neexistuje. Potom sa ešte nastaví správna výška riadku. 

function buildProgressBar(inRowIndex, inCell) {

    var n = inCell.getNode(inRowIndex).firstChild;
    var id = makeProgressBarId(inRowIndex);
    var prog = dijit.byId(id); 

    if (prog) { //Overit ci ProgressBar existuje
        n.appendChild(prog.domNode);
    } else {
        prog = new dijit.ProgressBar({id: id, places: 1, maximum: 100});
        prog.buildRendering();
        n.appendChild(prog.domNode);
        inCell.grid.rowHeightChanged(inRowIndex);
    }   
}

Funkcia vráti unikátne ID pre každý riadok DataGrid-u. Pozor ak chcete použiť viac widget-ou, na jeden riadok, treba funkciu zmeniť.

function makeProgressBarId(inRowIndex) {

    return "filename_pb_" + inRowIndex;

}
   

Celý príklad, ktorý používa DataGrid a ProgressBar pri uploadovaní súborov na server si môžete stiahnuť. Pre správny chod je nutné ešte prikopírovať najnovší dojo toolkit.

index.php
 

Pridať tvoj komentár

Vaše meno:
Nadpis:
Komentár: