[SOLUCIONADO] ¿Como cargar GRID dentro de Tabpanel?
Buen dia amigos del foro, tengo el siguiente inconveniente. Estoy intentando cargar dentro de un tabpanel un grid que se genera en un archivo php. ¿ESTO ES POSIBLE?. He visto un demo de algo parecido en esta url: http://passer.es/tdbg/. El usuario: test password: test.
Tengo un tree donde al seleccionar uno de los nodos se abre una nueva pestaña. Hasta aqui todo bien.
Este es arbol. Tengo definidos dos nodos con id (4 y 5) y nombre. El atributo nombre es el que me permite abrir el archivo .php.
var tree= new Ext.tree.TreePanel({
border : false,
autoScroll : true,
root : { text: 'Pavimentos',
id: 1,
expanded: true,
children:[
{text: 'En ejecucion',
id: 2,
children: [{text:'pav1',
id: 4,
nombre: 'ejecutado',
leaf:true
//listeners: {click: function() {mostrarTab('ejecutado', 'pavimento ejecutado')}}
},
{text:'pav2', id: 5, nombre: 'en ejecucion', leaf:true}]
}
]}
});
tree.on('click', function(node, e){
this.quepasa(node);
},this);
Este es el tab inicial. El cual cargar un grid vacio.
this.tabs2 = new Ext.TabPanel({
border: false,
activetab : 0,
//setTitle: "calles",
enableTabScroll : true,
resizeTabs:true,
items: [EditorGrid]
});
Aqui la funcion quepasa asignada al evento click.
quepasa: function(node){
var tab = this.tabs2.findById("id-"+node.id);
var nombre = node.attributes.nombre;
if(!tab){
tab =new Ext.Panel({
id : "id-"+node.id,
closable: true,
title : node.attributes.text, //DOBLE T attributes
autoscroll: true,
iconCls: 'tabs',
autoLoad: {url: nombre +'.php', method: 'POST', params: {data:nombre},scripts: true, text: 'Cargando...', scope: this}
});
this.tabs2.add(tab);
this.tabs2.doLayout();
}
this.tabs2.activate(tab);
}
El nodo con id 5 carga el archivo 'en ejecucion.php' que lo unico que hace es imprimir la palabra prueba. Puedo abrir y cerrar sin incovenientes esta pestaña.
El problema es el nodo con id 4 que carga el archivo 'ejecutado.php'. Este archivo tiene codigo html que carga la libreria de ext y codigo javascript que genera un grid con datos provenientes de la base de datos.
Nota: si ejecuto este archivo directamente desde la url (http://aqui_mi_ip/qsig/recipes/paginas/ejecutado.php) se carga todo sin incovenientes.
PROBLEMA: Aparece el grid dentro del tab pero sin datos. El firebug me muestra correctamente la informacion que esta retornando de mi base de datos. Y aqui aparecen una serie de errores del estilo :
Ext.data.Api is undefined
Ext.DomHelper=function(){var w=null,k=...lclick",this.onNodeDblClick,this)}});
Ext.EventObject is undefined
Ext.DomHelper=function(){var w=null,k=...lclick",this.onNodeDblClick,this)}});
Este error aparece aprox. 10 veces y desde aqui abre las pestañas pero vacios.
Si alguien paso por lo mismo espero su colaboracion. gracias
ACLARACION: Para crear el tree, y agregar los tabs he seguido el tutorial 'Integración del TreePanel y TabPanel'.
Usuario no registrado
17/12/2010
Esta solucionado. No se porque razon la solucion (con fecha 22 dic) quedo arriba.
Invitado
29/12/2010
Porque esta ordenado por votaciones, también se puede ordenar por fecha ;-)
Crysfel Villa
29/12/2010
SOLUCIONADO. Gracias amigo por tu tiempo!. Para sacarme las dudas he creado un nuevo nodo y una pagina desde cero con un grid que cargaba la informacion desde un array en php. Y esta nueva pagina funciono. He modificado el panel que cargaba el grid y como se renderizaba. Mañana desde la oficina subo el archivo y edito el titulo del post.
Nota: Al tener dos o mas tabpaneles no usar el mismo id en el div de la pagina. Este error hara que solo se vea uno de los grid, la otra pestaña aparecera vacia. Encontrar el error me dio unos cuantos dolores de cabeza.
Este formulario forma parte del proyecto de Web mapping.
Gracias nuevamente.
Invitado
21/12/2010
¿COMO EDITO EL TITULO DEL POST?. Ya esta solucionado.
Asi quedo el panel que muestra el grid. Para los principiantes (como yo) nno poner el mismo div id para visulizar correctamente distintos tabpanel con su grid correspondiente.
var main = new Ext.Panel({
title: 'My first panel',
width:500,
height:600,
layout: 'fit',
defaults: {
collapsible:true,
border: false,
bodyStyle: 'padding:10px;',
titleCollapse: true,
height:200
},
items: [grid]
});
main.render('frame_nuevo');
Gracias tokkaido por tu colaboracion.
Invitado
22/12/2010
hice una prueba cargando datos ficticios desde una php, y me funcionó bien, lo único que podría ser que te estuviera dando problemas según veo configuras la propiedad url de tu jsonstore con una ruta absoluta y no sé si se pueda asi, creo que debería ser una ruta relativa, sin tu http://mi_ip, tambien puedes checkar si el json que se te devuelve es valido, puedes checarlo en la sgte pagina:
http://www.jsonlint.com/
podrias adjuntar tu pavimento.php para revisarlo.
otra cosa que me percaté mirando tu imagen del chrome es que por ahi tienes una ruta de una carpeta con espacio que podria estar dandote problemas "php sig" que el navegador interpreta con "php%20sig/"
tokkaido
21/12/2010
Gracias tokkaido por tu tiempo. Estuve investigando el metodo que me mencionaste.
Aun no logro implementarlo. Tendrias algun ejemplo de ello?.
Te comento que actualmente usando firefox el grid aparece vacio y los datos se ven en el firebug. si le doy al boton recargar (en el grid) aparecen los datos, pero con el error que te comente anteriormente (Ext.data.Api is undefined ....) y desde aqui ya no se carga ninguna de las pestañas, aparecen vacias. (adjunto imagen con error)
En chrome al cargar la pestaña con id4 se carga el grid con los datos, pero nuevamente con un error (adjunto imagen).
Invitado
20/12/2010
Pego el codigo del archivo ejecutado.php. No pude adjuntarlo.
Ext.ns('Quilmes');
Ext.QuickTips.init();
Quilmes.Grid = {
init:function(){
store = new Ext.data.JsonStore({
url: 'http://aqui_mi_ip/sig/php sig/pavimento.php',
storeId: 'store1',
root: 'datos',
totalProperty: 'total',
fields: [{name:'gid'},
{name:'nombre'},
{name:'tipo1'},
{name:'fotos'}
]
});
store.load({
params: {
start: 0,
limit: 10
}
});
var textField = new Ext.form.TextField();// creamos el textfield antes de crear el grid
//usamos el componente “Ext.grid.EditorGridPanel”
//var myColumModel = new Ext.grid.ColumnModel([
// new Ext.grid.RowNumberer(),
// {header: "id", width: 100, sortable: true, dataIndex: 'gid'},
// {header: "Nombre", width: 200, sortable: true, dataIndex: 'nombre', editor:textField},
// {header: "Tipo", width: 200, sortable: true, dataIndex: 'tipo1'}
// ]);
this.grid = new Ext.grid.EditorGridPanel({
store: store,
//cm: myColumnModel ,//referencia al columnModel
//config de las columnas, tambien se puede hacer con el componente EXt.grid.ColumnModel
columns: [
new Ext.grid.RowNumberer(),
{header: "id", width: 100, sortable: true, dataIndex: 'gid'},
{header: "Nombre", width: 200, sortable: true, dataIndex: 'nombre', editor:textField},
{header: "Tipo", width: 200, sortable: true, dataIndex: 'tipo1'},
{header: "Fotos", width: 200, sortable: true, dataIndex: 'fotos'}
],
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true
}),
width:600,
height:300,
frame:true,
stripeRows: true
});
// grid.render('grid-example'); ELIMINADO - SE IMPRIME EN EL Ext.Window
var win = new Ext.Panel({
renderTo: 'pavimento',
title: 'Datos de muestra',
closable:true,
closeAction:'hide',
layout: 'fit',
width:615,
height:342,
border:false,
plain:true,
region:'center',
items: this.grid
});
win.show();
}
}
Ext.onReady(Quilmes.Grid.init,Quilmes.Grid);
Invitado
20/12/2010
Tienes razon no hace falta cargar las librerias nuevamente. La segunda parte la pruebo y te aviso.
Que hace exactamente Ext.StoreMgr.lookup?. gracias por tu ayuda.
Invitado
18/12/2010
con Ext.StoreMgr si tienes varios store puedes hacer varias cosas sobre todo el conjunto de store o tomar uno con el lookup('storeId de tu sotre') y trabajar con el , en vez de usar el Ext.getCmp que según leí no es una buena practica. puedes leer un comentario de Crysfel al respecto aqui
http://foro.quizzpot.com/discussion/comment/2400/#Comment_2400
tokkaido
18/12/2010
creo que tu archivo ejecutado.php se carga dentro de tu tab no necesita las librerías de ExtJS porque las toma directamente de la pagina que lo contiene, por otro lado podrías tratar de tomar el store de tu grid (por ejemplo asignándole un storeId), y luego accesandolo asi: Ext.StoreMgr.lookup('el_id_de_tu_store').reload();
espero te sea de ayuda :)
tokkaido
17/12/2010
¿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.