Creacion de Grids dentro de un objeto Tab.Panel en ExtJs 4

Para los que no conoscan ExtJs es un framework en JavaScript que permite, entre muchas otras cosas, insertar en tu sitio web elementos dinamicos como tablas (Como en excel, que son llamados grid) con capacidades CRUD dentro de tu base de datos. Capaz de manejar datos en Json con lo que no es necesario la recarga completa de la pagina para mostrar nueva informacion!.

http://en.wikipedia.org/wiki/Ext_JS (:

Aveces el enfoque OO del framework hace un poco difícil la creación de elementos complicados que no se vean normalmente como ejemplos. En este caso tenemos la creación de un grid dentro de un tab, que esta dentro de un formulario. (Como el de la imagen)

Aunque la atencion en los foros de sencha (los creadores de extjs) para este tipo de preguntas es un poco agresiva (http://www.sencha.com/forum/showthread.php?33838-Grid-Tab-Panel ver post #2), muchas veses es bueno pasarse por alla y leer algo del feedback que siempre algo bueno trae.

Para el caso real tenemos un objeto form.panel en el cual dentro de sus items tiene uno de tipo panel (xtype:'tabpanel').

Para añadir un grid hay que crear el objeto afuera dentro de una variable. No es necesario definir explicitamente renderTo ya que lo heredará del tab y se rendeará directamente en el.

    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        width: 470,
        height: 200,
        frame: true,
        clickstoEdit: 1,
        title: 'Listado de asistencias',
        viewConfig: { forceFit: true },
        columns: [{
            text: 'Mifila1', width: 200, dataIndex: 'serial', sortable: true
            },
            {
            text: 'Mifila2', width: 250, dataIndex: 'created', sortable: true
            }
        ],
        listeners: {
                itemclick : function(grid, rowIndex, e) {
                    //Dont do anything.
                }
        }
       
    });

No nos olvidemos de crear tambien el modelo asi como el store del grid.
Es necesario colocar datos como titulo ya que estos datos son buscados por el padre (en este caso el panel de tab) para crear el titulo de la barra.

La manera de que el grid se genere en una nueva pestanã es llamandolo desde los items del tab como en el ejemplo

xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            autoHeight: true,
            height:300,
            region: 'center',
             viewConfig: { forceFit: true },
            defaults:{autoScroll:true, bodyStyle:'padding:10px'},

            items:[{
                title:'ANAMNESE',
                defaults: {width: 210},
                items: [{
                    xtype: 'combo',
                    store: laser_depTypes,
                    fieldLabel: 'Tipo de depilacion anterior',
                    name: 'laser_typeDep',
                    forceSelection: true,
                    editable: false,
                    displayField: 'name',
                    valueField: 'type',
                    mode: 'local'
                },{
                    xtype: 'combo',
                    store: laser_pelo,
                    fieldLabel: 'Pelo',
                    name: 'laser_pelo',
                    forceSelection: true,
                    editable: false,
                    displayField: 'name',
                    valueField: 'type',
                    mode: 'local'
                }
                ]
            },{
                title: 'EVOLUÇÃO',
                cls: 'x-plain',
                layout: 'fit',
                viewConfig: { forceFit: true },
                items: {
                    xtype: 'htmleditor',
                    name: 'bio2',
                    fieldLabel: 'Evolução'
               }
            },grid]

Espero que esto sea de ayuda a aquellos como yo que estamos empezando en esta herramienta ExtJs!
Proximamente coloco un adjunto con el codigo completo!