3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.ComponentLoader
17 * @extends Ext.ElementLoader
19 * This class is used to load content via Ajax into a {@link Ext.Component}. In general
20 * this class will not be instanced directly, rather a loader configuration will be passed to the
21 * constructor of the {@link Ext.Component}.
24 * By default, the content loaded will be processed as raw html. The response text
25 * from the request is taken and added to the component. This can be used in
26 * conjunction with the {@link #scripts} option to execute any inline scripts in
27 * the resulting content. Using this renderer has the same effect as passing the
28 * {@link Ext.Component#html} configuration option.
31 * This renderer allows content to be added by using JSON data and a {@link Ext.XTemplate}.
32 * The content received from the response is passed to the {@link Ext.Component#update} method.
33 * This content is run through the attached {@link Ext.Component#tpl} and the data is added to
34 * the Component. Using this renderer has the same effect as using the {@link Ext.Component#data}
35 * configuration in conjunction with a {@link Ext.Component#tpl}.
37 * ## Component Renderer
38 * This renderer can only be used with a {@link Ext.container.Container} and subclasses. It allows for
39 * Components to be loaded remotely into a Container. The response is expected to be a single/series of
40 * {@link Ext.Component} configuration objects. When the response is received, the data is decoded
41 * and then passed to {@link Ext.container.Container#add}. Using this renderer has the same effect as specifying
42 * the {@link Ext.container.Container#items} configuration on a Container.
45 * A custom function can be passed to handle any other special case, see the {@link #renderer} option.
49 * tpl: '{firstName} - {lastName}',
59 Ext.define('Ext.ComponentLoader', {
61 /* Begin Definitions */
63 extend: 'Ext.ElementLoader',
67 Data: function(loader, response, active){
70 loader.getTarget().update(Ext.decode(response.responseText));
77 Component: function(loader, response, active){
79 target = loader.getTarget(),
83 if (!target.isContainer) {
86 msg: 'Components can only be loaded into a container'
92 items = Ext.decode(response.responseText);
98 if (active.removeAll) {
108 /* End Definitions */
111 * @cfg {Ext.Component/String} target The target {@link Ext.Component} for the loader.
112 * If a string is passed it will be looked up via the id.
117 * @cfg {Boolean/Object} loadMask True or a {@link Ext.LoadMask} configuration to enable masking during loading.
122 * @cfg {Boolean} scripts True to parse any inline script tags in the response. This only used when using the html
127 * @cfg {String/Function} renderer
129 The type of content that is to be loaded into, which can be one of 3 types:
131 + **html** : Loads raw html content, see {@link Ext.Component#html}
132 + **data** : Loads raw html content, see {@link Ext.Component#data}
133 + **component** : Loads child {Ext.Component} instances. This option is only valid when used with a Container.
135 Alternatively, you can pass a function which is called with the following parameters.
137 + loader - Loader instance
138 + response - The server response
139 + active - The active request
141 The function must return false is loading is not successful. Below is a sample of using a custom renderer:
146 renderer: function(loader, response, active) {
147 var text = response.responseText;
148 loader.getTarget().update('The response is ' + text);
157 * Set a {Ext.Component} as the target of this loader. Note that if the target is changed,
158 * any active requests will be aborted.
159 * @param {String/Ext.Component} target The component to be the target of this loader. If a string is passed
160 * it will be looked up via its id.
162 setTarget: function(target){
165 if (Ext.isString(target)) {
166 target = Ext.getCmp(target);
169 if (me.target && me.target != target) {
176 removeMask: function(){
177 this.target.setLoading(false);
181 * Add the mask on the target
183 * @param {Boolean/Object} mask The mask configuration
185 addMask: function(mask){
186 this.target.setLoading(mask);
190 * Get the target of this loader.
191 * @return {Ext.Component} target The target, null if none exists.
194 setOptions: function(active, options){
195 active.removeAll = Ext.isDefined(options.removeAll) ? options.removeAll : this.removeAll;
199 * Gets the renderer to use
201 * @param {String/Function} renderer The renderer to use
202 * @return {Function} A rendering function to use.
204 getRenderer: function(renderer){
205 if (Ext.isFunction(renderer)) {
209 var renderers = this.statics().Renderer;
212 return renderers.Component;
214 return renderers.Data;
216 return Ext.ElementLoader.Renderer.Html;