Creacion de grillas Extjs

Desarrollo Extjs 4 on ,

En este post explicare sobre la creacion de grillas de datos que son utilizados frecuente mente a la hora de mostrar múltiple informacion.

Para la creación de data grids extjs define el componente de su framework asi  : Ext.panel.Grid que muestra la informacion configurada de su Store de datos “Ext.data.Store” y modelo de datos “Ext.data.Model”. En el “store” se define si los datos son asincronos o si los datos son datos almacenados localmente o definidos localmente con JavaScript.

La creacion de grilla del extjs se deben cumplir los siguientes pasos :

1) Definir el modelo de datos(Campos de informacion Ext.data.Model )

2 ) Definir el store o almacenador del modelo de datos (Se define el Ext.data.Store)

3) Definir el componente del api Ext.panel.Grid presentacion y renderizacion.

Codigo Ejemplo grilla Basica Informacion Local (Ver Ejemplo aqui)

Ext.onReady(function(){

    // Define model extends
    Ext.define("ModelFrutas",{
        extend : "Ext.data.Model",
        fields  : [
            {name: 'codigo', type :'string'},
            {name: 'descripcion', type :'string'},
            {name: 'foto', type:'string'}
        ]
    });

    // define almacenador local con informacion local java Script
    var storeFrutas = Ext.create("Ext.data.Store",{
        model : "ModelFrutas",
        data  : [
            {"codigo" : '01','descripcion':'Piña','foto':"http://www.olmue.com.co/wp-content/uploads/2012/08/shutterstock_121228002.jpg"},
            {"codigo" : '02','descripcion':'Manzana','foto':"http://dietas.elembarazo.net/files/2012/08/Manzana-embarazo.jpg"},
            {"codigo" : '03','descripcion':'Banano','foto':"http://www.agrobio.org/bfiles/art_imgart-44.jpg"},
            {"codigo" : '04','descripcion':'Mango','foto':"http://static.comefruta.es/uploads/2011/09/mango9.jpg"},
            {"codigo" : '05','descripcion':'Sandia','foto':"http://www.entrenandotualimentacion.es/wp-content/uploads/2013/04/sandia.jpg"}
        ]
    });

    //Defiinimos la presentacion de la grilla
    var grid = Ext.create("Ext.grid.Panel",{
        title : "Frutas colombianas",
        store : storeFrutas,

        width : 600,
        height : 300,
        columns : [ //-> se definen las culumnas con la informacion a mostrar
            {text : "Codigo Fruta",dataIndex: "codigo"},
            {text : "Descripcion",dataIndex: "descripcion"},
            {text : "Foto",flex:1,dataIndex: "foto",
                renderer: function(value, metaData, record) {
        		return '< img width ="50" height="50" src='+value+'">;';
        	}
            },
        ]
    }); 

    grid.render("x_contenido"); //---> donde se mostrara en tu archivo html index.
});