ExtJS – Table layout

ExtJS and Sencha Touch Themes and Templates

ExtJS – Table layout

Apr 05, 2010 | Español | By Crysfel | 19 Comments

En este video-tutorial se explica la creación de un formulario con varios campos en una misma fila, para esto usaremos un “Table layout” que nos permitirá distribuir los componentes en la manera correcta.

Author: Crysfel

I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter

Download Demo

Por medio de un “Table layout” podemos acomodar nuestros componentes en una grilla, para este ejemplo he creado un formulario con varios campos de texto en una misma fila, esta es una pregunta muy frecuente en los foros y por lo tanto creo que es importante explicarlo.

No olvides seguirnos en twitter (@quizzpot) para estar al tanto de las actualizaciones.

19 Responses to “ExtJS – Table layout”

Miguel Céspedes Apr 05, 2010

Que fácil se ve, gracias

Reply
HalleyR Apr 05, 2010

Hola Crisfel gracias por el video, tengo una duda como utilizarias el json generado por el ext designer seria bueno si pudieses hacer un tuto creando la interfaz con ext designer y agregar la logica al formulario generado si pudieses claro .

Otra duda que tengo es como puedo yo usar internacionalizacion con extjs es decir tanto a mis nombres de formularios que carguen dinamicametne de la bd?

G

Reply
- Crysfel Apr 06, 2010
  
  Si, sería bueno hacer un tut al respecto, lo voy a realizar pronto
Miguel Céspedes Apr 05, 2010

Muchas gracias por el ejemplo, esta bacan

Reply
Socr@m Apr 06, 2010

Gracias por este y todos los videos-tutoriales que haces.

Y aparte de darte las gracias queria agregar un “tip” sobre una propiedad que no has mostrado en los videos.

Cuando creas el “FormPanel” y quieres que todos los “Panels” internos tengan la misma configuración puedes usar la propiedad “defaults” en el “FormPanel”, esto seria:

{
xtype: ‘form’,
layout: ‘fit’,
defaults: {
border: false,
padding: 5,
layout: ‘form’,
… // Más propiedades
}
… // Más proiedades
items: [
...
// Todos los "Panels" que heredaran la conf.
// establecida en "defaults"
]
}

Saludos!

Reply
Kometa Apr 07, 2010

Muchas Gracias por el tuto. Me a servido mucho este material, pero aun tengo problemas con la inserccion en las bd, ya que me es muy confuso el tema con sessions.

Saludos.- Maestro.-

Reply
Miguel Céspedes Apr 22, 2010

¿cuando vas a publicar mas ejemplos?

Reply
Antrax May 05, 2010

Hola Crysfel:

Mis felicitaciones por tan buen trabajo que realizas, ademas del talento que posees.

Sigo muy de cerca los ajemplos que pones, me han ayudado mucho.

Sugiero que expliques al publico un poco sobre el uso de los Dataview y loas listeners para sus items o elementos. Por ejemplo al darle click, Drag & Drop, etc.

Saludos

Reply
Daniel May 05, 2010

vas a publicar + ejemplos?

Reply
- Crysfel May 05, 2010
  
  Claro, estoy preparando algunos mas
Diego Gonzales Soto May 11, 2010

Hola crysfel como estas, me gustaria saber como puedo capturar una foto y almacenarlo en mi base de datos todo esto con php y una camara webs.

Reply
- Crysfel May 12, 2010
  
  mmmm…. utiliza un applet de JAVA para tomar la fotografía y luego poder enviarla a tu PHP para que la guarde en tu base de datos. http://castleamber.com/ambercam.html
Lumir Olivares Jul 18, 2010

Hola crysfel, me gustaria saber si ademas del borderlayout y el table layout puedo usar otros, he escuchado de uno que se llama GridBagLayout que es muy versatil aunque un poco complejo, es que estoy haciendo un proyecto con ExtJS pero quiero cuadrar de manera que se vean bien ordenados los componentes dentro de un panel o una ventana

Reply
Lumir Olivares Jul 21, 2010

El codigo que me genera el Ext Designer al momento de pegarlo en un archivo .js no me sale… solo me aparecen los componentes que creo manualmente……help me please!!!

Reply
juana Aug 31, 2010

quisiera que me den una ayuda de como usar el patron de diseño mvc en un proyecto hecho con extjs

Reply
ilen Nov 06, 2010

Wao que facil se ve con el designer, si van hacer ejemplos de validacion de form con eventos?
y la coxion a bases de datos como MySql?
SALU2

Reply
Tadeo Dec 24, 2010

Hola Yo segui todos los pasos pero no me aparecen los labels , <stoy usando ExtDesigner 1.0.3.2.

Gracias.

Reply
- Tadeo Dec 24, 2010
  
  Ya lo resolvi falto creo en el video establecer el fieldlabel en las cajas de texto:
  
  fieldlabel:Quizzpot
  
  Gracias y buen tutorial.
krasho Jun 28, 2011

Hola crysfel, gracias por el tuto, tengo una duda, cómo le puedo hacer para que los páneles dentro del FormPanel, se ajusten automáticamente al ancho de la ventana, es decir, si redimensiono quedan del mismo tamaño.

Saludos

Reply