add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / simple-tasks / app / view / lists / Tree.js

/**\r
 * @class SimpleTasks.view.lists.Tree\r
 * @extends Ext.tree.Panel\r
 * The task list view.  A tree that displays all of the task lists.\r
 */\r
Ext.define('SimpleTasks.view.lists.Tree', {\r
    extend: 'Ext.tree.Panel',\r
    xtype: 'listTree',\r
    requires: [\r
        'Ext.grid.plugin.CellEditing',\r
        'Ext.tree.plugin.TreeViewDragDrop',\r
        'Ext.grid.column.Action'\r
    ],\r
    title: 'Lists',\r
    store: 'Lists',\r
    hideHeaders: true,\r
\r
    dockedItems: [\r
        {\r
            xtype: 'toolbar',\r
            dock: 'bottom',\r
            items: [\r
                {\r
                    iconCls: 'tasks-new-list',\r
                    tooltip: 'New List'\r
                },\r
                {\r
                    iconCls: 'tasks-delete-list',\r
                    id: 'delete-list-btn',\r
                    tooltip: 'Delete List'\r
                },\r
                {\r
                    iconCls: 'tasks-new-folder',\r
                    tooltip: 'New Folder'\r
                },\r
                {\r
                    iconCls: 'tasks-delete-folder',\r
                    id: 'delete-folder-btn',\r
                    tooltip: 'Delete Folder'\r
                }\r
            ]\r
        }\r
    ],\r
\r
    viewConfig: {\r
        plugins: {\r
            ptype: 'tasksdragdrop',\r
            dragText: 'Drag to reorder',\r
            ddGroup: 'task'\r
        }\r
    },\r
\r
    /**\r
     * @event deleteclick\r
     * Fires when the delete icon is clicked\r
     * @param {Ext.grid.View} gridView\r
     * @param {Number} rowIndex\r
     * @param {Number} colIndex\r
     * @param {Ext.grid.column.Action} column\r
     * @param {EventObject} e\r
     */\r
\r
    /**\r
     * @event taskdrop\r
     * Fires when a task record is dropped on this grid\r
     * @param {SimpleTasks.model.Task} task       The task record\r
     * @param {SimpleTasks.model.List} list       The list that the task was dropped on\r
     */\r
\r
    /**\r
     * @event listdrop\r
     * Fires when a list record is dropped on this grid\r
     * @param {SimpleTasks.model.List} list         The list that was dropped\r
     * @param {SimpleTasks.model.List} overList     The list that the list was dropped on\r
     * @param {String} position               `"before"` or `"after"` depending on whether the mouse is above or below the midline of the node.\r
     */\r
\r
    initComponent: function() {\r
        var me = this;\r
            \r
        /**\r
         * This Tree Panel's cell editing plugin\r
         * @property cellEditingPlugin\r
         * @type Ext.grid.plugin.CellEditing\r
         */\r
        me.plugins = [me.cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing')];\r
\r
        me.columns = [\r
            {\r
                xtype: 'treecolumn',\r
                dataIndex: 'name',\r
                flex: 1,\r
                editor: {\r
                    xtype: 'textfield',\r
                    selectOnFocus: true,\r
                    allowOnlyWhitespace: false\r
                },\r
                renderer: Ext.bind(me.renderName, me)\r
            },\r
            {\r
                xtype: 'actioncolumn',\r
                width: 24,\r
                icon: 'resources/images/delete.png',\r
                iconCls: 'x-hidden',\r
                tooltip: 'Delete',\r
                handler: Ext.bind(me.handleDeleteClick, me)\r
            }\r
        ];\r
        \r
        me.callParent(arguments);\r
\r
        me.on('beforeedit', me.handleBeforeEdit, me);\r
        me.relayEvents(me.getView(), ['taskdrop', 'listdrop']);\r
\r
    },\r
\r
    /**\r
     * Handles a click on a delete icon\r
     * @private\r
     * @param {Ext.tree.View} treeView\r
     * @param {Number} rowIndex\r
     * @param {Number} colIndex\r
     * @param {Ext.grid.column.Action} column\r
     * @param {EventObject} e\r
     */\r
    handleDeleteClick: function(gridView, rowIndex, colIndex, column, e) {\r
        // Fire a "deleteclick" event with all the same args as this handler\r
        this.fireEvent('deleteclick', gridView, rowIndex, colIndex, column, e);\r
    },\r
\r
    /**\r
     * Handles this grid's "beforeedit" event (relayed from the CellEditing plugin).\r
     * Prevents editing of "All Lists" root by returning false if the record has an id of -1\r
     * @private\r
     * @param {Ext.grid.plugin.CellEditing} editingPlugin       The cell editing plugin\r
     * @param {Object} e                                        an edit event object\r
     */\r
    handleBeforeEdit: function(editingPlugin, e) {\r
        return e.record.get('id') !== -1;\r
    },\r
\r
    /**\r
     * Renderer for the name field.\r
     * Adds the task count after the list name.\r
     * @private\r
     * @param {String} value\r
     * @param {Object} metaData\r
     * @param {SimpleTasks.model.List} list\r
     * @param {Number} rowIndex\r
     * @param {Number} colIndex\r
     * @param {SimpleTasks.store.Lists} store\r
     * @param {Ext.grid.View} view\r
     */\r
    renderName: function(value, metaData, list, rowIndex, colIndex, store, view) {\r
        var tasksStore = Ext.StoreMgr.lookup('Tasks'),\r
            count = 0;\r
\r
        (function countTasks(list) {\r
            count += tasksStore.queryBy(function(task, id) {\r
                // only show count for tasks that are not done\r
                return task.get('list_id') === list.get('id') && task.get('done') === false;\r
            }).getCount();\r
\r
            list.eachChild(function(child) {\r
                countTasks(child);\r
            });\r
        }(list));\r
\r
        return value + ' (' + count + ')';\r
    },\r
\r
    /**\r
     * Triggers the list tree to refresh its view.  This is necessary in two scenarios:\r
     * 1) Since the lists and tasks are loaded asyncrounously, The Lists store may have finished\r
     *    loading before the tasks store.  In this case, the tasks data would not be available so all\r
     *    of the task counts would be rendered as (0).\r
     * 2) When a task is dragged and dropped onto a list, or when a list is deleted the task count won't automatially be updated\r
     *    because none of the data in the lists store actually changed (the renderer gets the count\r
     *    from the tasks store).\r
     *    \r
     * In both situations refreshing the lists view we ensure that the task counts are accurate.\r
     */\r
    refreshView: function() {\r
        // refresh the data in the view.  This will trigger the column renderers to run, making sure the task counts are up to date.\r
        this.getView().refresh();\r
    }\r
\r
\r
\r
});\r