Foro

Otra alternativa para IFrame

0
Hola como estan ? otra alternativa para cargar paginas a un TabPanel sin utilizar:
Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent,{
   onRender: function (ct, position){
      this.el = ct.createChild({tag:'iframe', id: 'iframe-'+ this.id, frameBorder:0, src:this.url});
   }      
});
Me gustaria cargar los hijos del TabPanel sin que se refresque el explorador algo parecido como la api de Ext, pero que el problema que tengo es que las otras referencias a paginas tambien tienen componentes de ExtJS grid, panel , formularios etc la pagina <!-- m -->http://sever/aplicacion/index.catle<!-- m --> manda a llamar a la pagina <!-- m -->http://server/usuario/index.catle<!-- m --> para que se cargue en el Viewport del Centro intente hacer un panel.load(); pero no funciona solo puedo cargar html sin script. Espero me puedan ayudar les dejo el codigo que llevo:
Ext.ns('Aplicacion');
Aplicacion.MainLayout = function(){
  return {
    init:function(){
        Ext.BLANK_IMAGE_URL = App.utils.constants.BLANK_IMAGE_URL;
        Ext.QuickTips.init();
        this.initialLayout();        
    },
  initialLayout:function(){
        
       var pnlHome = this.getPanelHome(); 
                           	   
       this.tabHome = new Ext.TabPanel({
               id:'tabHome',
               activeTab :0,                                          
               border:false,
               enableTabScroll:true,
               autoScroll:true,
               resizeTabs:true,               
               tabWidth:150,  
               layoutOnTabChange :true,             
               items:[pnlHome],
               tabPosition: 'bottom', 
               plugins: new Ext.ux.TabCloseMenu()                           
       });     
        
       var viewport = new Ext.Viewport({
            id:'viewApli',
	        layout:"border",
	        defaults: {                
                split: true,
                frame:false,
                border:true,
                collapsible:true  
            },            
            items:[{                                      
                region:"center",  
                layout:'fit',            
                collapsible:false,               
                items:[this.tabHome]                             
              },{
                id:'regionWest',                                     
                region:"west",
                collapsible: true,
	            collapsed: false,
	            title: 'Menu',		      
	            width: 215,		       
		        bufferResize : true,	
		        autoScroll: true,
		        layout:'fit' 	
              },{
                title:'east',                     
                region:"east",
                width: 200                                      
            }]
	   });   
	   this.getTree();	     
    },
    getPanelHome:function(){
        var pnlHome  = new Ext.Panel({            
            title:'Home',                              
            frame:false,                                       
            border:false,
			layout:'fit'           
        });
        return pnlHome;       
    },
    getTree:function(){
        var west = Ext.getCmp('regionWest');        
        var tree = new Ext.tree.TreePanel({
            useArrows: true,
            autoScroll: true,
            animate: true,            
            enableDD: true,
            containerScroll: true,
            border: false,   
            rootVisible: false,        
            dataUrl:  App.utils.constants.URL_BASE_PATH +'Usuario/GetAcceso.castle',
            root: {
                nodeType: 'async',
                text: 'Menu',
                draggable: false,
                id: 'src'
            }
        });
        tree.on('dblclick',function(node,event){
		    if(node.childNodes.length == 0){
			    if(node.attributes.cls == 'file')
			    {    				
				    this.crearTab(node.attributes.claveReport, node.attributes.text,node.attributes.iconCls);
			    }else{
				    return;
			    }
		    }
	    },this);
        
        west.add(tree);        
        west.doLayout();
    },
    crearTab:function(strController,strDescr,strImg){
          this.tabHome.add({
                title: strDescr,	
                id: 'pnl-' + strController,
                layout:'fit',		   
			    closable:true,			    
			    listeners: {scope:this,beforeclose:function(p){			        
				    this.closePanel(this.tabHome,p);
				    return false;					
			    }},
			    items:[
                   new Ext.ux.IFrameComponent({                  
                   url:App.utils.constants.URL_SERVER + strController +'/Index.castle',//aqui cargamos la url de la pagina con el componente
                   name: strDescr
                })]
         }).show();
    },
    closePanel:function(tab,panel){
        Ext.Msg.show({
            title:'Cerrar Modulo',
            msg: '¿Esta seguro de cerrar el modulo?',
            buttons: Ext.Msg.YESNO,
            animEl: 'tabHome',            
            fn: function(btn){
                if(btn=='yes'){                                                                                                                                                                               
                    var pan = Ext.get(panel.getId());
                    pan.fadeOut({
                        endOpacity: .5,                       
                        duration: .3,
                        remove: false,
                        useDisplay: false
                    });  
                    setTimeout(function(){   
                        tab.remove(panel,true);
                    },250);                                 
                }                                                    
            },                 
            icon: Ext.MessageBox.QUESTION
       });   
    }        
  }
}();
Ext.onReady(Aplicacion.MainLayout.init,Aplicacion.MainLayout);
0
Hola la banda ya encontré la forma de cargar paneles en un tab desde el servidor, les dejo un ejemplo sencillo saludos a todos. Esto debe de estar en un archivo js
this.tabMain = new Ext.TabPanel({ 
               id:'tabMain',                                                                 
               activeTab :0,                                          
               border:false,
               enableTabScroll:true,
               autoScroll:true,
               resizeTabs:true,               
               tabWidth:250,  
               layoutOnTabChange :true
});  
 Ext.Ajax.request({
            scope:this,
            url: App.utils.constants.URL_BASE_PATH + 'Home/View.castle',         
            success: function(xhr) {
                var newComponent = eval(xhr.responseText);
                this.tabMain.add(newComponent).show();               
            },
            failure: function() {
    	        Ext.Msg.alert("Panel creado", "Error de comunicacion con el servidor");
            }            
 });
Lo que regresa la url tiene lo siguiente basicamente es un string:
(function(){var pl = new Ext.Panel({id:'panel-usuario',title:'Prueba',layout:'fit',frame: false,border:false,closable:true}); return pl;  })();
Espero a alguno de ustedes les ayude yo lo empezare a incorporar en futuros desarrollos saludos Les dejo mi twitter xD [url]http://twitter.com/vampireds[/url]

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