Otra alternativa para IFrame
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);
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.