Initial Import

sencha-filestorage.info

+<?xml version="1.0"?>
+<!-- Generated by the OpenACS Package Manager -->
+
+<package key="sencha-filestorage" url="http://openacs.org/repository/apm/packages/sencha-filestorage" type="apm_application">
+    <package-name>]project-open[ Sencha Filestorage</package-name>
+    <pretty-plural>]project-open[ Sencha Filestorage</pretty-plural>
+    <initial-install-p>f</initial-install-p>
+    <singleton-p>t</singleton-p>
+    <implements-subsite-p>f</implements-subsite-p>
+    <inherit-templates-p>f</inherit-templates-p>
+    <auto-mount>sencha-filestorage</auto-mount>
+
+    <version name="0.1" url="http://openacs.org/repository/download/apm/sencha-filestorage-0.1.apm">
+        <owner url="mailto:frank.bergmann@project-open.com">Frank Bergmann</owner>
+        <summary>Sencha interface to the OpenACS file storage</summary>
+        <vendor url="http://www.project-open.com/">]project-open[</vendor>
+        <description format="text/plain">Tree-grid for working with files</description>
+        <maturity>0</maturity>
+
+        <provides url="sencha-filestorage" version="0.1"/>
+
+        <callbacks>
+        </callbacks>
+        <parameters>
+        <!-- No version parameters -->
+        </parameters>
+
+    </version>
+</package>

www/file-storage-treemodel.tcl

+# /packages/sencha-filestorage/www/file-storage-treemodel.tcl
+#
+# Copyright (C) 2013 ]project-open[
+#
+# All rights reserved. Please check
+# http://www.project-open.com/license/ for details.
+
+
+# ---------------------------------------------------------------
+# Page Contract
+# ---------------------------------------------------------------
+
+ad_page_contract {
+    @author frank.bergmann@project-open.com
+} {
+    { package_key "file-storage" }
+}
+
+# ---------------------------------------------------------------
+# Defaults & Security
+# ---------------------------------------------------------------
+
+set user_id [ad_maybe_redirect_for_registration]
+
+set file_storage_package_id [db_string fs_pid "select package_id from apm_packages where package_key = :package_key"]
+set file_storage_root_folder [fs::get_root_folder -package_id $file_storage_package_id]
+set objects [fs::get_folder_objects -folder_id $file_storage_root_folder -user_id $user_id]
+
+set names [list]
+foreach o $objects {
+    lappend names [fs::get_object_name -object_id $o]
+}
+
+
+set folder_sql "
+	select	ci.item_id,
+		ci.name,
+		ci.content_type,
+		tree_level(ci.tree_sortkey) as tree_level,
+		cr.title,
+		coalesce(cr.content_length, 0) as content_length,
+		(select count(*) from cr_items child where child.parent_id = ci.item_id) as children
+	from	cr_items folder,
+		cr_items ci
+		LEFT OUTER JOIN cr_revisions cr ON (ci.live_revision = cr.revision_id)
+	where	folder.item_id = :file_storage_root_folder and
+		ci.tree_sortkey between folder.tree_sortkey and tree_right(folder.tree_sortkey)
+	order by ci.tree_sortkey
+"
+
+set items [join [db_list_of_lists asdf $folder_sql] "\n"]
+
+set indent_space "        "
+set min_level 2
+set level $min_level
+db_foreach folder_elements $folder_sql {
+
+    set indent ""
+    for {set i $min_level} {$i < $tree_level} {incr i} { append indent $indent_space }
+
+    set done_p 0
+    # Start a new 'children' list
+    while {$tree_level > $level} {
+	append result "${indent},children: \[\{\n"
+	incr level
+	set done_p 1
+    }
+    # Finish a list of a certain level
+    while {$tree_level < $level} {
+	append result "${indent}\}\]\n"
+	incr level -1
+	set done_p 1
+    }
+    if {!$done_p} {
+	append result "${indent}\}, \{\n"
+    }
+
+    set leaf_json "expanded:true"
+    set icon "task-folder"
+    if {$children == 0} { 
+	set leaf_json "leaf:true" 
+	set icon "task"
+    }
+
+    
+
+    append result "${indent_space}${indent}task:'[ns_quotehtml $name]',
+${indent_space}${indent}duration:$content_length,
+${indent_space}${indent}user:'$content_type',
+${indent_space}${indent}$leaf_json,
+${indent_space}${indent}iconCls:'$icon'\n"
+}
+
+# Finish a list of a certain level
+while {$level > $min_level} {
+    append result "$indent\}\]\n"
+    incr level -1
+    set indent ""
+    for {set i $min_level} {$i < $level} {incr i} { append indent $indent_space }
+}
+
+set result "{\"text\":\".\"\n$result}"
+ns_log Notice $result
+
+doc_return 200 "text/plain" $result

www/treegrid.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <title>TreeGrid Example</title>
+        <link rel="stylesheet" type="text/css" href="/sencha-v411/resources/css/ext-all.css">
+        <link rel="stylesheet" type="text/css" href="/sencha-v411/examples/shared/example.css">
+        <link rel="stylesheet" type="text/css" href="/sencha-v411/examples/ux/css/CheckHeader.css" />
+
+    <!-- GC -->
+
+        <script type="text/javascript" src="/sencha-v411/ext-all-debug-w-comments.js"></script>
+        <script type="text/javascript" src="treegrid.js"></script>
+        <style type="text/css">
+            .task {
+                background-image: url(/sencha-v411/examples/shared/icons/fam/cog.gif) !important;
+            }
+            .task-folder {
+                background-image: url(/sencha-v411/examples/shared/icons/fam/folder_go.gif) !important;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>TreeGrid Example</h1>
+        <p>
+            This example is an advanced tree example. It illustrates:
+        </p>
+        <ul class="feature-list">
+            <li>Multiple headers
+            </li>
+            <li>Preloading of nodes with a single AJAX request
+            </li>
+            <li>Header hiding, showing, reordering and resizing
+            </li>
+            <li>useArrows configuration
+            </li>
+            <li>Keyboard Navigation
+            </li>
+            <li>Discontinguous selection by holding the CTRL key
+            </li>
+            <li>Using custom iconCls
+            </li>
+            <li>singleExpand has been set to true
+            </li>
+        </ul>
+        <p>
+            Note that the js is not minified so it is readable. See <a href="treegrid.js">treegrid.js</a>.
+        </p>
+        <div id="tree-example"></div>
+    </body>
+</html>

www/treegrid.js

+Ext.Loader.setConfig({
+    enabled: true
+});Ext.Loader.setPath('Ext.ux', '/sencha-v411/examples/ux');
+
+Ext.require([
+    'Ext.data.*',
+    'Ext.grid.*',
+    'Ext.tree.*',
+    'Ext.ux.CheckColumn'
+]);
+
+Ext.onReady(function() {
+    Ext.QuickTips.init();
+
+    //we want to setup a model and store instead of using dataUrl
+    Ext.define('Task', {
+        extend: 'Ext.data.Model',
+        fields: [
+            {name: 'task',     type: 'string'},
+            {name: 'user',     type: 'string'},
+            {name: 'duration', type: 'string'},
+            {name: 'done',     type: 'boolean'}
+        ]
+    });
+
+    var store = Ext.create('Ext.data.TreeStore', {
+        model: 'Task',
+        proxy: {
+            type: 'ajax',
+            //the store will get the content from the .json file
+            url: '/sencha-filestorage/file-storage-treemodel'
+        },
+        folderSort: true
+    });
+
+    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
+    var tree = Ext.create('Ext.tree.Panel', {
+        title: 'Core Team Projects',
+        width: 500,
+        height: 300,
+        renderTo: Ext.getBody(),
+        collapsible: true,
+        useArrows: true,
+        rootVisible: false,
+        store: store,
+        multiSelect: true,
+        singleExpand: true,
+        //the 'columns' property is now 'headers'
+        columns: [{
+            xtype: 'treecolumn', //this is so we know which column will show the tree
+            text: 'Task',
+            flex: 2,
+            sortable: true,
+            dataIndex: 'task'
+        },{
+            //we must use the templateheader component so we can use a custom tpl
+            xtype: 'templatecolumn',
+            text: 'Duration',
+            flex: 1,
+            sortable: true,
+            dataIndex: 'duration',
+            align: 'center',
+            //add in the custom tpl for the rows
+            tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
+                formatHours: function(v) {
+                    if (v < 1) {
+                        return Math.round(v * 60) + ' mins';
+                    } else if (Math.floor(v) !== v) {
+                        var min = v - Math.floor(v);
+                        return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
+                    } else {
+                        return v + ' hour' + (v === 1 ? '' : 's');
+                    }
+                }
+            })
+        },{
+            text: 'Assigned To',
+            flex: 1,
+            dataIndex: 'user',
+            sortable: true
+        }, {
+            xtype: 'checkcolumn',
+            header: 'Done',
+            dataIndex: 'done',
+            width: 40,
+            stopSelection: false
+        }, {
+            text: 'Edit',
+            width: 40,
+            menuDisabled: true,
+            xtype: 'actioncolumn',
+            tooltip: 'Edit task',
+            align: 'center',
+            icon: '/sencha-v411/examples/simple-tasks/resources/images/edit_task.png',
+            handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {
+                Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));
+            }
+        }]
+    });
+});