1. #1
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default [Ext 2.0] Ext.ux.ComponentLoader

    [Ext 2.0] Ext.ux.ComponentLoader


    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:

    Code:
    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:
    Code:
    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.
    Code:
    {
    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

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Cool idea Aaron. Looking forward to the accompanying article.

  3. #3
    Sencha User
    Join Date
    Jul 2007
    Location
    Moscow, Russia
    Posts
    295
    Vote Rating
    0
    6epcepk is on a distinguished road

      0  

    Default


    Thanks for ux!
    But how I can execute handlers?
    PHP Code:
    'handler' => 'function() {alert("dsf")}'
    // -> this.handler.call is not a function 
    Thanks.

  4. #4
    Sencha User mlarese's Avatar
    Join Date
    Jun 2007
    Posts
    108
    Vote Rating
    0
    mlarese is on a distinguished road

      0  

    Default


    is i t possible to define components to use inside other components?
    something like
    Code:
    {
    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' 
    		}]
    	}
    ]
    }

  5. #5
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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

  7. #7
    Sencha User mlarese's Avatar
    Join Date
    Jun 2007
    Posts
    108
    Vote Rating
    0
    mlarese is on a distinguished road

      0  

    Default


    @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.

  8. #8
    Sencha User
    Join Date
    Jul 2007
    Location
    Moscow, Russia
    Posts
    295
    Vote Rating
    0
    6epcepk is on a distinguished road

      0  

    Default


    Quote Originally Posted by aconran View Post
    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.

  9. #9
    Ext JS Premium Member Foggy's Avatar
    Join Date
    Apr 2007
    Location
    Switzerland
    Posts
    477
    Vote Rating
    0
    Foggy is on a distinguished road

      0  

    Default


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

  10. #10
    Ext User
    Join Date
    Jun 2007
    Posts
    11
    Vote Rating
    0
    jamesfarrer is on a distinguished road

      0  

    Default Further example

    Further example


    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