add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / simple-tasks / app / controller / Lists.js

/**\r
 * @class SimpleTasks.controller.Lists\r
 * @extends Ext.app.Controller\r
 */\r
Ext.define('SimpleTasks.controller.Lists', {\r
    extend: 'Ext.app.Controller',\r
\r
    models: ['List'],\r
    stores: ['Lists', 'Tasks'],\r
\r
    views: [\r
        'lists.Tree',\r
        'lists.ContextMenu',\r
        'Toolbar'\r
    ],\r
\r
    refs: [\r
        {\r
            ref: 'listTree',\r
            selector: 'listTree'\r
        },\r
        {\r
            ref: 'taskGrid',\r
            selector: 'taskGrid'\r
        },\r
        {\r
            ref: 'taskForm',\r
            selector: 'taskForm'\r
        },\r
        {\r
            ref: 'contextMenu',\r
            selector: 'listsContextMenu',\r
            xtype: 'listsContextMenu',\r
            autoCreate: true\r
        }\r
    ],\r
\r
    init: function() {\r
        var me = this,\r
            listsStore = me.getListsStore();\r
\r
        me.control({\r
            '[iconCls=tasks-new-list]': {\r
                click: me.handleNewListClick\r
            },\r
            '[iconCls=tasks-new-folder]': {\r
                click: me.handleNewFolderClick\r
            },\r
            '[iconCls=tasks-delete-list]': {\r
                click: me.handleDeleteClick\r
            },\r
            '[iconCls=tasks-delete-folder]': {\r
                click: me.handleDeleteClick\r
            },\r
            'listTree': {\r
                afterrender: me.handleAfterListTreeRender,\r
                edit: me.updateList,\r
                completeedit: me.handleCompleteEdit,\r
                canceledit: me.handleCancelEdit,\r
                deleteclick: me.handleDeleteIconClick,\r
                selectionchange: me.filterTaskGrid,\r
                taskdrop: me.updateTaskList,\r
                listdrop: me.reorderList,\r
                itemmouseenter: me.showActions,\r
                itemmouseleave: me.hideActions,\r
                itemcontextmenu: me.showContextMenu\r
            }\r
        });\r
\r
        if(listsStore.isLoading()) {\r
            listsStore.on('load', me.handleListsLoad, me);\r
        } else {\r
            me.handleListsLoad(listsStore);\r
        }\r
        listsStore.on('write', me.syncListsStores, me, {\r
            buffer: 1\r
        });\r
    },\r
\r
    /**\r
     * Handles a click on the "New List" button or context menu item.\r
     * @param {Ext.Component} component\r
     * @param {Ext.EventObject} e\r
     */\r
    handleNewListClick: function(component, e) {\r
        this.addList(true);\r
    },\r
\r
    /**\r
     * Handles a click on the "New Folder" button or context menu item.\r
     * @param {Ext.Component} component\r
     * @param {Ext.EventObject} e\r
     */\r
    handleNewFolderClick: function(component, e) {\r
        this.addList();\r
    },\r
\r
    /**\r
     * Adds an empty list to the lists store and starts editing the new list\r
     * @param {Boolean} leaf    True if the new node should be a leaf node.\r
     */\r
    addList: function(leaf) {\r
        var me = this,\r
            listTree = me.getListTree(),\r
            cellEditingPlugin = listTree.cellEditingPlugin,\r
            selectionModel = listTree.getSelectionModel(),\r
            selectedList = selectionModel.getSelection()[0],\r
            parentList = selectedList.isLeaf() ? selectedList.parentNode : selectedList,\r
            newList = Ext.create('SimpleTasks.model.List', {\r
                name: 'New ' + (leaf ? 'List' : 'Folder'),\r
                leaf: leaf,\r
                loaded: true // set loaded to true, so the tree won't try to dynamically load children for this node when expanded\r
            }),\r
            expandAndEdit = function() {\r
                if(parentList.isExpanded()) {\r
                    selectionModel.select(newList);\r
                    me.addedNode = newList;\r
                    cellEditingPlugin.startEdit(newList, 0);\r
                } else {\r
                    listTree.on('afteritemexpand', function startEdit(list) {\r
                        if(list === parentList) {\r
                            selectionModel.select(newList);\r
                            me.addedNode = newList;\r
                            cellEditingPlugin.startEdit(newList, 0);\r
                            // remove the afterexpand event listener\r
                            listTree.un('afteritemexpand', startEdit);\r
                        }\r
                    });\r
                    parentList.expand();\r
                }\r
            };\r
            \r
        parentList.appendChild(newList);\r
        listTree.getStore().sync();\r
        if(listTree.getView().isVisible(true)) {\r
            expandAndEdit();\r
        } else {\r
            listTree.on('expand', function onExpand() {\r
                expandAndEdit();\r
                listTree.un('expand', onExpand);\r
            });\r
            listTree.expand();\r
        }\r
    },\r
\r
    /**\r
     * Handles the list list's "edit" event.\r
     * Updates the list on the server whenever a list record is updated using the tree editor.\r
     * @param {Ext.grid.plugin.CellEditing} editor\r
     * @param {Object} e                                an edit event object\r
     */\r
    updateList: function(editor, e) {\r
        var me = this,\r
            list = e.record;\r
\r
        list.save({\r
            success: function(list, operation) {\r
                // filter the task list by the currently selected list.  This is necessary for newly added lists\r
                // since this is the first point at which we have a primary key "id" from the server.\r
                // If we don't filter here then any new tasks that are added will not appear until the filter is triggered by a selection change.\r
                me.filterTaskGrid(me.getListTree().getSelectionModel(), [list]);\r
            },\r
            failure: function(list, operation) {\r
                var error = operation.getError(),\r
                    msg = Ext.isObject(error) ? error.status + ' ' + error.statusText : error;\r
\r
                Ext.MessageBox.show({\r
                    title: 'Update List Failed',\r
                    msg: msg,\r
                    icon: Ext.Msg.ERROR,\r
                    buttons: Ext.Msg.OK\r
                });\r
            }\r
        });\r
    },\r
    \r
    /**\r
     * Handles the list tree's complete edit event\r
     * @param {Ext.grid.plugin.CellEditing} editor\r
     * @param {Object} e                                an edit event object\r
     */\r
    handleCompleteEdit: function(editor, e){\r
        delete this.addedNode;\r
    },\r
\r
    /**\r
     * Handles the list tree's cancel edit event\r
     * removes a newly added node if editing is cancelled before the node has been saved to the server\r
     * @param {Ext.grid.plugin.CellEditing} editor\r
     * @param {Object} e                                an edit event object\r
     */\r
    handleCancelEdit: function(editor, e) {\r
        var list = e.record,\r
            parent = list.parentNode,\r
            added = this.addedNode;\r
\r
        delete this.addedNode;\r
        if (added === list) {\r
            // Only remove it if it's been newly added\r
            parent.removeChild(list);\r
            this.getListTree().getStore().sync();\r
            this.getListTree().getSelectionModel().select([parent]);\r
        }\r
    },\r
\r
    /**\r
     * Handles a click on a delete icon in the list tree.\r
     * @param {Ext.tree.View} view\r
     * @param {Number} rowIndex\r
     * @param {Number} colIndex\r
     * @param {Ext.grid.column.Action} column\r
     * @param {EventObject} e\r
     */\r
    handleDeleteIconClick: function(view, rowIndex, colIndex, column, e) {\r
        this.deleteList(view.getRecord(view.findTargetByEvent(e)));\r
    },\r
\r
    /**\r
     * Handles a click on the "Delete List" or "Delete Folder" button or menu item\r
     * @param {Ext.Component} component\r
     * @param {Ext.EventObject} e\r
     */\r
    handleDeleteClick: function(component, e) {\r
        this.deleteList(this.getListTree().getSelectionModel().getSelection()[0]);\r
    },\r
\r
    /**\r
     * Deletes a list from the server and updates the view.\r
     * @param {SimpleTasks.model.List} list\r
     */\r
    deleteList: function(list) {\r
        var me = this,\r
            listTree = me.getListTree(),\r
            listName = list.get('name'),\r
            selModel = listTree.getSelectionModel(),\r
            tasksStore = me.getTasksStore(),\r
            listsStore = me.getListsStore(),\r
            isLocal = SimpleTasks.Settings.useLocalStorage,\r
            tasks;\r
\r
        Ext.Msg.show({\r
            title: 'Delete List?',\r
            msg: 'Are you sure you want to permanently delete the "' + listName + '" list and all its tasks?',\r
            buttons: Ext.Msg.YESNO,\r
            fn: function(response) {\r
                if(response === 'yes') {\r
                    // recursively remove any tasks from the store that are associated with the list being deleted or any of its children.\r
                    (function deleteTasks(list) {\r
                        tasks = tasksStore.queryBy(function(task, id) {\r
                            return task.get('list_id') === list.get('id');\r
                        });\r
                        tasksStore.remove(tasks.getRange(0, tasks.getCount()), !isLocal);\r
\r
                        list.eachChild(function(child) {\r
                            deleteTasks(child);\r
                        });\r
                    })(list);\r
\r
                    // destroy the tree node on the server\r
                    list.parentNode.removeChild(list);\r
                    listsStore.sync({\r
                        failure: function(batch, options) {\r
                            var error = batch.exceptions[0].getError(),\r
                                msg = Ext.isObject(error) ? error.status + ' ' + error.statusText : error;\r
\r
                            Ext.MessageBox.show({\r
                                title: 'Delete List Failed',\r
                                msg: msg,\r
                                icon: Ext.Msg.ERROR,\r
                                buttons: Ext.Msg.OK\r
                            });\r
                        }\r
                    });\r
\r
                    if(isLocal) {\r
                        // only need to sync the tasks store when using local storage.\r
                        // when using an ajax proxy we will allow the server to handle deleting any tasks associated with the deleted list(s)\r
                        tasksStore.sync();\r
                    }\r
\r
                    // If there is no selection, or the selection no longer exists in the store (it was part of the deleted node(s))\r
                    // then select the "All Lists" root\r
                    if (!selModel.hasSelection() || !listsStore.getNodeById(selModel.getSelection()[0].getId())) {\r
                        selModel.select(0);\r
                    }\r
                    \r
                    // refresh the list view so the task counts will be accurate\r
                    listTree.refreshView();\r
                }\r
            }\r
        });\r
\r
    },\r
\r
    /**\r
     * Handles the list tree's "selectionchange" event.\r
     * Filters the task store based on the selected list.\r
     * @param {Ext.selection.RowModel} selModel\r
     * @param {SimpleTasks.model.List[]} lists\r
     */\r
    filterTaskGrid: function(selModel, lists) {\r
        if (lists.length === 0) {\r
            return;\r
        }\r
        \r
        var list = lists[0],\r
            tasksStore = this.getTasksStore(),\r
            listIds = [],\r
            deleteListBtn = Ext.getCmp('delete-list-btn'),\r
            deleteFolderBtn = Ext.getCmp('delete-folder-btn'),\r
            i = 0;\r
\r
        // build an array of all the list_id's in the hierarchy of the selected list\r
        list.cascadeBy(function(list) {\r
            listIds.push(list.get('id'));\r
        });\r
\r
        tasksStore.addFilter({\r
            property: "list_id",\r
            value: new RegExp('^' + listIds.join('$|^') + '$')\r
        });\r
\r
        // set the center panel's title to the name of the currently selected list\r
        this.getTaskGrid().setTitle(list.get('name'));\r
\r
        // enable or disable the "delete list" and "delete folder" buttons depending on what type of node is selected\r
        if(list.get('id') === -1) {\r
            deleteListBtn.disable();\r
            deleteFolderBtn.disable();\r
        } else if(list.isLeaf()) {\r
            deleteListBtn.enable();\r
            deleteFolderBtn.disable();\r
        } else {\r
            deleteListBtn.disable();\r
            deleteFolderBtn.enable();\r
        }\r
\r
        // make the currently selected list the default value for the list field on the new task form\r
        this.getTaskForm().query('[name=list_id]')[0].setValue(list.get('id'));\r
    },\r
\r
    /**\r
     * Handles the list view's "taskdrop" event.  Runs when a task is dragged and dropped on a list.\r
     * Updates the task to belong to the list it was dropped on.\r
     * @param {SimpleTasks.model.Task} task       The Task record that was dropped\r
     * @param {SimpleTasks.model.List} list       The List record that the mouse was over when the drop happened\r
     */\r
    updateTaskList: function(task, list) {\r
        var me = this,\r
            listId = list.get('id');\r
\r
        // set the tasks list_id field to the id of the list it was dropped on\r
        task.set('list_id', listId);\r
        // save the task to the server\r
        task.save({\r
            success: function(task, operation) {\r
                // refresh the lists view so the task counts will be updated.\r
                me.getListTree().refreshView();\r
            },\r
            failure: function(task, operation) {\r
                var error = operation.getError(),\r
                    msg = Ext.isObject(error) ? error.status + ' ' + error.statusText : error;\r
\r
                Ext.MessageBox.show({\r
                    title: 'Move Task Failed',\r
                    msg: msg,\r
                    icon: Ext.Msg.ERROR,\r
                    buttons: Ext.Msg.OK\r
                });\r
            }\r
        });\r
    },\r
\r
    /**\r
     * Handles the list view's "listdrop" event.  Runs after a list is reordered by dragging and dropping.\r
     * Commits the lists new position in the tree to the server.\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
    reorderList: function(list, overList, position) {\r
        var listsStore = this.getListsStore();\r
\r
        if(SimpleTasks.Settings.useLocalStorage) {\r
            listsStore.sync();\r
        } else {\r
            Ext.Ajax.request({\r
                url: 'php/list/move.php',\r
                jsonData: {\r
                    id: list.get('id'),\r
                    relatedId: overList.get('id'),\r
                    position: position\r
                },\r
                success: function(response, options) {\r
                    var responseData = Ext.decode(response.responseText);\r
\r
                    if(!responseData.success) {\r
                        Ext.MessageBox.show({\r
                            title: 'Move Task Failed',\r
                            msg: responseData.message,\r
                            icon: Ext.Msg.ERROR,\r
                            buttons: Ext.Msg.OK\r
                        });\r
                    }\r
                },\r
                failure: function(response, options) {\r
                    Ext.MessageBox.show({\r
                        title: 'Move Task Failed',\r
                        msg: response.status + ' ' + response.statusText,\r
                        icon: Ext.Msg.ERROR,\r
                        buttons: Ext.Msg.OK\r
                    });\r
                }\r
            });\r
        }\r
        \r
        // refresh the lists view so the task counts will be updated.\r
        this.getListTree().refreshView();\r
    },\r
\r
    /**\r
     * Handles the initial tasks store "load" event,\r
     * refreshes the List tree view then removes itself as a handler.\r
     * @param {SimpleTasks.store.Tasks} tasksStore\r
     * @param {SimpleTasks.model.Task[]} tasks\r
     * @param {Boolean} success\r
     * @param {Ext.data.Operation} operation\r
     */\r
    handleTasksLoad: function(tasksStore, tasks, success, operation) {\r
        var me = this,\r
            listTree = me.getListTree(),\r
            selectionModel = listTree.getSelectionModel();\r
\r
        // refresh the lists view so the task counts will be updated.\r
        listTree.refreshView();\r
        // filter the task grid by the selected list\r
        me.filterTaskGrid(selectionModel, selectionModel.getSelection());\r
        // remove the event listener after the first run\r
        tasksStore.un('load', this.handleTasksLoad, this);\r
    },\r
\r
    /**\r
     * Handles the initial lists store "load" event,\r
     * selects the list tree's root node if the list tree exists, loads the tasks store, then removes itself as a handler.\r
     * @param {SimpleTasks.store.Lists} listsStore\r
     * @param {SimpleTasks.model.List[]} lists\r
     * @param {Boolean} success\r
     * @param {Ext.data.Operation} operation\r
     */\r
    handleListsLoad: function(listsStore, lists, success, operation) {\r
        var me = this,\r
            listTree = me.getListTree(),\r
            tasksStore = me.getTasksStore();\r
        \r
        if(listTree) {\r
            // if the list tree exists when the lists store is first loaded, select the root node.\r
            // when using a server proxy, the list tree will always exist at this point since asyncronous loading of data allows time for the list tree to be created and rendered.\r
            // when using a local storage proxy, the list tree will not yet exist at this point, so we'll have to select the root node on render instead (see handleAfterListTreeRender)\r
            listTree.getSelectionModel().select(0);\r
        }\r
        // wait until lists are done loading to load tasks since the task grid's "list" column renderer depends on lists store being loaded\r
        me.getTasksStore().load();\r
        // if the tasks store is asynchronous (server proxy) attach load handler for refreshing the list counts after loading is complete\r
        // if local storage is being used, isLoading will be false here since load() will run syncronously, so there is no need\r
        // to refresh the lists view because load will have happened before the list tree is even rendered\r
        if(tasksStore.isLoading()) {\r
            tasksStore.on('load', me.handleTasksLoad, me);\r
        }\r
        // remove the event listener after the first run\r
        listsStore.un('load', me.handleListsLoad, me);\r
    },\r
\r
    /**\r
     * Handles the list tree's "afterrender" event\r
     * Selects the lists tree's root node, if the list tree exists\r
     * @param {SimpleTasks.view.lists.Tree} listTree\r
     */\r
    handleAfterListTreeRender: function(listTree) {\r
        listTree.getSelectionModel().select(0);\r
    },\r
\r
    /**\r
     * Handles the lists store's write event.\r
     * Syncronizes the other read only list stores with the newly saved data\r
     * @param {SimpleTasks.store.Lists} listsStore\r
     * @param {Ext.data.Operation} operation\r
     */\r
    syncListsStores: function(listsStore, operation) {\r
        var me = this,\r
            stores = [\r
                Ext.getStore('Lists-TaskGrid'),\r
                Ext.getStore('Lists-TaskEditWindow'),\r
                Ext.getStore('Lists-TaskForm')\r
            ],\r
            storesLen = stores.length,\r
            records = operation.getRecords(),\r
            recordsLen = records.length, \r
            i, j, listToSync, node, list, store;\r
            \r
        for (i = 0; i < recordsLen; ++i) {\r
            list = records[i];\r
            for (j = 0; j < storesLen; ++j) {\r
                store = stores[j];\r
                if (store) {\r
                    listToSync = store.getNodeById(list.getId());\r
                    switch(operation.action) {\r
                        case 'create':\r
                            node = store.getNodeById(list.parentNode.getId()) || store.getRoot();\r
                            node.appendChild(list.copy(list.getId()));\r
                            break;\r
                        case 'update':\r
                            if(listToSync) {\r
                                listToSync.set(list.data);\r
                                listToSync.commit();\r
                            }\r
                            break;\r
                        case 'destroy':\r
                            if(listToSync) {\r
                                listToSync.remove(false);\r
                            }\r
                    }\r
                }\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Handles a mouseenter event on a list tree node.\r
     * Shows the node's action icons.\r
     * @param {Ext.tree.View} view\r
     * @param {SimpleTasks.model.List} list\r
     * @param {HTMLElement} node\r
     * @param {Number} rowIndex\r
     * @param {Ext.EventObject} e\r
     */\r
    showActions: function(view, list, node, rowIndex, e) {\r
        var icons = Ext.fly(node).query('.x-action-col-icon');\r
        if(view.getRecord(node).get('id') > 0) {\r
            Ext.each(icons, function(icon){\r
                Ext.get(icon).removeCls('x-hidden');\r
            });\r
        }\r
    },\r
\r
    /**\r
     * Handles a mouseleave event on a list tree node.\r
     * Hides the node's action icons.\r
     * @param {Ext.tree.View} view\r
     * @param {SimpleTasks.model.List} list\r
     * @param {HTMLElement} node\r
     * @param {Number} rowIndex\r
     * @param {Ext.EventObject} e\r
     */\r
    hideActions: function(view, list, node, rowIndex, e) {\r
        var icons = Ext.fly(node).query('.x-action-col-icon');\r
        Ext.each(icons, function(icon){\r
            Ext.get(icon).addCls('x-hidden');\r
        });\r
    },\r
\r
    /**\r
     * Handles the list tree's itemcontextmenu event\r
     * Shows the list context menu.\r
     * @param {Ext.grid.View} view\r
     * @param {SimpleTasks.model.List} list\r
     * @param {HTMLElement} node\r
     * @param {Number} rowIndex\r
     * @param {Ext.EventObject} e\r
     */\r
    showContextMenu: function(view, list, node, rowIndex, e) {\r
        var contextMenu = this.getContextMenu(),\r
            newListItem = Ext.getCmp('new-list-item'),\r
            newFolderItem = Ext.getCmp('new-folder-item'),\r
            deleteFolderItem = Ext.getCmp('delete-folder-item'),\r
            deleteListItem = Ext.getCmp('delete-list-item');\r
\r
        if(list.isLeaf()) {\r
            newListItem.hide();\r
            newFolderItem.hide();\r
            deleteFolderItem.hide();\r
            deleteListItem.show();\r
        } else {\r
            newListItem.show();\r
            newFolderItem.show();\r
            if(list.isRoot()) {\r
                deleteFolderItem.hide();\r
            } else {\r
                deleteFolderItem.show();\r
            }\r
            deleteListItem.hide();\r
        }\r
        contextMenu.setList(list);\r
        contextMenu.showAt(e.getX(), e.getY());\r
        e.preventDefault();\r
    }\r
\r
});\r