Foro

¿ Mejor forma de cargar un componente dinamicamente ?

0
Hola gente, estoy un poco confundido. Cual seria la mejor forma de cargar un componente dinamicamente. Cito un ejemplo para que se entienda mejor. Por ejemplo, tenemos un un treePanel desde donde se disparan las acciones y en otro lado un panel donde se deben cargar los componentes, de acuerdo con lo que se haya presionado en el treePanel. Este ultimo código se debería cargar después de presionar el botón, y no antes puesto que el código estaría separado de lo que es el layout inicial. Saludos, Fernando.

4 Respuestas

Mejores votos Por fecha Solución
0
bueno existen dos aproximaciones que creo que son bastantes buenas una es usar un loader de js o css dinamico que pegue al dom los nuevos js donde viene la definicion de los nuevos paneles que van en el layout, y otra es crear un solo archivo en cual esten todas las definiciones o clases de nuestrso componentes e instanciarlas cuando se necesiten. para ambos casos recomiendo el uso de clases de ExtJS o funciones contructoras de objetos. para mayor informacion le recomiendo extjs.eu
0
Gracias por la respuesta. Te comento que estaba usando el plugin RemoteComponent, y como no lo mencionaste ahora dudo si estoy haciendo bien las cosas. Paso a mostrar un ejemplo para que sea mas claro. foroExample.html 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExtJS Layout Examples</title>
    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <!-- overrides to base library -->
    <link rel="stylesheet" type="text/css" href="../ux/css/CenterLayout.css" />
    <!-- page specific -->
    <link rel="stylesheet" type="text/css" href="foroExample.css">
    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="../../ext-all.js"></script>
    <!-- overrides to base library -->
    <!-- extensions -->
    <script type="text/javascript" src="../ux/CenterLayout.js"></script>
    <script type="text/javascript" src="../ux/RowLayout.js"></script>
	<script type="text/javascript" src="../ux/TabCloseMenu.js"></script>
    <!-- page specific -->
	<script type="text/javascript" src="Ext.ux.Plugin.RemoteComponent.js"></script>
    <script type="text/javascript" src="foroStart.js"></script>
	<script type="text/javascript" src="foroAbsolute.js"></script>
	<script type="text/javascript" src="foroHbox.js"></script>
	<script type="text/javascript" src="foroColumn.js"></script>
    <script type="text/javascript" src="foroExample.js"></script>
</head>
<body>
    <div id="header"><h1>Administración</h1></div>
    <div style="display:none;">
        <!-- Start page content -->
        <div id="start-div">
            
        </div>
    </div>
</body>
</html>
foroExample.js 
Ext.onReady(function(){
	
	Ext.QuickTips.init();
	
	var detailEl;
	var tabPanel = new Ext.TabPanel({
		id: 'tab-panel',
		enableTabScroll:true,
		margins: '15 15 150 15',
		defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu(),
		activeTab: 0,
		items: start
	 });
	var contentPanel = {
		id: 'content-panel',
		region: 'center',
		layout: 'fit',
		margins: '2 5 5 0',
		border: false,
		items: tabPanel
	};
    
    var treePanel = new Ext.tree.TreePanel({
    	id: 'tree-panel',
    	title: 'Opciones',
        region:'center',
        split: true,
        height: 300,
        minSize: 150,
        autoScroll: true,
        
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,
        
        loader: new Ext.tree.TreeLoader({
            dataUrl:'foroTree-example.json'
        }),
        
        root: new Ext.tree.AsyncTreeNode()
    });
	
    treePanel.on('click', function(n){
    	var sn = this.selModel.selNode || {};
		var tab = tabPanel.add({
			title: n.id,
			layout: n.attributes.layout || 'fit',
			autoShow: true,
			closable: true,
			plugins: new Ext.ux.Plugin.RemoteComponent({
				url: n.id+'.js',
				method: 'GET',
				loadOn: 'show',
				mask: tabPanel.body,
				maskConfig: {
					msg: Ext.LoadMask.prototype.msg
				}
			})
		});
		tabPanel.setActiveTab(tab);
    });
    
    var myViewport = new Ext.Viewport({
		id: 'myViewport',
		layout: 'border',
		title: 'Layout',
		items: [{
			xtype: 'box',
			region: 'north',
			applyTo: 'header',
			height: 30
		},{
			layout: 'border',
	    	id: 'layout-browser',
	        region:'west',
	        border: false,
			collapseMode: 'mini',
	        split:true,
			margins: '2 0 5 5',
	        width: 275,
	        minSize: 100,
	        maxSize: 500,
			items: treePanel
		},
			contentPanel
		],
        renderTo: Ext.getBody()
    });
});
foroTree-example.json 
[{
    text:'Absolute Layout',
	id: 'foroAbsolute',
	layout: 'fit',
	leaf: true
},{
    text:'HBox Layout',
	id: 'foroHbox',
	layout: 'fit',
	leaf: true
},{
    text:'Column Layout',
	id: 'foroColumn',
	layout: 'fit',
	leaf: true
}]
foroAbsolute.js 
(function(){
var absolute = {
    id: 'absolute-panel',
    title: 'Absolute Layout',
    layout: 'absolute',
    defaults: {
        bodyStyle: 'padding:15px;',
        width: 200,
        height: 100,
        frame: true
    },
    items:[{
        title: 'Panel 1',
        x: 50,
        y: 50,
        html: 'Positioned at x:50, y:50'
    },{
        title: 'Panel 2',
        x: 125,
        y: 125,
        html: 'Positioned at x:125, y:125'
    }]
};
return absolute;
	
})()
foroHbox.js 
(function(){
var hbox = {
    id: 'hbox-panel',
    title: 'hBox Layout',
    layout: {
        type: 'hbox',
        pack: 'start',
        align: 'stretch'
    },
    defaults: {
        frame: true
    },
    items: [{
        title: 'Panel 1',
        flex: 1,
        html: 'flex : 1'
    }, {
        title: 'Panel 2',
        width: 100,
        html: 'width : 100'
    }, {
        title: 'Panel 3',
        flex: 2,
        html: 'flex : 2'
    }]
};
return hbox;
	
})()
foroColumn.js 
(function(){
var column = {
    id:'column-panel',
    title: 'Column Layout',
    layout: 'column',
    bodyStyle: 'padding:5px',
    defaults: {bodyStyle:'padding:15px'},
    items: [{
        title: 'Width = 0.25',
        columnWidth: 0.25,
        html: '<p>This is some short content.</p>'
    },{
        title: 'Width = 0.75',
        columnWidth: 0.75,
        html: '<p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p><p>This is some longer content.</p>'
    },{
        title: 'Width = 250px',
        width: 250,
        html: 'Not much here!'
    }]
};
return column;
	
})()
Desde ya, muchas gracias por su ayuda.
0
El plugin RemoteComponent se ve muy bien, personalmente desarrollé una extención que se encarga de hacer lo que comenta manduks saludos
0
Pero con RemoteComponent estoy cargando todo el codigo javascript desde el inicio, cierto? En vez de cargarlo de manera "lazy".

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.

Tags

Ext JS 3