add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / tree / LinearDataTree.js

/**\r
 * This examples shows how heterogeneous models can be read into a TreeStore offering the\r
 * ability to have different entity types at different levels of a tree.\r
 *\r
 * This tree is loaded using a linear sequence of records which look just like the data\r
 * for a regular store. The tree structure is imposed by use of a parentId property in the node's data.\r
 *\r
 * The toolbar is aware of the type of the selected node and knows what kind of new entity\r
 * to add.\r
 */\r
Ext.define('KitchenSink.view.tree.LinearDataTree', {\r
    extend: 'Ext.tree.Panel',\r
\r
    xtype: 'lineardata-tree',\r
\r
    //<example>\r
    exampleTitle: 'Linear Data Geographical Tree',\r
    otherContent: [{\r
        type: 'Store',\r
        path: 'classic/samples/store/LinearGeoData.js'\r
    },{\r
        type: 'Model',\r
        path: 'classic/samples/model/tree/Territory.js'\r
    },{\r
        type: 'Model',\r
        path: 'classic/samples/model/tree/Country.js'\r
    },{\r
        type: 'Model',\r
        path: 'classic/samples/model/tree/City.js'\r
    },{\r
        type: 'Data',\r
        path: 'classic/samples/data/LinearGeoData.js'\r
    }],\r
    //</example>\r
    store: 'LinearGeoData',\r
    rootVisible: false,\r
    animate: false,\r
    frame: true,\r
    title: 'Linear Data Geographical Tree',\r
    width: 650,\r
    height: 400,\r
    reserveScrollbar: true,\r
    columns: [{\r
        xtype: 'treecolumn',\r
        text: 'Name',\r
        dataIndex: 'name',\r
        flex: 1,\r
        sortable: true\r
    }, {\r
        text: 'Type',\r
        renderer: function(v, cellValues, record) {\r
            return record.entityName;\r
        }\r
    }, {\r
        xtype: 'actioncolumn',\r
        iconCls: 'lineardata-tree-area-info',\r
        width: 25,\r
        getTip: function(value, meta, rec, rowIdx, colIdx, store, view) {\r
            // Go up from the view to the owning TreePanel\r
            var panel = view.up('');\r
            return panel.getActionTip.apply(panel, arguments);\r
        },\r
        handler: function(view) {\r
            // Go up from the view to the owning TreePanel\r
            var panel = view.up('');\r
            panel.onDrillAction.apply(panel, arguments);\r
        }\r
    }],\r
\r
    selModel: {\r
        allowDeselect: true,\r
        listeners: {\r
            selectionchange: function(selModel, selection) {\r
                // Go up from the view to the owning TreePanel\r
                var panel = selModel.view.up('');\r
                panel.onSelectionChange.apply(panel, arguments);\r
            }\r
        },\r
        onKeyEnter: function() {\r
            // Go up from the view to the owning TreePanel\r
            var panel = this.view.up('');\r
            panel.down('#new-name').focus();\r
        }\r
    },\r
\r
    bbar: [{\r
        xtype: 'textfield',\r
        itemId: 'new-name',\r
        enableKeyEvents: true,\r
        listeners: {\r
            keydown: function(inputField, e) {\r
                // Go up from the view to the owning TreePanel\r
                var panel = inputField.up('treepanel');\r
                if (e.keyCode === Ext.EventObject.ENTER) {\r
                    if (!panel.down('#add-button').isDisabled()) {\r
                        panel.addClick();\r
                    }\r
                } else if (e.keyCode === Ext.EventObject.TAB && e.shiftKey) {\r
                    e.stopEvent();\r
                    panel.view.focusRow(panel.selModel.getSelection()[0] || 0);\r
                }\r
            }\r
        }\r
    }, {\r
        itemId: 'add-button',\r
        text: 'Add Territory',\r
        handler: function(button) {\r
            // Go up from the view to the owning TreePanel\r
            var panel = button.up('treepanel');\r
            panel.addClick();\r
        }\r
    }],\r
\r
    addClick: function() {\r
        var target = this.selModel.getSelection()[0] || this.getRootNode(),\r
            inputField = this.down('#new-name'),\r
            value = inputField && inputField.getValue(),\r
            store = this.getStore(),\r
            node;\r
\r
        if (value) {\r
            if (store.getNodeById(value)) {\r
                Ext.Msg.alert('Error', 'A node with this name already exists.');\r
                return;\r
            }\r
            node = {\r
                name: value\r
            };\r
\r
            if (target.isRoot() ) {\r
                //Nothing selected -- adding new Territory\r
                node.children = [];\r
                node.mtype = 'Territory';\r
            } else if (target instanceof KitchenSink.model.tree.Territory) {\r
                // Programatically added - must not try to load over Ajax\r
                node.children = [];\r
                node.mtype = 'Country';\r
            } else if (target instanceof KitchenSink.model.tree.Country) {\r
            // Adding to the Country level - that is our leaf level\r
                node.leaf = true;\r
                node.mtype = 'City';\r
            }\r
            \r
            node = target.appendChild(node);\r
\r
            // User might want to see what they've just added!\r
            if (!target.isExpanded()) {\r
                target.expand(false);\r
            }\r
            this.selModel.select(node);\r
            inputField.reset();\r
        }\r
    },\r
\r
    onSelectionChange: function(selModel, selection) {\r
        var button = this.down('#add-button'),\r
            selectedNode;\r
\r
        if (selection.length) {\r
            selectedNode = selection[0];\r
            if (selectedNode instanceof KitchenSink.model.tree.Territory) {\r
                this.addClass = KitchenSink.model.tree.Country;\r
                button.setText('Add Country');\r
                button.enable();\r
            } else if (selectedNode instanceof KitchenSink.model.tree.Country) {\r
                this.addClass = KitchenSink.model.tree.City;\r
                button.setText('Add City');\r
                button.enable();\r
            } else {\r
                button.disable();\r
            }\r
        } else {\r
            this.addClass = KitchenSink.model.tree.Territory;\r
            button.setText('Add Territory');\r
            button.enable();\r
        }\r
    },\r
\r
    getActionTip: function(value, meta, rec, rowIdx, colIdx, store, view) {\r
        var dataType;\r
        switch (Ext.ClassManager.getName(rec)) {\r
            case "KitchenSink.model.tree.Territory":\r
                dataType = 'territory';\r
                break;\r
            case "KitchenSink.model.tree.Country":\r
                dataType = 'country';\r
                break;\r
            case "KitchenSink.model.tree.City":\r
                dataType = 'city';\r
        }\r
        return 'Click for info on ' + dataType;\r
    },\r
\r
    onDrillAction: function(view, rowIndex, colIndex, row, event, rec) {\r
        var dataType;\r
        switch (Ext.ClassManager.getName(rec)) {\r
            case "KitchenSink.model.tree.Territory":\r
                dataType = 'territory';\r
                break;\r
            case "KitchenSink.model.tree.Country":\r
                dataType = 'country';\r
                break;\r
            case "KitchenSink.model.tree.City":\r
                dataType = 'city';\r
        }\r
        Ext.Msg.alert('Action', 'Drill into ' + dataType + ' details');\r
    }\r
});\r