source: Dev/trunk/src/client/dojox/grid/tests/test_treegrid_model.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 9.0 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3    <head>
4        <title>dojox.grid.TreeGrid Model-based test</title>
5        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
6        <style type="text/css">
7            @import "../../../dojo/resources/dojo.css";
8            @import "../../../dijit/themes/claro/claro.css";
9            @import "../../../dojox/grid/resources/Grid.css";
10            @import "../../../dojox/grid/resources/claroGrid.css";
11            .grid {
12                width: 70em;
13                height: 40em;
14            }
15        </style>
16        <script type="text/javascript" src="../../../dojo/dojo.js"  data-dojo-config="isDebug:true, parseOnLoad: true"></script>
17        <script type="text/javascript">
18            dojo.require("dojox.grid.TreeGrid");
19            dojo.require("dijit.tree.ForestStoreModel");
20            dojo.require("dojo.data.ItemFileWriteStore");
21            dojo.require("dijit.form.Button");
22            dojo.require("dojo.parser");
23            var dataItems = {
24                identifier: 'id',
25                label: 'name',
26                items: [
27                    { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
28                        timezone: '-1 UTC to +4 UTC',
29                        children:[{_reference:'EG'}, {_reference:'KE'}, {_reference:'SD'}] },
30                    { id: 'EG', name:'Egypt', type:'country' },
31                    { id: 'KE', name:'Kenya', type:'country',
32                        children:[{_reference:'Nairobi'}, {_reference:'Mombasa'}] },
33                    { id: 'Nairobi', name:'Nairobi', type:'city' },
34                    { id: 'Mombasa', name:'Mombasa', type:'city' },
35                    { id: 'SD', name:'Sudan', type:'country',
36                        children:{_reference:'Khartoum'} },
37                    { id: 'Khartoum', name:'Khartoum', type:'city' },
38                    { id: 'AS', name:'Asia', type:'continent',
39                        children:[{_reference:'CN'}, {_reference:'IN'}, {_reference:'RU'}, {_reference:'MN'}] },
40                    { id: 'CN', name:'China', type:'country' },
41                    { id: 'IN', name:'India', type:'country' },
42                    { id: 'RU', name:'Russia', type:'country' },
43                    { id: 'MN', name:'Mongolia', type:'country' },
44                    { id: 'OC', name:'Oceania', type:'continent', population:'21 million',
45                        children:{_reference:'AU'}},
46                    { id: 'AU', name:'Australia', type:'country', population:'21 million'},
47                    { id: 'EU', name:'Europe', type:'continent',
48                        children:[{_reference:'DE'}, {_reference:'FR'}, {_reference:'ES'}, {_reference:'IT'}] },
49                    { id: 'DE', name:'Germany', type:'country' },
50                    { id: 'FR', name:'France', type:'country' },
51                    { id: 'ES', name:'Spain', type:'country' },
52                    { id: 'IT', name:'Italy', type:'country' },
53                    { id: 'NA', name:'North America', type:'continent',
54                        children:[{_reference:'MX'}, {_reference:'CA'}, {_reference:'US'}] },
55                    { id: 'MX', name:'Mexico', type:'country',  population:'108 million', area:'1,972,550 sq km',
56                        children:[{_reference:'Mexico City'}, {_reference:'Guadalajara'}] },
57                    { id: 'Mexico City', name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC'},
58                    { id: 'Guadalajara', name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC' },
59                    { id: 'CA', name:'Canada', type:'country',  population:'33 million', area:'9,984,670 sq km',
60                        children:[{_reference:'Ottawa'}, {_reference:'Toronto'}] },
61                    { id: 'Ottawa', name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC'},
62                    { id: 'Toronto', name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC' },
63                    { id: 'US', name:'United States of America', type:'country' },
64                    { id: 'SA', name:'South America', type:'continent',
65                        children:[{_reference:'BR'}, {_reference:'AR'}] },
66                    { id: 'BR', name:'Brazil', type:'country', population:'186 million' },
67                    { id: 'AR', name:'Argentina', type:'country', population:'40 million' }
68                ]};
69                        var dataItems2 = dojo.clone(dataItems);
70
71            function add_item(child, parentId){
72                if(child){
73                    jsonStore.fetchItemByIdentity({
74                        identity: parentId,
75                        onItem: function(item){
76                            if(item){
77                                continentModel.newItem(child, item);
78                            }
79                        }
80                    });
81                }
82            }
83
84                        dojo.addOnLoad(function(){
85                                var layout = [
86                                        { name: "Name", field: "name", width: "auto" },
87                                        { name: "Population", field: "population", width: "auto" },
88                                        { name: "Timezone", field: "timezone", width: "auto" }
89                                ];
90                                var jsonStore2 = new dojo.data.ItemFileWriteStore({ data: dataItems2 });
91                                var treeModel2 = new dijit.tree.ForestStoreModel({
92                                        store: jsonStore2,
93                                        query: { type: 'continent' },
94                                        rootId: 'continentRoot',
95                                        rootLabel: 'Continents',
96                                        childrenAttrs: ['children']
97                                });
98                                var grid2 = new dojox.grid.TreeGrid({
99                                        treeModel: treeModel2,
100                                        structure: layout,
101                                        defaultOpen: true
102                                }, 'programmatic_grid');
103                                grid2.startup();
104                                dojo.connect(window, "onresize", grid2, "resize");
105                        });
106        </script>
107    </head>
108    <body class="claro">
109        <h1 class="testTitle">Test: dojox.grid.TreeGrid - Model-based</h1>
110        <span dojoType="dojo.data.ItemFileWriteStore"
111              data-dojo-id="jsonStore" data="dataItems">
112        </span>
113
114        <div dojoType="dijit.tree.ForestStoreModel" data-dojo-id="continentModel"
115        store="jsonStore" query="{type:'continent'}"
116        rootId="continentRoot" rootLabel="Continents" childrenAttrs="children"></div>
117
118        <h4 class="testSubtitle">dojox.grid.TreeGrid n-Level</h4>
119        <button dojoType="dijit.form.Button">
120            Add Belgium
121            <script type="dojo/connect" data-dojo-event="onClick">
122                add_item({ id: 'EU_BE', name: 'Belgium', type: 'country' }, "EU");
123                                this.set("disabled", true);
124            </script>
125        </button>
126        <button dojoType="dijit.form.Button">
127            Delete Italy
128            <script type="dojo/connect" data-dojo-event="onClick">
129                                jsonStore.fetchItemByIdentity({
130                                        identity: 'IT',
131                                        onItem: function(item){
132                                                if(item){
133                                                        jsonStore.deleteItem(item);
134                                                }
135                                        }
136                                });
137                                this.set("disabled", true);
138            </script>
139        </button>
140        <button dojoType="dijit.form.Button">
141            Add California
142            <script type="dojo/connect" data-dojo-event="onClick">
143                add_item({ id: 'US_CA', name: 'California', type: 'state' }, "US");
144                                delCal.attr("disabled", false);
145                                this.set("disabled", true);
146            </script>
147        </button>
148        <button dojoType="dijit.form.Button" disabled data-dojo-id="delCal">
149            Delete California
150            <script type="dojo/connect" data-dojo-event="onClick">
151                                jsonStore.fetchItemByIdentity({
152                                        identity: 'US_CA',
153                                        onItem: function(item){
154                                                if(item){
155                                                        jsonStore.deleteItem(item);
156                                                }
157                                        }
158                                });
159                                this.set("disabled", true);
160            </script>
161        </button>
162        <button dojoType="dijit.form.Button" data-dojo-id="delEU">
163            Delete Europe
164            <script type="dojo/connect" data-dojo-event="onClick">
165                                jsonStore.fetchItemByIdentity({
166                                        identity: 'EU',
167                                        onItem: function(item){
168                                                if(item){
169                                                        jsonStore.deleteItem(item);
170                                                }
171                                        }
172                                });
173                                this.set("disabled", true);
174            </script>
175        </button>
176        <button dojoType="dijit.form.Button" data-dojo-id="empty">
177            Empty
178            <script type="dojo/connect" data-dojo-event="onClick">
179                                jsonStore.fetch({
180                                        query: { id: '*' },
181                                        queryOptions: { deep: true },
182                                        onComplete: function(items){
183                                                dojo.forEach(items, function(item){
184                                                        if(item){
185                                                                jsonStore.deleteItem(item);
186                                                        }
187                                                });
188                                        }
189                                });
190                                jsonStore.save();
191                                this.set("disabled", true);
192            </script>
193        </button>
194        <table data-dojo-id="grid" dojoType="dojox.grid.TreeGrid" class="grid" treeModel="continentModel">
195            <thead>
196                <tr>
197                    <th field="name" width="auto">Name</th>
198                    <th field="population" width="auto">Population</th>
199                    <th field="timezone" width="auto">Timezone</th>
200                </tr>
201            </thead>
202        </table>
203                <h4 class="testSubtitle">dojox.grid.TreeGrid Programmatic - defaultOpen true</h4>
204                <div id="programmatic_grid"></div>
205    </body>
206</html>
207
Note: See TracBrowser for help on using the repository browser.