[Solucionado] Guardar informacion contenida en un tabPanel
Ext.ns('paquete');
paquete.modulo = {
ejecucion: function(){
Ext.Ajax.request({
url: 'php/procesar.php',
method: 'POST',
scope: this,
params: {
curso : Ext.get('curso').dom.value,
semana : Ext.get('semana').dom.value,
procedencia: Ext.get('procedencia').dom.value,
opcion : "buscar"
} ,
success: function(response){
var variable = response.responseText;
var form = new Ext.TabPanel({
activeTab: 0,
applyTo:'mainContent',
width:904,
items:[{title:'Vista',
html: variable,
width:904,
height:346,
anchor:'100%'
},
{
title:'Editor',
xtype:'htmleditor',
html: variable,
id:'editor',
name:'editor',
height:346,
anchor:'100%'
}],
buttons: [{iconCls:'save-icon',handler:function(){
form.getForm().submit( {url :'php/procesar.php',
method :'POST',
waitTitle :'Por Favor espere!',
waitMsg :'Almacenando Cambios...',
success: function(form,action){
Ext.Msg.alert('Exito',action.result.msg);
},
failure: function(form,action){
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Fallo', 'Los campos del formulario no pueden contener valores nulos');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Fallo', 'Fallo de comunicaci\u00f3n en la petici\u00f3n de AJAX');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Fallo', action.result.msg);
break;
default:
Ext.Msg.alert('Fallo',action.result.msg);
}
},
params: {
curso : Ext.get('curso').dom.value,
semana : Ext.get('semana').dom.value,
procedencia: Ext.get('procedencia').dom.value,
opcion : "actualizar"
}
});
},scope:this,id:'boton'}]
});
new Ext.ToolTip({
target: 'boton',
anchor: 'right',
html: 'G u a r d a r'
});
}
});
}
}
Ext.onReady(paquete.modulo.ejecucion,paquete.modulo);
Buenas comunidad!
mi problema es que estoy trabajando con el htmleditor y lo tenia dentro de un formPanel pero ahora lo necesito dentro de pestañas para mostrar la vista y a su vez el editor, todo funciona perfecto, soy novato pero lo que va de camino he podido guerrear un poco con esto, ahora lo que sucede es que cuando quise implementar el tab, ya no me guarda la informacion como antes y ya no se que hacer!
En la consola de errores me arroja lo siguiente:
form.getForm is not a function
handler()_______________________________________________element.js (línea 39)
Observable(a=Object { browserEvent=, button=-1, more...})_____ext-all.js (línea 7)
a = Object { browserEvent=, button=-1, more...}
Observable(O=Object { browserEvent=, button=-1, more...})____ ext-all.js (línea 7)
O = Object { browserEvent=, button=0, more...}
form.getForm().submit( {url :'php/procesar.php',_______________element.js (línea 39)
de antemano gracias
Saludos
Genial funciona perfecto, uno te pide un consejo y tu respondes con toda una ponencia sobre el tema, practicamente haces una auditoria :-bd lo otro que queria decirte y espero no te ofendas por ello y pido disculpas de antemano, se que lo que a mi me tomo 5 dias en este FrameWork (que me esta comenzando a encantar) a ti tan solo te tomaria media hora de tu tiempo, es que si quieres y puedes subas este ejemplo que me ayudaste a construir a tu sitio como parte del curso, ya que yo he visto a mucha gente perdida en los foros sobre editores y su implementacion, y pues de cierta manera tambien quiero colaborar como tu lo haces con todos y como este ya esta funcional quizas pueda servir de guia para algunos; en todo caso aqui anexo el codigo, estoy muy agradecido mi pana, espero que tambien apoyes los S.O. gnu/linux. y Que Dios te bendiga!
create database basedato;
use basedato;
drop table if exists curso;
create table if not exists curso (
id_curso varchar(8) not null,
semana varchar(8) not null,
procedencia varchar(25) not null,
texto longtext not null,
PRIMARY KEY (id_curso, semana, procedencia)
) type = InnoDB;
DELIMITER |
DROP PROCEDURE if exists basedato.textoHtml;
CREATE PROCEDURE basedato.textoHtml (nro VARCHAR(8), periodo VARCHAR(8), identifica VARCHAR(25), html LONGTEXT)
BEGIN
IF (SELECT COUNT(texto) FROM basedato.curso WHERE id_curso=nro AND semana=periodo AND procedencia=identifica)=0 THEN
INSERT INTO basedato.curso VALUES (nro,periodo,identifica,html);
ELSE
UPDATE basedato.curso SET texto=html WHERE id_curso=nro AND semana=periodo AND procedencia=identifica;
END IF;
END
| DELIMITER;
Demostracion
css/estilo.css:
.save-icon{background:transparent url(../images/disk.png) 0px 0px no-repeat !important;}
.nulo{display:none;}
Ext.ns('paquete');
paquete.modulo = {
ejecucion: function(){
Ext.Ajax.request({
url: 'php/procesar.php',
method: 'POST',
scope: this,
params: {
curso : Ext.get('curso').dom.value,
semana : Ext.get('semana').dom.value,
procedencia: Ext.get('procedencia').dom.value,
opcion : "buscar"
} ,
success: function(response){
var variable = response.responseText;
var vista = new Ext.Panel({
title:'Vista',
html: variable,
height:346,
autoScroll: true,
anchor:'100%'
});
var form = new Ext.form.FormPanel({
title:'Editor',
layout:'anchor',
labelAlign:'top',
items:[{
xtype:'htmleditor',
html: variable,
id:'editor',
name:'editor',
height:346,
anchor:'100%'
}]
});
var tab = new Ext.TabPanel({
activeTab: 0,
applyTo:'contenido',
width:904,
items:[vista,
form],
buttons: [{iconCls:'save-icon',
handler:function(){
form.getForm().submit( {url :'php/procesar.php',
method :'POST',
params: {curso : Ext.get('curso').dom.value,
semana : Ext.get('semana').dom.value,
procedencia: Ext.get('procedencia').dom.value,
opcion : "actualizar"},
waitTitle :'Por Favor espere!',
waitMsg :'Almacenando Cambios...',
success: function(form,action){
Ext.Msg.alert('Exito',action.result.msg);
vista.body.load({url : 'php/procesar.php',
params : {curso : Ext.get('curso').dom.value,
semana : Ext.get('semana').dom.value,
procedencia: Ext.get('procedencia').dom.value,
opcion : "buscar"},
method: 'POST'});
},
failure: function(form,action){
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Fallo', 'Los campos del formulario no pueden contener valores nulos');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Fallo', 'Fallo de comunicaci\u00f3n en la petici\u00f3n de AJAX');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Fallo', action.result.msg);
break;
default:
Ext.Msg.alert('Fallo',action.result.msg);
}
}
});
},
scope:this,
id:'boton'}]
});
new Ext.ToolTip({
target: 'boton',
anchor: 'right',
html: 'G u a r d a r'
});
}
});
}
}
Ext.onReady(paquete.modulo.ejecucion,paquete.modulo);
query($query);
if(!$resultado){
$info = array(
'success' => false,
'msg' => 'Se ha producido un error al guardar el registro'
);
}else{
$info = array(
'success' => true,
'msg' => 'Se ha Actualizado correctamente'
);
}
echo json_encode($info);
break;
case 'buscar':
$query="SELECT texto FROM curso WHERE id_curso='$codigo' AND semana='$semana' AND procedencia='$procedencia';";
$resultado=$conex->query($query);
$datos=$resultado->fetch_assoc();
$info=$datos['texto'];
echo $info;
break;
}
?>
Perdona que moleste de nuevo pero me surge una inquietud! en caso que asigne un id a la pestaña de vista, en extjs no existe alguna funcion similar a location.reload() pero que solo se implemente al tab de "Vista" sin que afecte al resto de la pagina? es que estoy buscando la solucion a lo arriba comentado... gracias por tus prontas respuestas
puedes tomar el body del panel y hacerle un "load()" pasandole la url de donde se cargará:
var vista = new Ext.Panel({
title:'Vista',
html: variable,
height:346,
anchor:'100%'
});
var tab = new Ext.TabPanel({
activeTab: 0,
applyTo:'mainContent',
width:904,
items:[vista, form ]
});
//y luego cuando quieras recargar vista, algo así:
vista.body.load({
url : "php/procesar.php",
params : {....}
});
en realidad "body" es un objeto de tipo Element, así que puedes usar cualquiera de sus métodos, te recomiendo revisar la documentación.
Saludos
Sucede que tu variables "form" no es un Formpanel, por lo tanto el error que te da en la consola es muy claro, te esta diciendo que no existe el método "getForm" para el objeto que esta referenciando la variable "form".
Si vez tu código encuentras esto:
var form = new Ext.TabPanel
Eso significa que "form" es un TabPanel y por lo tanto se genera el error, para solucionarlo te recomiendo crear la instancia de FormPanel, algo así:
//formulario
var form = new Ext.form.FormPanel({
.....
});
//tabpanel
var tabs = new Ext.TabPanel({
activeTab: 0,
applyTo:'mainContent',
width:904,
items : [form]
});
Saludos
Gracias amigo he solucionado el problema, todo gracias a ti y tus tutoriales! en esto eres como el mesias para nosotros los novatos, espero algun dia pagarte, y espero que sea con dolares ;-) para retribuir tu gran aporte incondicional a la comunidad
Ahora lo que quisiera como paso final es que el contenido que haya en la pestaña "Editor" pase automaticamente a la pestaña "Vista" a la hora de darle guardar sin necesidad de recargar la pagina, me metere de lleno con eso a ver como resuelvo y de nuevo Gracias
Saludos...
¿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.