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.
