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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
Demo application showing LazyLoading File store.
-->
<html>
<head>
<title>Demo: dojox.data.FileStore</title>
<style type="text/css">
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
.fileView {
margin: 5px;
width: 100%;
}
.fileView .fileViewTitle{
color: white;
background-color: black;
font-size: larger;
font-weight: bold;
}
.fileView .fileViewTable {
border-width: 2px;
border-style: solid;
width: 100%;
}
.fileView .fileViewTable tr td {
border-width: 1px;
border-style: solid;
border-color: lightgray;
width: 50%;
vertical-align: top;
}
.fileView .fileName {
background-color: lightgray;
}
</style>
<!--
The following script tag instantiates the dojo library and sets some basic properties. In this case, the application
is told that debug mode is off, and to parse all dojoType widgets when it has fully loaded.
-->
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true, useCommentedJson: true"></script>
<script type="text/javascript" src="../../../dijit/dijit.js"></script>
<script>
dojo.require("dijit.Tree");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojox.data.FileStore");
dojo.require("dojox.data.demos.widgets.FileView");
dojo.require("dijit.Menu");
</script>
</head>
<body class="tundra">
<h1>
Demo: Lazy Loading File Browsing Store
</h1>
<p>The tree below uses the dojox.data.FileStore and a PHP implementation for the serverside to browse the dojo tree hierarchy in a lazy-load fashion.</p>
<p><i><b>This demo must be run from a web-server with PHP support enabled. Without PHP support, this demo cannot function.</b></i></p>
<hr>
<i>Clicking on a file in the tree will display the details about that file.</i>
<div dojoType="dojox.data.FileStore" url="stores/filestore_dojotree.php" jsId="fileStore" pathAsQueryParam="true"></div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="fileModel"
store="fileStore" query="{}"
rootId="DojoFiles" rootLabel="Dojo Files" childrenAttrs="children"></div>
<ul dojoType="dijit.Menu" id="tree_menu" style="display: none;">
<li dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</li>
<li dojoType="dijit.MenuItem" disabled="true">Disabled Item</li>
<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
onClick="alert('not actually cutting anything, just a test!')">Cut</li>
<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
onClick="alert('not actually copying anything, just a test!')">Copy</li>
<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
onClick="alert('not actually pasting anything, just a test!')">Paste</li>
<li dojoType="dijit.PopupMenuItem">
<span>Enabled Submenu</span>
<ul dojoType="dijit.Menu" id="submenu2">
<li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li>
<li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li>
<li dojoType="dijit.PopupMenuItem">
<span>Deeper Submenu</span>
<ul dojoType="dijit.Menu" id="submenu4">
<li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</li>
<li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</li>
</ul>
</li>
</ul>
</li>
<li dojoType="dijit.PopupMenuItem" disabled="true">
<span>Disabled Submenu</span>
<ul dojoType="dijit.Menu" id="submenu3" style="display: none;">
<li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li>
<li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li>
</ul>
</li>
</ul>
<table style="width: 100%;">
<tbody>
<tr style="width: 100%;">
<td style="width: 50%; vertical-align: top;">
<span id="tree" dojoType="dijit.Tree" model="fileModel" >
<script type="dojo/connect">
var menu = dijit.byId("tree_menu");
// when we right-click anywhere on the tree, make sure we open the menu
menu.bindDomNode(this.domNode);
</script>
<script type="dojo/method" event="onClick" args="item">
if (fileStore.isItem(item)){
var attachPt = dojo.byId("fileInfo");
if (attachPt) {
while(attachPt.firstChild) {
attachPt.removeChild(attachPt.firstChild);
}
var newArgs = {};
newArgs.name = fileStore.getValue(item, "name");
newArgs.path = fileStore.getValue(item, "path");
newArgs.size = fileStore.getValue(item, "size");
newArgs.directory = fileStore.getValue(item, "directory");
newArgs.parentDir = fileStore.getValue(item, "parentDir");
var children = fileStore.getValues(item, "children");
if (children && children.length > 0) {
newArgs.children = [];
var i;
for (i = 0; i < children.length; i++) {
//Note here that even though the store is lazy-loading, the unloaded items for children still
//have the 'name' attribute, since it is used as part of the info to load the full item. Generally
//you should not access properties of an item that has not been fully inflated yet. It just works
//well in this case for this store.
newArgs.children.push(fileStore.getValue(children[i], "name"));
}
}
var fInfo = new dojox.data.demos.widgets.FileView(newArgs);
attachPt.appendChild(fInfo.domNode);
fInfo.startup();
}
}
</script>
</span>
</td>
<td id="fileInfo" STYLE="width: 50%; vertical-align: top;">
</td>
</tr>
</tbody>
</table>
<hr>
</body>
</html> |
Hierarchie tree Dojo ne fonctionnant pas
Répondre avec citation
Envoyé par amiral
Partager