Ako zobraziť dijit v dgride (Dojo)

Tento článok nadväzuje na predchádzajúci, v ktorom bol predstavený spôsob zápisu polí formulára do dgridu. Vo svojej podstate ide o rovnaký princíp ako pri natívnych poliach. Jediný výrazný rozdiel je v tom, že namiesto natívnych polí editora bude použitý dijit.

Dijity na rozdiel od natívnych polí editora ponúkajú ďalšie komponenty, medzi ktoré patrí aj DateTextBox. V nasledujúcom príklade bude demonštrované použitie dijitu CheckBox, aby bolo vidieť, akú malú zmenu stačí vykonať. Prvou zmenou je nahratie dijitu a druhou zámena reťazca s názvom poľa za premennú reprezentujúcu dijit.

Príklad: Aplikovanie dijitu CheckBox do dgridu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
require(["dojo/ready", "dojo/_base/declare", "dgrid/OnDemandGrid", 
"dgrid/editor", "dojo/store/Memory", "dijit/form/CheckBox", 
"dojo/parser"],
    function(ready, declare, OnDemandGrid, editor, Memory, CheckBox) {
 
            ready(function() {
 
                var data = [
                    {checkbox: true, item: "Demo line 1"},
                    {checkbox: false, item: "Demo line 2"},
                    {checkbox: true, item: "Demo line 3"}
                ];
 
                var layout = [
                    editor({
                        field: "checkbox",
                        label: "Checkbox",
                        editor: CheckBox}),
                    {
                        field: "item",
                        label: "Item"
                    }
                ];
 
                var GridMixin = declare([OnDemandGrid]);
                var dgrid = new GridMixin({
                    columns: layout,
                    store: new Memory({data: data})
                }, "dgrid");
            });
        });
require(["dojo/ready", "dojo/_base/declare", "dgrid/OnDemandGrid", 
"dgrid/editor", "dojo/store/Memory", "dijit/form/CheckBox", 
"dojo/parser"],
    function(ready, declare, OnDemandGrid, editor, Memory, CheckBox) {

            ready(function() {

                var data = [
                    {checkbox: true, item: "Demo line 1"},
                    {checkbox: false, item: "Demo line 2"},
                    {checkbox: true, item: "Demo line 3"}
                ];

                var layout = [
                    editor({
                        field: "checkbox",
                        label: "Checkbox",
                        editor: CheckBox}),
                    {
                        field: "item",
                        label: "Item"
                    }
                ];

                var GridMixin = declare([OnDemandGrid]);
                var dgrid = new GridMixin({
                    columns: layout,
                    store: new Memory({data: data})
                }, "dgrid");
            });
        });

Záver

Ako vidieť, aplikovanie dijitov do dgridu je v podstate jednoduché. Stačí poznať princíp pridávania polí formulára rozšírenia editor.

Ako zobraziť dijit v dgride (Dojo)

Záver

Komentáre

Pridať komentár