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

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

Added Dojo 1.9.3 release.
File size: 7.2 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2        "http://www.w3.org/TR/html4/loose.dtd">
3<html>
4        <head>
5        <title>dojox.grid.TreeGrid Lazy-loading for children items test</title>
6        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
7        <style type="text/css">
8            @import "../../../dojo/resources/dojo.css";
9            @import "../../../dijit/themes/claro/claro.css";
10            @import "../../../dojox/grid/resources/Grid.css";
11                        @import "../../../dojox/grid/resources/tundraGrid.css";
12            @import "../../../dojox/grid/resources/claroGrid.css";
13            body {
14                                font-size: 0.9em;
15                                font-family: Geneva, Arial, Helvetica, sans-serif;
16                                padding: 0.5em;
17                        }
18                        .title {
19                                text-align:center;
20                                margin:1em;
21                        }
22                        #grid1 {
23                width: 65em;
24                height: 25em;
25                                border: 1px solid #333333;
26            }
27                        #grid2 {
28                width: 65em;
29                height: 25em;
30                                border: 1px solid #333333;
31            }
32        </style>
33        <script type="text/javascript" src="../../../dojo/dojo.js"  data-dojo-config="isDebug:true, parseOnLoad: true"></script>
34        <script type="text/javascript">
35            dojo.require("dojox.grid.LazyTreeGrid");
36                        dojo.require("dojo.data.ItemFileWriteStore");
37            dojo.require("dijit.tree.ForestStoreModel");
38                        dojo.require("dojox.grid.LazyTreeGridStoreModel");
39                        dojo.require("dijit.form.Button");
40                       
41                        // large dataset
42                        var rows = 5;
43                        var continentItems = [
44                                {name:'South America', type:'continent', population:'', area:''},
45                                {name:'North America', type:'continent', population:'', area:''},
46                                {name:'Asia', type:'continent', population:'', area:''},
47                                {name:'Oceania', type:'continent', population:'', area:''},
48                                {name:'Europe', type:'continent', population:'', area:''}
49                        ];
50                        var continentChildrenList = [];
51                        for(var i=0, l=continentItems.length; i<rows; i++){
52                                continentChildrenList.push(dojo.mixin({ id: 'continent_' + i }, continentItems[i%l]));
53                        }
54                       
55                        rows = 100;
56                        var countryItems = [
57                                {name:'Egypt', type:'country', population:'', area:''},
58                                {name: 'Kenya', type: 'country', population:'', area:''},
59                                {name:'Sudan', type:'country', population:'', area:''},
60                                {name:'China', type:'country' , population:'', area:''},
61                        {name:'India', type:'country' , population:'', area:''},
62                        {name:'Russia', type:'country' , population:'', area:''},
63                        {name:'Mongolia', type:'country', population:'', area:'' },
64                                {name:'Australia', type:'country', population:'21 million', area:''},
65                        {name:'Germany', type:'country', population:'', area:'' },
66                        {name:'France', type:'country', population:'', area:'' },
67                        {name:'Spain', type:'country', population:'', area:'' },
68                        {name:'Italy', type:'country', population:'', area:'' },
69                        {name:'Mexico', type:'country',  population:'108 million', area:'1,972,550 sq km'},
70                                {name:'Canada', type:'country',  population:'33 million', area:'9,984,670 sq km'},
71                                {name:'United States of America', type:'country', population:'', area:'' },
72                                {name:'Brazil', type:'country', population:'186 million', area:'' },
73                        {name:'Argentina', type:'country', population:'40 million', area:'' }
74                        ];
75                       
76                        var countryChildrenList = [];
77                        for(var i=0, l=countryItems.length; i<rows; i++){
78                                countryChildrenList.push(dojo.mixin({ id: 'country_' + i }, countryItems[i%l]));
79                        }
80                       
81                        cityItems = [
82                                {name:'Nairobi', type:'city', population:'', area:''},
83                        {name:'Mombasa', type:'city', population:'', area:''},
84                        {name:'Khartoum', type:'city', population:'', area:''},
85                                {name:'Mexico City', type:'city', population:'19 million', area:'', timezone:'-6 UTC'},
86                        {name:'Guadalajara', type:'city', population:'4 million', area:'', timezone:'-6 UTC' },
87                        {name:'Ottawa', type:'city', population:'0.9 million', area:'', timezone:'-5 UTC'},
88                        {name:'Toronto', type:'city', population:'2.5 million', area:'', timezone:'-5 UTC' },
89                        ];
90                       
91                        var cityChildrenList = [];
92                        for(var i=0, l=cityItems.length; i<rows; i++){
93                                cityChildrenList.push(dojo.mixin({ id: 'city_' + i }, cityItems[i%l]));
94                        }
95
96                        var dataItems = {
97                                identifier: 'id',
98                label: 'name',
99                                items: [
100                                        {id:'Continent', name:'Continent', type:'', population: '', area: '', children: continentChildrenList},
101                                        {id:"Country", name:"Country", type:"", population: '', area: '', children: countryChildrenList},
102                                        {id:"City", name:"City", type:"", population: '', area: '', children: cityChildrenList}
103                                ]
104                        };
105                       
106                        var readStore = new dojo.data.ItemFileReadStore({data: dataItems});
107                        var writeStore = new dojo.data.ItemFileWriteStore({url: "support/countryStore.json?"});
108                        var model1 = new dijit.tree.ForestStoreModel({store: readStore, childrenAttrs: ['children']})
109                        var model2 = new dojox.grid.LazyTreeGridStoreModel({store: writeStore, childrenAttrs: ['children']});
110                       
111                        var layout = [
112                                {name: 'Name', field: 'name', width: 'auto'},
113                                {name: 'Type', field: 'type', width: 'auto'},
114                                {name: 'Population', field: 'population', width: 'auto'},
115                                {name: 'Area', field: 'area', width: 'auto'}
116                        ]
117                       
118                        function refresh(flg){
119                                grid2.refresh(flg);
120                        }
121                        var idx = 0;
122                        function addItem(){
123                                var item = {id:'test_' + idx, name:'test_' + (idx++), type:'', population: '', area: ''};
124                                grid2.store.newItem(item);
125                        }
126                        function addChildItem(){
127                                var parentItem = grid2.selection.getSelected()[0];
128                                if(parentItem){
129                                        var item = {id:'test_child_' + idx, name:'test_child_' + (idx++), type:'', population: '', area: ''};
130                                        grid2.store.newItem(item, {parent: parentItem, attribute: "children"});
131                                }
132                        }
133                        function removeSelected(){
134                                grid2.removeSelectedRows();
135                        }
136                        function expandSelected(){
137                                var item = grid2.selection.getSelected()[0];
138                                if(item){
139                                        grid2.expand(grid2.store.getIdentity(item));
140                                }
141                        }
142                        function collapseSelected(){
143                                var item = grid2.selection.getSelected()[0];
144                                if(item){
145                                        grid2.collapse(grid2.store.getIdentity(item));
146                                }
147                        }
148        </script>
149    </head>
150    <body class="claro">
151        <h1 class="title">Test: dojox.grid.TreeGrid - Lazy-loading for children items</h1>
152                <h2>grid 1</h2>
153                <div id='grid1' data-dojo-id='grid1' dojoType='dojox.grid.LazyTreeGrid' summary="A customized tree grid summary"
154                                structure='layout' treeModel='model1' rowSelector='true'></div>
155                               
156                <h2>grid 2</h2>
157                <div id='grid2' data-dojo-id='grid2' dojoType='dojox.grid.LazyTreeGrid'
158                                structure='layout' treeModel='model2'
159                                keepSelection='true' rowSelector='true'></div>
160               
161                <button dojoType="dijit.form.Button" onClick="refresh(true)">Refresh with state</button>
162                <button dojoType="dijit.form.Button" onClick="refresh(false)">Refresh without state</button>
163                <button dojoType="dijit.form.Button" onClick="addItem()">Add Item</button>
164                <button dojoType="dijit.form.Button" onClick="addChildItem()">Add Child Item</button>
165                <button dojoType="dijit.form.Button" onClick="removeSelected()">Delete Selected</button>
166                <button dojoType="dijit.form.Button" onClick="expandSelected()">Expand Selected</button>
167                <button dojoType="dijit.form.Button" onClick="collapseSelected()">Collapse Selected</button>
168    </body>
169</html>
Note: See TracBrowser for help on using the repository browser.