/** * @private * A mixin for providing query related methods for {@link Ext.ComponentQuery} for classes that * implement getRefItems. */Ext.define('Ext.mixin.Queryable', { mixinId: 'queryable', isQueryable: true, /** * Retrieves all descendant components which match the passed selector. * Executes an Ext.ComponentQuery.query using this container as its root. * @param {String} [selector] Selector complying to an Ext.ComponentQuery selector. * If no selector is specified all items will be returned. * @return {Ext.Component[]} Components which matched the selector */ query: function(selector) { selector = selector || '*'; return Ext.ComponentQuery.query(selector, this.getQueryRoot()); }, /** * Retrieves all descendant components which match the passed function. * The function should return false for components that are to be * excluded from the selection. * @param {Function} fn The matcher function. It will be called with a single argument, * the component being tested. * @param {Object} [scope] The scope in which to run the function. If not specified, * it will default to the active component. * @return {Ext.Component[]} Components matched by the passed function */ queryBy: function(fn, scope) { var out = [], items = this.getQueryRoot().getRefItems(true), i = 0, len = items.length, item; for (; i < len; ++i) { item = items[i]; if (fn.call(scope || item, item) !== false) { out.push(item); } } return out; }, /** * Finds a component at any level under this container matching the id/itemId. * This is a shorthand for calling ct.down('#' + id); * @param {String} id The id to find * @return {Ext.Component} The matching id, null if not found */ queryById: function(id) { return this.down(Ext.makeIdSelector(id)); }, /** * Retrieves the first direct child of this container which matches the passed selector * or component. The passed in selector must comply with an Ext.ComponentQuery selector, * or it can be an actual Ext.Component. * @param {String/Ext.Component} [selector] An Ext.ComponentQuery selector. If no selector is * specified, the first child will be returned. * @return {Ext.Component} The matching child Ext.Component (or `null` if no match was found). */ child: function(selector) { var children = this.getQueryRoot().getRefItems(); if (selector && selector.isComponent) { return this.matchById(children, selector.getItemId()); } // Filter children array to only matches. if (selector) { children = Ext.ComponentQuery.query(selector, children); } // Return first match if (children.length) { return children[0]; } return null; }, /** * Retrieves the first descendant of this container which matches the passed selector. * The passed in selector must comply with an Ext.ComponentQuery selector, or it can be * an actual Ext.Component. * @param {String/Ext.Component} [selector] An Ext.ComponentQuery selector or Ext.Component. * If no selector is * specified, the first child will be returned. * @return {Ext.Component} The matching descendant Ext.Component (or `null` if no match * was found). */ down: function(selector) { if (selector && selector.isComponent) { return this.matchById(this.getRefItems(true), selector.getItemId()); } selector = selector || ''; return this.query(selector)[0] || null; }, /** * Traverses the tree rooted at this node in pre-order mode, calling the passed function * on the nodes at each level. That is the function is called upon each node **before** * being called on its children). * * This method is used at each level down the cascade. Currently * {@link Ext.Component Component}s and {@link Ext.data.TreeModel TreeModel}s are queryable. * * If you have tree-structured data, you can make your nodes queryable, and use ComponentQuery * on them. * * @param {Object} selector A ComponentQuery selector used to filter candidate nodes before * calling the function. An empty string matches any node. * @param {Function} fn The function to call. Return `false` to abort the traverse. * @param {Object} fn.node The node being visited. * @param {Object} [scope] The context (`this` reference) in which the function is executed. * @param {Array} [extraArgs] A set of arguments to be appended to the function's argument list * to pass down extra data known to the caller **after** the node being visited. */ visitPreOrder: function(selector, fn, scope, extraArgs) { Ext.ComponentQuery._visit(true, selector, this.getQueryRoot(), fn, scope, extraArgs); }, /** * Traverses the tree rooted at this node in post-order mode, calling the passed function * on the nodes at each level. That is the function is called upon each node **after** being * called on its children). * * This method is used at each level down the cascade. Currently * {@link Ext.Component Component}s and {@link Ext.data.TreeModel TreeModel}s are queryable. * * If you have tree-structured data, you can make your nodes queryable, and use ComponentQuery * on them. * * @param {Object} selector A ComponentQuery selector used to filter candidate nodes before * calling the function. An empty string matches any node. * @param {Function} fn The function to call. Return `false` to abort the traverse. * @param {Object} fn.node The node being visited. * @param {Object} [scope] The context (`this` reference) in which the function is executed. * @param {Array} [extraArgs] A set of arguments to be appended to the function's argument list * to pass down extra data known to the caller **after** the node being visited. */ visitPostOrder: function(selector, fn, scope, extraArgs) { Ext.ComponentQuery._visit(false, selector, this.getQueryRoot(), fn, scope, extraArgs); }, getRefItems: function() { return []; }, getQueryRoot: function() { return this; }, privates: { matchById: function(items, id) { var len = items.length, i, item; for (i = 0; i < len; ++i) { item = items[i]; if (item.getItemId() === id) { return item; } } return null; } }});