[Ext 2.0] Ext.ux.ComponentLoader

[aconran]

I am experimenting with loading my components via server-side json which non-developers can easily manipulate. My first pass at a ComponentLoader is here:

Ext.namespace('Ext.ux');

/**
 * @class Ext.ux.ComponentLoader
 * @author Aaron Conran
 * Provides an easy way to load components dynamically. If you name these components
 * you can use Ext.ComponentMgr's onAvailable function to manipulate the components
 * as they are added.
 * @singleton
 */
Ext.ux.ComponentLoader = function() {
	var defaultXType = 'panel';
	var cm = Ext.ComponentMgr;			
	return {
		/**
		 * Load components from a server resource, config options include anything available in @link Ext.data.Connect#request
		 * Note: Always uses the connection of Ext.Ajax 
		 */
		load : function(config) {
			Ext.apply(config, {
				callback: this.onLoad,
				scope: this
			});	
			Ext.Ajax.request(config);
		},
		// private
		onLoad : function(opts, success, response) {			
			var config = Ext.decode(response.responseText);
			for (var i = 0; i < config.components.length; i++) {
				var comp = cm.create(config.components[i], config.defaultXType[i] || defaultXType)
			}
		}
	};
}();

An Example of how you would use it:

Ext.ux.ComponentLoader.load({url: 'loadComponents.cfm'});
Ext.ComponentMgr.onAvailable('bookTree', function(bookTree) {
	bookTree.root.appendChild(
		new Ext.tree.TreeNode({text: 'JavaScript: The Definitive Guide', allowDrag: false}),
		new Ext.tree.TreeNode({text: 'Pro JavaScript Techniques', allowDrag: false}),
		new Ext.tree.TreeNode({text: 'Visual C# 2005 Recipes', allowDrag: false})
	);
	bookTree.on('click', function(node, e) {
		var inner = String.format('Please place a nice review for {0} here.', node.attributes.text); 
		Ext.getCmp('content').body.update(inner);
	});
});

And finally the JSON packet that the load received via the coldfusion request.

{
defaultXType: 'panel',
components: [
	{
		xtype: 'viewport',
		layout: 'border',
		items: [{
			region: 'north',
			border: false,
			height: 100,
			split: false,		
			html: 'Header'
		},{
			layout: 'border',
			region: 'center',
			border: false,
			items: [{
		    	xtype: 'treepanel',
		    	region: 'west',
		    	width: 320,
		    	id: 'bookTree',
		        rootVisible:false,
		        root: new Ext.tree.TreeNode(),
		        title: 'Books'								
			},{
				id: 'content',
				region: 'center',
				html: 'sample'				
			}]
		},{
			region: 'south',
			height: 24,
			title: 'Dynamic Loader Demo' 
		}]
	}
]
}

I will be putting together an article on how to use the extension and some of the benefits/disadvantages of loading your components this way.

Aaron

[brian.moeskau]

Cool idea Aaron. Looking forward to the accompanying article.

[6epcepk]

Thanks for ux!
But how I can execute handlers?

'handler' => 'function() {alert("dsf")}'
// -> this.handler.call is not a function 

Thanks.

[mlarese]

is i t possible to define components to use inside other components?
something like

{
defaultXType: 'panel',
east:{
		title:'east',
		region:'east'
	},
components: [{
		xtype: 'viewport',
		layout: 'border',
		items: [ {
			layout: 'border',
			region: 'center',
			border: false,
			items: [{
		    	xtype: 'treepanel',
		    	region: 'west',
		    	width: 320,
		    	id: 'bookTree',
		        rootVisible:false,
		        root: new Ext.tree.TreeNode(),
		        title: 'Books'								
			},this.east,{
				id: 'content',
				region: 'center',
				html: 'sample'				
			}]
		},{
			region: 'south',
			height: 24,
			title: 'Dynamic Loader Demo' 
		}]
	}
]
}

[aconran]

mlarese -

Why would you want to do that as opposed to placing the east config inside the components array? I suppose if you were going to use a similar configuration it may be useful. However, being as this JSON is expected to be generated via a server-side component I would expect that to be implemented on the server-side.

Aaron

[aconran]

6epcepk -

What do you mean by execute handlers? This extension is primarily to load components via server-side JSON. You can manipulate/use the components after they are loaded. To determine when a specific component is loaded use onAvailable of the Ext.ComponentMgr singleton as shown in the above sample.

Aaron

[mlarese]

@aconran
it was just an example.
the problem is that a json object if is to big is difficult to write and debug.
It is mor easy to write pieces of it and compose the big one.

[6epcepk]

6epcepk -

What do you mean by execute handlers? This extension is primarily to load components via server-side JSON. You can manipulate/use the components after they are loaded. To determine when a specific component is loaded use onAvailable of the Ext.ComponentMgr singleton as shown in the above sample.

Aaron

Wnen JSON is loaded (menu items), handlers doesn't execute on menu item click.
Error: this.handler.call is not a function
Thanks.

[Foggy]

IMHO you could use something like this
Ext.get('yourComponentId').on('click', doSomething);
or maybe with Ext.getCmp instead of Ext.get...

[jamesfarrer]

Hi,

I note in all the examples it tends to revolve around a viewport....

However, I have something else I would like to do with it - is this possible?
I have a viewport defined statically in a js (which I want), with a toolbar as one of my regions - can I use component loader to load toolbar items into it?

Thanks

James