Hey!
I am trying to get into Dojo so thought I'd create something I need: a file select component. I have dijit.Tree linked to a modified ForestStoreModel and just display the first level of the tree with each folder item having a temp 'please wait...' file to ensure the folder and '+' appear correctly.
When I click the '+' I re-query the PHP file which builds the JSON string for the tree, passing it the name of the folder and the depth level to ensure I get the correct folder. Looking at the JSON it all looks fine, but I am having trouble replacing the temp file in the folder with the real data for that folder.
Here is my code:
HTML File:
<div dojoType="dojox.data.QueryReadStore" url="http://192.168.1.2/rpc.php?cmd=listFolders" jsId="folderData" id="folderData"></div>
<div dojoType="dojo.data.ItemFileReadStore" url="fileTypes.json" jsId="fileTypes"></div>
<div dojoType="webtop.ForestStoreModel" jsId="model" store="folderData" query="{type:'*'}" rootId="root" rootLabel="/"></div>
<div dojoType="dijit.TitlePane" id="dialog" title="Select Module Archive" style="width: 480px;">
<form action="localhost" dojoType="dijit.form.Form">
<div id="dialogTreeView">
<div dojoType="dijit.Tree" model="model">
<script type="dojo/method" event="onClick" args="item,treeNode">
if(folderData.getValue(item, "type") != "folder")
{
dojo.byId('filename').value = folderData.getLabel(item);
}
</script>
</div>
</div>
<div id="dialogBottomRow" style="width: 100%">
<table border="0" width="100%">
<tr>
<td>Filename:</td>
<td><input dojoType="dijit.form.TextBox" name="filename" id="filename" trim="true" /></td>
<td align="right" valign="bottom">
<button dojoType="dijit.form.Button" label="Select" baseClass="button"></button>
</td>
</tr>
<tr>
<td>Files of type:</td>
<td><input dojoType="dijit.form.ComboBox" name="fileTypeList" store="fileTypes" searchAttr="name" /></td>
<td align="right" valign="top">
<button dojoType="dijit.form.Button" label="Close" baseClass="button"></button>
</td>
</tr>
</table>
</div>
</form>
</div>
Modified ForestStoreModel:
dojo.provide("webtop.ForestStoreModel");
dojo.declare("webtop.ForestStoreModel", dijit.tree.ForestStoreModel, {
getChildren: function(parentItem, complete_cb, error_cb) {
if (parentItem.root == true) {
root = "";
lv = 0;
}
else {
root = this.store.getLabel(parentItem, 'itemId');
lv = this.store.getValue(parentItem, 'level');
}
this.store.fetch({ query: {label: root, level: lv},
onComplete: complete_cb,
onError: error_cb});
// Call superclasses' getChildren
return this.inherited(arguments);
}
});
And my PHP:
function listFolders() {
// if retrieving an existing node's data
if(isset($_GET['label']) && !empty($_GET['label']) && $_GET['label'] !== "/")
{
// content variables
$folder = $_GET['label'];
$level = (isset($_GET['level']) && is_numeric($_GET['level'])) ? $_GET['level'] : 0;
$json = "";
$root = "";
// add new path part to session
$_SESSION['modu']['currentPath'][$level] = $folder;
// build new path
$level ++;
for($i = 0; $i < $level; $i ++)
{
$root .= $_SESSION['modu']['currentPath'][$i] . "/";
}
$root = substr($root, 0, -1);
}
else // otherwise we get the root node data
{
// start json string
$json = '{identifier:"itemId",label:"label",items:[';
// reset to root
$root = substr(ROOT, 0, -1);
unset($_SESSION['modu']['currentPath']);
$_SESSION['modu']['currentPath'] = array($root);
// for assigning first depth folders
$level = 1;
}
// get handle
$dir = opendir($root);
// create json content
getFolderList($json, $dir, $root, $level);
// close and output
closedir($dir);
header("Content-type: application/json");
echo $json;
exit;
}
function getFolderList(&$json = "", &$dir, $root, $level) {
$i = time(); // safe
$files = array(); // for adding files AFTER folders
$ignoreItems = array(".", "..", ".svn", ".htaccess");
// this is false for ROOT
$closeJSON = (empty($json)) ? false : true;
while(false !== ($file = readdir($dir)))
{
if(!in_array($file, $ignoreItems))
{
$type = (is_dir($file)) ? 'folder' : 'file';
if($type == 'folder')
{
$json .= '{itemId: "folder' . $i . '", ';
$json .= 'label: "' . $file . '", ';
$json .= 'type: "folder", ';
$json .= 'level: ' . $level . ', ';
// add a temp file so that folders do not appear as files
$json .= 'children:[{itemId: "tempFile' . $i . '", label: "please wait...", type: "file"}]},';
}
else
{
$files[] = $file;
}
}
$i ++;
}
// time to add files
if(!empty($files))
{
foreach ($files as $file)
{
$json .= '{itemId: "file' . $i . '", label: "' . $file . '", type: "file"},';
$i ++;
}
}
// clean up
$json = trim(substr($json, 0, -1));
if($closeJSON)
{
$json .= "]}";
}
}
So the return for the first folder which just has a single file would return:
{itemId: "file1250057584", label: "index.html", type: "file"}
...which I assumed would simply replace the temp file there.
If anyone has any idea why, or needs to see this working please let me know as I have spent too long on this already, although it has been great Dojo learning :)
Thanks for your time! //erlin!