views:

1208

answers:

0

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!