Como incluir un formpanel de un JS externo?
Que tal compañeros estoy desarrollando una interfaz que consta de un treePanel y un tabPanel, que estan dentro de un archivo main.js, el caso es que tengo un archivo alta.js que contiene formulario y quisiera agregarlo a un tab cuando de click en algun nodo de mi treepanel de mi otro archivo, me podrian decir como lo puedo hacer?
tabb = new Ext.Panel({
id: "id-" + node.id,
closable: true,
title: node.attributes.text, //dentro del objeto "attributes" encuentras toda la información que contiene el nodo
layout: 'fit',
scope: this,
items: [this.form],
buttonAlign: 'left',
buttons: [
{
text: 'Enviar',
},{
text: 'Cancelar'
}
]
});
this.tab.add(tabb);
this.tab.doLayout();
items: [this.form], //<--- aqui lo agrego pero introduciendo mi formulario en el mismo archivo, espero me puedan dar alguna ayuda para poder resolver esto, tambien estoy creando un Grid y me imagino que debe ser igual si se logra poner el formulario
Usuario no registrado
04/01/2011
Seria mejor que hicieras tu componente de la sgte forma
myVentanaFormulario = Ext.extend(Ext.Window, {
//aqui colocas la configuracion del componente que estas extendiendo
//alto , ancho, titulo, etc
title: 'el titulo de tu ventana',
width: 400,
height: 200,
layout: 'fit',//importante el layout!!!!
resizable: false,
modal: true,
constrain: true,
initComponent: function() {
//aqui colocas los componentes que integran tu ventana
//como el formulario
this.items = [
{
xtype: 'form',
padding: 10,
url: 'tu_pagina.php',
items: [
//los componentes de tu formulario
//cuadros de texto, combos, etc
{
xtype: 'textfield',
fieldLabel: 'mi texto',
anchor: '100%',
allowBlank: false,
id: 'id_texto'
}
]
}
];
//los botones de tu formulario
this.fbar = {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Guardar',
iconCls: 'guardar'
}
]
};
myVentanaFormulario.superclass.initComponent.call(this);
}
});
//incluso puedes registrarlo para usarlo con xtype
Ext.reg("my_ventana",myVentanaFormulario);
y luego en el evento click de lo que quieras, un boton, click de un nodo en un treepanel, etc, puedes llamar a tu formualrio asi:
form = new myVentanaFormulario();
form.show();
recuerda colocar el js de tu componente antes del js del resto de tu modulo, es decir, por ejemplo:
espero te sea de ayuda
tokkaido
05/01/2011
Sigue lo que te recomienda @tokkaido solamente que hereda de Ext.Panel en lugar de Ext.Window ya que lo que tu deseas es agregar un tab en la region central.
Saludos
Crysfel Villa
05/01/2011
muchas gracias Tokkaido ya lo he hecho asi como dices y segui tu consejo crys pero ahora el problema es mi tree panel cuando doy click me marca error
b is undefined
[Break on this error] (function(){var h=Ext.util,k=Ext.each,...lclick",this.onNodeDblClick,this)}});
la funcion donde cacho el click es esta
this.tree.on('click',function(node){
this.addTab(node);// esta función será creada a continuación
},this);
addTab: function(node){
var tabb = this.tab.findById("id-"+node.id);
var nombre = node.attributes.text;
if(node.isLeaf){
if(!tabb){
if (nombre == 'Alta') {
tabb = new Form_Alta_Inv(); //
Me parece que es mi funcion del treepanel pero no logoro ver cual es el error, espero me brinden su ayuda de nuevo
Invitado
05/01/2011
Mi archivo alta.js es el siguiente ya esta encapsulado "eso creo yo"
Ext.ns("cesave");
cesave.formulario = {
init: function(){
this.fecha = new Ext.form.DateField({
fieldLabel: 'Fecha Adquisición',
format: 'D-m-y',
id: 'fecha'
});
var data = ['Vehiculo','Pieza','Persona'];
this.comboUnidad = new Ext.form.ComboBox({
fieldLabel: 'Unidad de Medida',
id: 'unidad',
store: data,
forceSelection: true,
triggerAction: 'all',
editabe: false
});
this.comboPersonal = new Ext.form.ComboBox({
fieldLabel: 'Asignado a',
id: 'asignado',
forceSelection: true,
triggerAction: 'all',
editabe: false
});
/*******************************************************************************/
/* Formulario de Alta */
this.form = new Ext.FormPanel({
border: false,
defaults: {
xtype: 'textfield',
width: 280
},
items: [{
fieldLabel: 'Campaña fitosanitaria', // & n tilde; n ---> ñ
//emptyText: 'Broca del cafe',
id: 'campania'
},{
fieldLabel: 'Descripción',
id: 'descripcion'
}, this.comboUnidad //
La verdad soy bastante nuevo en esto y pues nose como instanciar este componente :-( , plis help
Invitado
05/01/2011
En primer lugar necesitas importar dinámicamente al DOM el script donde se encuentra tu formulario.
Ahora, debes escribir el formulario correctamente encapsulado y en su respectivo namespace con toda la fucionalidad que necesites, luego simplemente creas la instancia de ese componente (cuando des click sobre el nodo correspondiente en el treepanel) y lo agregas al tab que estás insertando, lo mismo para el grid y cualquier otro componente, recuerda que tienes que hacer "modulos" que harán todo lo que quieras.
Saludos
Crysfel Villa
05/01/2011
el problema al parecer es en la line que pones
this.tab.add(tabb);
this.tab.doLayout();
remplazalo por
this.tabs.add(tabb);
this.tabs.doLayout();
Invitado
13/07/2012
Hola @Roberufu yo tmb tuve el mismo problema pero no tuve problema si deseas te puedo ayudar
Invitado
02/08/2012
¿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.