X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/source/Panel5.html diff --git a/docs/source/Panel5.html b/docs/source/Panel5.html index f47e3934..928ab2ff 100644 --- a/docs/source/Panel5.html +++ b/docs/source/Panel5.html @@ -1,36 +1,45 @@ -
+ +/** - * @class Ext.tree.Panel - * @extends Ext.panel.Table - * - * The TreePanel provides tree-structured UI representation of tree-structured data. + + + + +\ No newline at end of file +}); +The source code + + + + + + +/** + * The TreePanel provides tree-structured UI representation of tree-structured data. * A TreePanel must be bound to a {@link Ext.data.TreeStore}. TreePanel's support - * multiple columns through the {@link columns} configuration. + * multiple columns through the {@link #columns} configuration. * * Simple TreePanel using inline data. * * {@img Ext.tree.Panel/Ext.tree.Panel1.png Ext.tree.Panel component} * - * ## Simple Tree Panel (no columns) + * Code: * * var store = Ext.create('Ext.data.TreeStore', { * root: { * expanded: true, - * text:"", - * user:"", - * status:"", * children: [ - * { text:"detention", leaf: true }, - * { text:"homework", expanded: true, - * children: [ - * { text:"book report", leaf: true }, - * { text:"alegrbra", leaf: true} - * ] - * }, - * { text: "buy lottery tickets", leaf:true } + * { text: "detention", leaf: true }, + * { text: "homework", expanded: true, children: [ + * { text: "book report", leaf: true }, + * { text: "alegrbra", leaf: true} + * ] }, + * { text: "buy lottery tickets", leaf: true } * ] * } * }); - * + * * Ext.create('Ext.tree.Panel', { * title: 'Simple Tree', * width: 200, @@ -39,8 +48,6 @@ * rootVisible: false, * renderTo: Ext.getBody() * }); - * - * @xtype treepanel */ Ext.define('Ext.tree.Panel', { extend: 'Ext.panel.Table', @@ -51,19 +58,21 @@ Ext.define('Ext.tree.Panel', { selType: 'treemodel', treeCls: Ext.baseCSSPrefix + 'tree-panel', - - /** - * @cfg {Boolean} lines false to disable tree lines (defaults to true) + + deferRowRender: false, + + /** + * @cfg {Boolean} lines False to disable tree lines. Defaults to true. */ lines: true, - /** - * @cfg {Boolean} useArrows true to use Vista-style arrows in the tree (defaults to false) + /** + * @cfg {Boolean} useArrows True to use Vista-style arrows in the tree. Defaults to false. */ useArrows: false, - /** - * @cfg {Boolean} singleExpand <tt>true</tt> if only 1 node per branch may be expanded + /** + * @cfg {Boolean} singleExpand True if only 1 node per branch may be expanded. Defaults to false. */ singleExpand: false, @@ -72,24 +81,38 @@ Ext.define('Ext.tree.Panel', { enableDrop: true }, - /** - * @cfg {Boolean} animate <tt>true</tt> to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx Ext.enableFx}) + /** + * @cfg {Boolean} animate True to enable animated expand/collapse. Defaults to the value of {@link Ext#enableFx}. */ - /** - * @cfg {Boolean} rootVisible <tt>false</tt> to hide the root node (defaults to <tt>true</tt>) + /** + * @cfg {Boolean} rootVisible False to hide the root node. Defaults to true. */ rootVisible: true, - /** - * @cfg {Boolean} displayField The field inside the model that will be used as the node's text. (defaults to <tt>text</tt>) + /** + * @cfg {Boolean} displayField The field inside the model that will be used as the node's text. Defaults to 'text'. */ displayField: 'text', - /** - * @cfg {Boolean} root Allows you to not specify a store on this TreePanel. This is useful for creating a simple - * tree with preloaded data without having to specify a TreeStore and Model. A store and model will be created and - * root will be passed to that store. + /** + * @cfg {Ext.data.Model/Ext.data.NodeInterface/Object} root + * Allows you to not specify a store on this TreePanel. This is useful for creating a simple tree with preloaded + * data without having to specify a TreeStore and Model. A store and model will be created and root will be passed + * to that store. For example: + * + * Ext.create('Ext.tree.Panel', { + * title: 'Simple Tree', + * root: { + * text: "Root node", + * expanded: true, + * children: [ + * { text: "Child 1", leaf: true }, + * { text: "Child 2", leaf: true } + * ] + * }, + * renderTo: Ext.getBody() + * }); */ root: null, @@ -98,13 +121,12 @@ Ext.define('Ext.tree.Panel', { normalCfgCopy: ['displayField', 'root', 'singleExpand', 'useArrows', 'lines', 'rootVisible', 'scroll'], lockedCfgCopy: ['displayField', 'root', 'singleExpand', 'useArrows', 'lines', 'rootVisible'], - /** - * @cfg {Boolean} hideHeaders - * Specify as <code>true</code> to hide the headers. + /** + * @cfg {Boolean} hideHeaders True to hide the headers. Defaults to `undefined`. */ - /** - * @cfg {Boolean} folderSort Set to true to automatically prepend a leaf sorter to the store (defaults to <tt>undefined</tt>) + /** + * @cfg {Boolean} folderSort True to automatically prepend a leaf sorter to the store. Defaults to `undefined`. */ constructor: function(config) { @@ -132,16 +154,17 @@ Ext.define('Ext.tree.Panel', { } else if (!me.useArrows) { cls.push(Ext.baseCSSPrefix + 'tree-no-lines'); } - - if (!me.store || Ext.isObject(me.store) && !me.store.isStore) { + + if (Ext.isString(me.store)) { + me.store = Ext.StoreMgr.lookup(me.store); + } else if (!me.store || Ext.isObject(me.store) && !me.store.isStore) { me.store = Ext.create('Ext.data.TreeStore', Ext.apply({}, me.store || {}, { root: me.root, fields: me.fields, model: me.model, folderSort: me.folderSort })); - } - else if (me.root) { + } else if (me.root) { me.store = Ext.data.StoreManager.lookup(me.store); me.store.setRootNode(me.root); if (me.folderSort !== undefined) { @@ -170,7 +193,7 @@ Ext.define('Ext.tree.Panel', { }); me.relayEvents(me.store, [ - /** + /** * @event beforeload * Event description * @param {Ext.data.Store} store This Store @@ -178,7 +201,7 @@ Ext.define('Ext.tree.Panel', { */ 'beforeload', - /** + /** * @event load * Fires whenever the store reads data from a remote data source. * @param {Ext.data.store} this @@ -189,7 +212,7 @@ Ext.define('Ext.tree.Panel', { ]); me.store.on({ - /** + /** * @event itemappend * Fires when a new child node is appended to a node in the tree. * @param {Tree} tree The owner tree @@ -199,7 +222,7 @@ Ext.define('Ext.tree.Panel', { */ append: me.createRelayer('itemappend'), - /** + /** * @event itemremove * Fires when a child node is removed from a node in the tree * @param {Tree} tree The owner tree @@ -208,7 +231,7 @@ Ext.define('Ext.tree.Panel', { */ remove: me.createRelayer('itemremove'), - /** + /** * @event itemmove * Fires when a node is moved to a new location in the tree * @param {Tree} tree The owner tree @@ -219,7 +242,7 @@ Ext.define('Ext.tree.Panel', { */ move: me.createRelayer('itemmove'), - /** + /** * @event iteminsert * Fires when a new child node is inserted in a node in tree * @param {Tree} tree The owner tree @@ -229,7 +252,7 @@ Ext.define('Ext.tree.Panel', { */ insert: me.createRelayer('iteminsert'), - /** + /** * @event beforeitemappend * Fires before a new child is appended to a node in this tree, return false to cancel the append. * @param {Tree} tree The owner tree @@ -238,7 +261,7 @@ Ext.define('Ext.tree.Panel', { */ beforeappend: me.createRelayer('beforeitemappend'), - /** + /** * @event beforeitemremove * Fires before a child is removed from a node in this tree, return false to cancel the remove. * @param {Tree} tree The owner tree @@ -247,7 +270,7 @@ Ext.define('Ext.tree.Panel', { */ beforeremove: me.createRelayer('beforeitemremove'), - /** + /** * @event beforeitemmove * Fires before a node is moved to a new location in the tree. Return false to cancel the move. * @param {Tree} tree The owner tree @@ -258,7 +281,7 @@ Ext.define('Ext.tree.Panel', { */ beforemove: me.createRelayer('beforeitemmove'), - /** + /** * @event beforeiteminsert * Fires before a new child is inserted in a node in this tree, return false to cancel the insert. * @param {Tree} tree The owner tree @@ -268,28 +291,28 @@ Ext.define('Ext.tree.Panel', { */ beforeinsert: me.createRelayer('beforeiteminsert'), - /** + /** * @event itemexpand * Fires when a node is expanded. * @param {Node} this The expanding node */ expand: me.createRelayer('itemexpand'), - /** + /** * @event itemcollapse * Fires when a node is collapsed. * @param {Node} this The collapsing node */ collapse: me.createRelayer('itemcollapse'), - /** + /** * @event beforeitemexpand * Fires before a node is expanded. * @param {Node} this The expanding node */ beforeexpand: me.createRelayer('beforeitemexpand'), - /** + /** * @event beforeitemcollapse * Fires before a node is collapsed. * @param {Node} this The collapsing node @@ -317,7 +340,7 @@ Ext.define('Ext.tree.Panel', { me.callParent(); me.relayEvents(me.getView(), [ - /** + /** * @event checkchange * Fires when a node with a checkbox's checked property changes * @param {Ext.data.Model} node The node who's checked property was changed @@ -350,7 +373,7 @@ Ext.define('Ext.tree.Panel', { this.view.setRootNode(root); }, - /** + /** * Retrieve an array of checked records. * @return {Array} An array containing the checked records */ @@ -362,7 +385,7 @@ Ext.define('Ext.tree.Panel', { return rec.get('checked'); }, - /** + /** * Expand all nodes * @param {Function} callback (optional) A function to execute when the expand finishes. * @param {Object} scope (optional) The scope of the callback function @@ -374,7 +397,7 @@ Ext.define('Ext.tree.Panel', { } }, - /** + /** * Collapse all nodes * @param {Function} callback (optional) A function to execute when the collapse finishes. * @param {Object} scope (optional) The scope of the callback function @@ -391,11 +414,11 @@ Ext.define('Ext.tree.Panel', { } }, - /** + /** * Expand the tree to the path of a particular node. - * @param {String} path The path to expand + * @param {String} path The path to expand. The path should include a leading separator. * @param {String} field (optional) The field to get the data from. Defaults to the model idProperty. - * @param {String} separator (optional) A separator to use. Defaults to <tt>'/'</tt>. + * @param {String} separator (optional) A separator to use. Defaults to `'/'`. * @param {Function} callback (optional) A function to execute when the expand finishes. The callback will be called with * (success, lastNode) where success is if the expand was successful and lastNode is the last node that was expanded. * @param {Object} scope (optional) The scope of the callback function @@ -439,11 +462,11 @@ Ext.define('Ext.tree.Panel', { current.expand(false, expander); }, - /** + /** * Expand the tree to the path of a particular node, then selecti t. - * @param {String} path The path to select + * @param {String} path The path to select. The path should include a leading separator. * @param {String} field (optional) The field to get the data from. Defaults to the model idProperty. - * @param {String} separator (optional) A separator to use. Defaults to <tt>'/'</tt>. + * @param {String} separator (optional) A separator to use. Defaults to `'/'`. * @param {Function} callback (optional) A function to execute when the select finishes. The callback will be called with * (bSuccess, oLastNode) where bSuccess is if the select was successful and oLastNode is the last node that was expanded. * @param {Object} scope (optional) The scope of the callback function @@ -459,7 +482,7 @@ Ext.define('Ext.tree.Panel', { keys = path.split(separator); last = keys.pop(); - me.expandPath(keys.join('/'), field, separator, function(success, node){ + me.expandPath(keys.join(separator), field, separator, function(success, node){ var doSuccess = false; if (success && node) { node = node.findChild(field, last); @@ -474,4 +497,7 @@ Ext.define('Ext.tree.Panel', { Ext.callback(callback, scope || me, [doSuccess, node]); }, me); } -});