El Panel es un contenedor especial que tiene funcionalidades y estructura especifica que lo hacen el componente ideal para crear bloques de componentes orientados a interfaces de usuario.
Los Paneles son, por virtud de herencia de Ext.Container, capaz de ser configurado con un layout y contener componentes hijos. Ejemplo de uso
<pre name="code" class="javascript">
var panel = Ext.create('Ext.Panel', {
fullscreen: true,
items: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Titulo estandar'
},
{
dock : 'top',
xtype: 'toolbar',
ui : 'light',
items: [
{
text: 'Buton ejemplo'
}
]
}
],
html: 'Espacio de prueba'
});
</pre>
Ext.form.Panel
Un formulario está constituido por un conjunto de campos de captura de y proporciona la manera adecuada para cargar y guardar los datos. Usualmente un formulario solo contiene los campos que se quieren desplegar, ordenados dentro de la propiedad items como el siguiente ejemplo:
<pre name="code" class="javascript">
var form = Ext.create('Ext.form.Panel', {
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Nombre'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
</pre>
De esta manera creamos un formulario simple que puede ser usado para el registro de un usuario a los servicios que proporcione tu aplicación. Agregamos un campo de texto con el nombre de usuario, un campo de email y uno más para el password. En cada caso, se proporciono el atributo name, de esta manera se puede identificar el valor ingresado para después almacenarlo o incluso cargarlo desde un servidor por ejemplo.
Cargando los datos
Utilizando el formulario que creamos arriba, podemos cargar datos dentro de él de diferentes maneras, la mas fácil es utilizando el método setValues:
<pre name="code" class="javascript">
form.setValues({
name: 'Joshua',
email: '[email protected]',
password: 'secret'
});
</pre>
También es fácil cargar la instancia de un Modelo en el formulario, digamos que tenemos el modelo del usuario y queremos cargarlo en el formulario, lo haríamos de la siguiente manera:
<pre name="code" class="javascript">
Ext.define('MiApp.model.User', {
fields: ['name', 'email', 'password']
});
var josh = Ext.create('MyApp.model.User', {
name: 'Joshua',
email: '[email protected]',
password: 'secret'
});
form.setRecord(ed);
</pre>
Recuperando los datos del formulario
Obtener los datos del formpanel es simple y usualmente se hace con el método getValues:
<pre name="code" class="javascript">
var values = form.getValues();
//la variable values debe tener ahora la siguiente estructura:
{
name: 'Joshua',
email: '[email protected]',
password: 'secret'
}
</pre>
Es posible también esperar los eventos del usuario o de los campos individualmente para estar notificados y accionar otros procesos. En el ejemplo, agregaremos un controlador al evento change agregándoselo a todos los campos para actualizar el nuevo valor escrito:
<pre name="code" class="javascript">
var form = Ext.create('Ext.form.Panel', {
listeners: {
'> field': {
change: function(field, newValue, oldValue) {
josh.set(field.getName(), newValue);
}
}
},
items: //como antes
});
</pre>
El ejemplo anterior utiliza las nuevas capacidades de Sencha Touch 2.0, que permite especificar los listeners de todos los hijos dentro del contenedor. En este caso, atamos un listener del evento change a todos los campos que son hijos directos del formulario. Nuestro controlador obtiene el nombre del campo cuando se dispara el evento y actualiza la instancia del modelo con el nuevo valor. Por ejemplo, cambian el valor del campo email, actualizara el valor del objeto del Model con el nuevo valor del campo también.
Enviando los datos del formulario
Hay diferentes maneras en enviar los datos de un formulario. En nuestro ejemplo de arriba, tenemos la instancia de un Modelo que hemos actualizado, dándonos la facilidad de utilizar el método save que persiste los cambios en la variable y devuelta al servidor. Alternativamente, podemos enviar los datos al navegador con un estándar submit utilizando el método submit:
<pre name="code" class="javascript">
form.submit({
url: 'url/enviar/los/datos.php',
method: 'POST',
success: function() {
alert('Los datos fueron enviados exitosamente!');
}
});
</pre>
En este caso, proporcionamos la url destino donde se envían los datos. Podemos especificar otros paramentos (ver el método submit para mayor detalle), incluyendo los métodos de retorno success y failure, que son llamados dependiendo de si la respuesta fue exitosa o no. Estas funciones son usualmente usadas para realizar alguna acción después de que los datos hayan sido guardados en el servidor, para mostrar un mensaje de éxito al usuario por ejemplo.
Opciones de configuración
• baseParams : Object
• maskTarget : Ext.dom.Element
• record : Ext.data.Model
• standardSubmit : Boolean
• submitOnAction : Object
• url : String
• waitTpl : Ext.XTemplate/String/String[]
Métodos
• disable( ) : Ext.form.Panel
• enable( ) : Ext.form.Panel
• getBaseParams( ) : Object
• getRecord( ) : Ext.data.Model
• getStandardSubmit( ) : Boolean
• getSubmitOnAction( ) : Object
• getUrl( ) : String
• getValues( Boolean enabled ) : Object
• getWaitTpl( ) : Ext.XTemplate/String/String[]
• hideMask( ) : Ext.form.Panel
• load( Ext.data.Model instance ) : Ext.form.Panel
• reset( ) : Ext.form.Panel
• setBaseParams( Object baseParams )
• setRecord( Ext.data.Model instance ) : Ext.form.Panel
• setStandardSubmit( Boolean standardSubmit )
• setSubmitOnAction( Object submitOnAction )
• setUrl( String url )
• setValues( Object values ) : Ext.form.Panel
• setWaitTpl( Ext.XTemplate/String/String[] waitTpl )
• showMask( String/Object cfg, String/HTMLElement/Ext.Element target ) : Ext.form.Panel
• submit( Object options ) : Ext.data.Connection
• updateRecord( Ext.data.Model instance, Boolean enabled ) : Ext.form.Panel
Eventos
• beforesubmit( Ext.form.Panel this, Object values, Object options, Object eOpts )PREVENTABLE
• exception( Ext.form.Panel this, Object result, Object eOpts )
• submit( Ext.form.Panel this, Object result, Ext.EventObject e, Object eOpts )PREVENTABLE
13
Ene 12
Twittear
Porqué es importante aprender a programar? ...
El éxito de las estimaciones de recursos en el Software ...
La programación dirigida por eventos también es un paradigma de programación
Consideraciones a tomar para llamarlo el mejor
Danos tus comentarios
Que tal Alverik.
Miércoles 01 de febrero, 2012Efectivamente esa es la funcionalidad que describes de setRecord(), unicamente considera que la asignacion de record a campos del formulario se realiza en un primer nivel y no recursivamente. Dependiendo del tipo de campo (Field) que quieras recuperar su valor apartir del Record, se valida si se puede hacer con las diferentes funciones setGroupValue, setChecked, setValue. Las asociaciones de los modelos tienen muchas ventajas en leer y almacenar los valores al servidor, no necesariamente para cargar todos los campos de un formulario.
Te recomiendo que consideres establecer manualmente los valores de los modelos internos que te hagan falta despues de llamar a la funcion, dependiendo del campo del formulario que quieras settear.
Espero mi comentario te sirva de algo y con gusto nos ponemos en contacto para realizar mas publicaciones interesantes
Muy buen articulo.
Miércoles 01 de febrero, 2012Me surge una duda, tengo 2 modelos relacionados por ejemplo alumno y grupo donde un alumno tiene un grupo y un grupo tiene muchos alumno, ahora bien, tengo un formulario donde muestro los datos del alumno, y también quiero mostrar algunos datos del grupo, se que el Ext.form.Panel cuando ejecutas la función setRecord() toma los campos del modelo y los relaciona con los campos que tiene el formulario y en automático muestra el respectivo valor, pero como puedo hacer lo mismo con los campos del modelo grupo
Espero haber explicado y espero tu respuesta, muchas gracias por adelantado
Por cierto en algún momento me gustaría unirme como publicador de artículos
Saludos