Foro

Layout broser

0
Hola!!! A ver si alguien me puede ayudar porque me veo muy perdido. Estoy intentando crear un browser layout mas o menos como el del ejemplo del extjs 3.1 Tengo un border layout con un tree en la zona oeste y me gustaria saber como puedo hacer para que al picar un nodo la region central del layout cambie a lo ke yo quiera ya sea una pagina html o un widget. He estado leyendo mirando ejemplos y ninguno me funciona si alguien me puede ayudar se lo agredecere millll <!-- s:) --><!-- s:) --> Adjunto el codigo del layout. Gracias por la ayuda un saludo. 
var tree = new Ext.tree.TreePanel({
    renderTo: Ext.getBody(),
//    title: 'Reporting Project',
    width: 350,
    height: 600,
    userArrows: true,
	animate: true,
    autoScroll: true,
	
    dataUrl: 'get-php.php',
    root: {
        nodeType: 'async',
        text: 'Entornos',
		id:'node-root'
    },
    listeners: {
        render: function() {
            this.getRootNode().collapse()
			}
    }
});
tree.on('click',function(node){  
	alert(node);
});  
Ext.onReady( function(){
	new Ext.Viewport({
		layout   : 'border',
		items    : [
			{
				name     : 'Centro',
				id		 : 'centro',
				title    : 'Center Panel',
				region   : 'center'
	
			//	html:'<iframe src="http://www.google.es" width="100%" height="100%">'
									
			},
			{
				title     : 'norte',
				xtype     : 'box',
				region    : 'north',
				width     : 50,
    			height    : 50
				//bodyStyle: "background-color:#0099CC"
				
			},
			{
				title    : 'South',
				collapsible : true,
				region   : 'south'
			},
	
			{
				title       : 'Infraestructuras / Entornos',
				region      : 'west',
				width       : 350,
				height      : 400,
				collapsible : true,
				items		: [tree]
				
	
			}
		
			]
	 });
});

3 Respuestas

Mejores votos Por fecha Solución
0
Hola, Gracias el crespo he modificado 2 cosillas para que me funcionara pero ahora tengo un problema Cuando eligo un nodo la primera vez me aparece un panel pero si le vuelvo a dar me salta este error... b.getPositionEl().dom is undefined te pego el codigo 
var p = new Ext.Panel({
					   
     title: 'Users',  
     html: 'The content',  
     bodyStyle: 'padding:10px;',  
     height:200,  
     border: false,  
     collapsible: true 
 
					   });
 
var tree = new Ext.tree.TreePanel({
    renderTo: Ext.getBody(),
//    title: 'Reporting Project',
    width: 350,
    height: 600,
    userArrows: true,
	animate: true,
    autoScroll: true,
	
    dataUrl: 'get-php.php',
    root: {
        nodeType: 'async',
        text: 'Entornos',
		id:'node-root'
    },
    listeners: {
        render: function() {
            this.getRootNode().collapse()
			}
    }
});
tree.on('click',function(node){  
//	alert(node.id);
	 var centroPanel = Ext.getCmp('centro');
	 centroPanel.removeAll();
	 centroPanel.add(p);
	 centroPanel.doLayout();
});  
Ext.onReady( function(){
	new Ext.Viewport({
		layout   : 'border',
		items    : [
			{
				name     : 'Centro',
				id		 : 'centro',
				title    : 'Center Panel',
				region   : 'center'
	
			//	html:'<iframe src="http://www.google.es" width="100%" height="100%">'
									
			},
			{
				title     : 'north',
				xtype     : 'box',
				region    : 'north',
				width     : 50,
    			height    : 50
				//bodyStyle: "background-color:#0099CC"
				
			},
			{
				title    : 'South',
				collapsible : true,
				region   : 'south'
			},
	
			{
				title       : 'Infraestructuras / Entornos',
				region      : 'west',
				width       : 350,
				height      : 400,
				collapsible : true,
				items		: [tree]
				
	
			}
		
			]
	 });
});
Gracias por todo y un saludo.
0
deberías agregar algo así en el arbol: 
listeners: {
        render: function() {
            this.getRootNode().collapse()
         },
        click : function(nodo) {
            if(nodo.id == "1"){
                 var centroPanel = Ext.getCmp('centro');
                  centroPanel.removeAll(); //quitamos todo lo que haya en el panel
                centroPanel.add({html:'<p>hola mundo</p>'});  //aca puedes adicionar lo que quieras, otro panel o simplemente la parte html
                centroPanel.doLayout(); //basicamente con esto puedes ver los cambios al adicionar o quitar los elementos de un panel!
            }
        }
    }
espero que eso te ayude un poco.. es la idea básica.. Salu2
0
el problema puede darse en que al remover los elementos lo que hace es destruirlos completamente.. podrías crear el panel cada vez que des click en el nodo paraque lo puedas agregar cuando quieras sin problema, es decir, crear el panel 'p' en (dentro) cada evento 'click' del arbol (después de removerAll() ) . algo así: 
var tree = new Ext.tree.TreePanel({
    renderTo: Ext.getBody(),
//    title: 'Reporting Project',
    width: 350,
    height: 600,
    userArrows: true,
   animate: true,
    autoScroll: true,
   
    dataUrl: 'get-php.php',
    root: {
        nodeType: 'async',
        text: 'Entornos',
      id:'node-root'
    },
    listeners: {
        render: function() {
            this.getRootNode().collapse()
         }
    }
});
tree.on('click',function(node){  
//   alert(node.id);
    var centroPanel = Ext.getCmp('centro');
    centroPanel.removeAll();
var p = new Ext.Panel({
                  
     title: 'Users',  
     html: 'The content',  
     bodyStyle: 'padding:10px;',  
     height:200,  
     border: false,  
     collapsible: true 
                  });
    centroPanel.add(p);
    centroPanel.doLayout();
});  
Ext.onReady( function(){
   new Ext.Viewport({
      layout   : 'border',
      items    : [
         {
            name     : 'Centro',
            id       : 'centro',
            title    : 'Center Panel',
            region   : 'center'
   
         //   html:'<iframe src="http://www.google.es" width="100%" height="100%">'
                           
         },
         {
            title     : 'north',
            xtype     : 'box',
            region    : 'north',
            width     : 50,
             height    : 50
            //bodyStyle: "background-color:#0099CC"
            
         },
         {
            title    : 'South',
            collapsible : true,
            region   : 'south'
         },
   
         {
            title       : 'Infraestructuras / Entornos',
            region      : 'west',
            width       : 350,
            height      : 400,
            collapsible : true,
            items      : [tree]
            
   
         }
      
         ]
    });
});
espero te sirva, salu2

¿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