2 * @class Ext.ComponentLoader
3 * @extends Ext.ElementLoader
5 * This class is used to load content via Ajax into a {@link Ext.Component}. In general
6 * this class will not be instanced directly, rather a loader configuration will be passed to the
7 * constructor of the {@link Ext.Component}.
10 * By default, the content loaded will be processed as raw html. The response text
11 * from the request is taken and added to the component. This can be used in
12 * conjunction with the {@link #scripts} option to execute any inline scripts in
13 * the resulting content. Using this renderer has the same effect as passing the
14 * {@link Ext.Component#html} configuration option.
17 * This renderer allows content to be added by using JSON data and a {@link Ext.XTemplate}.
18 * The content received from the response is passed to the {@link Ext.Component#update} method.
19 * This content is run through the attached {@link Ext.Component#tpl} and the data is added to
20 * the Component. Using this renderer has the same effect as using the {@link Ext.Component#data}
21 * configuration in conjunction with a {@link Ext.Component#tpl}.
23 * ## Component Renderer
24 * This renderer can only be used with a {@link Ext.Container} and subclasses. It allows for
25 * Components to be loaded remotely into a Container. The response is expected to be a single/series of
26 * {@link Ext.Component} configuration objects. When the response is received, the data is decoded
27 * and then passed to {@link Ext.Container#add}. Using this renderer has the same effect as specifying
28 * the {@link Ext.Container#items} configuration on a Container.
31 * A custom function can be passed to handle any other special case, see the {@link #renderer} option.
35 * tpl: '{firstName} - {lastName}',
45 Ext.define('Ext.ComponentLoader', {
47 /* Begin Definitions */
49 extend: 'Ext.ElementLoader',
53 Data: function(loader, response, active){
56 loader.getTarget().update(Ext.decode(response.responseText));
63 Component: function(loader, response, active){
65 target = loader.getTarget(),
69 if (!target.isContainer) {
72 msg: 'Components can only be loaded into a container'
78 items = Ext.decode(response.responseText);
84 if (active.removeAll) {
97 * @cfg {Ext.Component/String} target The target {@link Ext.Component} for the loader. Defaults to <tt>null</tt>.
98 * If a string is passed it will be looked up via the id.
103 * @cfg {Mixed} loadMask True or a {@link Ext.LoadMask} configuration to enable masking during loading. Defaults to <tt>false</tt>.
108 * @cfg {Boolean} scripts True to parse any inline script tags in the response. This only used when using the html
113 * @cfg {String/Function} renderer
115 The type of content that is to be loaded into, which can be one of 3 types:
117 + **html** : Loads raw html content, see {@link Ext.Component#html}
118 + **data** : Loads raw html content, see {@link Ext.Component#data}
119 + **component** : Loads child {Ext.Component} instances. This option is only valid when used with a Container.
123 Alternatively, you can pass a function which is called with the following parameters.
125 + loader - Loader instance
126 + response - The server response
127 + active - The active request
129 The function must return false is loading is not successful. Below is a sample of using a custom renderer:
134 renderer: function(loader, response, active) {
135 var text = response.responseText;
136 loader.getTarget().update('The response is ' + text);
146 * Set a {Ext.Component} as the target of this loader. Note that if the target is changed,
147 * any active requests will be aborted.
148 * @param {String/Ext.Component} target The component to be the target of this loader. If a string is passed
149 * it will be looked up via its id.
151 setTarget: function(target){
154 if (Ext.isString(target)) {
155 target = Ext.getCmp(target);
158 if (me.target && me.target != target) {
165 removeMask: function(){
166 this.target.setLoading(false);
170 * Add the mask on the target
172 * @param {Mixed} mask The mask configuration
174 addMask: function(mask){
175 this.target.setLoading(mask);
179 * Get the target of this loader.
180 * @return {Ext.Component} target The target, null if none exists.
183 setOptions: function(active, options){
184 active.removeAll = Ext.isDefined(options.removeAll) ? options.removeAll : this.removeAll;
188 * Gets the renderer to use
190 * @param {String/Function} renderer The renderer to use
191 * @return {Function} A rendering function to use.
193 getRenderer: function(renderer){
194 if (Ext.isFunction(renderer)) {
198 var renderers = this.statics().Renderer;
201 return renderers.Component;
203 return renderers.Data;
205 return Ext.ElementLoader.Renderer.Html;