Creacion y modificacion dinamica de una grilla de datos en Extjs

Iniciando con la creacion de una grilla, lo primero que necesitamos es una fuente de datos en un formato adecuado, se puede usar varios formatos aceptados por los stores de Extjs como son: xml, json, y arrays.

En esta oportunidad veremos como construir una aplicacion tal como este ejemplo: http://khrist14n.ap01.aws.af.cm/

Para lograr el cometido de crear una aplicacion como el ejm hay varios cometidos a tener en cuenta primero tener el framework Extjs listo para el trabajo, en este caso ese ejm se ha realizado con codeigniter un framework PHP con una estructura propia de trabajo por tanto la carpeta a usar en este caso seria una carpeta dentro de la estructura de codeigniter, yo usare una carpeta dentro del proyecto llamada extjs.

Lo primero la estructura obedece a los siguiente:

/ ->

——->application

——->extjs

——->public

——->system

  • Para quienes nunca usaron codeigniter la estructura es simple en application esta el code de tu app.
  • Extjs es la carpeta del framework extjs.
  • La carpeta public es la carpeta de los css y javascripts.
  • Y system es la carpeta del framework codeigniter.

A continuacion lo que se debe hacer es escribir en primer lugar el modelo de datos para codeigniter.. en este caso hare uso de una tabla usuario, teniendo en consideracion este script de sql: https://bitbucket.org/xhrist14n/linea.codigo/src/633ccc2e0907d6bd47d35e6d8b7f127ad29ae44a/samples.javascript/2/database.sql?at=master

Este script de sql lo usamos para crear nuestra tabla usuario en nuestra base de datos en mi caso se llama dbusuarios y tiene un usuario root sin password.

Luego de eso el codigo php del modelo seria el siguiente:

https://bitbucket.org/xhrist14n/linea.codigo/src/633ccc2e0907d6bd47d35e6d8b7f127ad29ae44a/samples.javascript/2/application/models/usuariomodel.php?at=master

Luego lo que necesitamos es un controlador para poder ejecutar acciones sobre este modelo, ese codigo tendria esta forma:

https://bitbucket.org/xhrist14n/linea.codigo/src/633ccc2e0907d6bd47d35e6d8b7f127ad29ae44a/samples.javascript/2/application/controllers/usuario.php?at=master

Y ahora si una vez escritos estos codigos de php, procedemos con el codigo de Extjs, en el caso de codeigniter se lanza primero un controlador y luego una vista nuestro controlador basico para lanzar la vista que a su vez carga todo el codigo en javascript para las interfaces extjs es el siguiente:

https://bitbucket.org/xhrist14n/linea.codigo/src/633ccc2e0907d6bd47d35e6d8b7f127ad29ae44a/samples.javascript/2/application/controllers/welcome.php?at=master

No olvidemos que luego de esto debemos tener la vista para que nos ejecute el codigo javascript:

https://bitbucket.org/xhrist14n/linea.codigo/src/633ccc2e0907d6bd47d35e6d8b7f127ad29ae44a/samples.javascript/2/application/views/welcome_message.php?at=master

En esta vista vemos cosas poco comunes como la forma de llamar por ejm a los codigos javascript eso es por la naturaleza del uso del framework codeigniter.

Las lineas:

<script src=”<?=base_url()?>/extjs/ext-all.js”></script>
<link rel=”stylesheet” href=”<?=base_url()?>/extjs/resources/css/ext-all.css”/>

detallan lo necesario para la carga del framework extjs como son el archivo de javascript para el framework tanto como la hoja de estilos del framework.
y la linea:

<script type=”text/javascript” src=”<?=base_url()?>/public/app.js”></script>

detalla la llamada del codigo de app.js donde esta nuestro viewport ademas indica la carpeta base desde donde carga nuestras vistas y demas codigos de la aplicacion de cliente web en javascript.

Seguidamente el codigo:

                {
                    xtype: 'gridpanel',
                    region: 'center',
                    title: 'Usuarios',
                    id:'gridpanel',
                    columns: [
                                                {
                            xtype: 'gridcolumn',
                            hidden:true,
                            dataIndex: 'id',
                            text: 'id',                                                 
                            flex: 1
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'usuario',
                            text: 'Usuario',                                                    
                            flex: 1
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'nombre',
                            text: 'Nombre',
                            flex: 1
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'apellidos',
                            text: 'Apellidos',
                            flex: 1
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'telefono',
                            text: 'Telefono',
                            flex: 1
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'celular',
                            text: 'Celular',
                            flex: 1
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'descripcion',
                            text: 'Descripcion',
                            flex: 2
                        }
                    ],
                    listeners:
                    {
                        'cellclick':function(grid,td,cellIndex,record,tr,rowIndex,event,object){
                            var id=record.get('id');
                            Ext.Ajax.request(
                                {
                                    url:'usuario/select',
                                    method:'post',
                                    params:
                                        {
                                            'id':id
                                        }
                                    ,success:function(response,opts){
                                        var responseData=null;
                                        try{responseData=response['responseText'];}catch(ex){responseData='';}
                                        var data=null;
                                        try{data=Ext.decode(responseData);}catch(ex){}
                                        if(data!=null){

                                        }else{ 
                                            Ext.Msg.alert("Error","Hubo un error en el proceso");
                                        }
                                        return;
                                    }
                                }
                            );
                            return;
                        }
                    },
                    store: Ext.create(
                            'Ext.data.Store', 
                            {
                                remoteSort: true,
                                pageSize: 200,
                                fields: [
                                    'id',
                                    'usuario',
                                    'nombre',
                                    'apellidos',
                                    'telefono',
                                    'celular',
                                    'descripcion'
                                ],
                                proxy: {
                                    type: 'ajax',
                                    url: '/usuarios/usuario/view',
                                    reader: {
                                        root: 'items',
                                        totalProperty: 'totalCount'
                                    }
                                },
                                autoLoad: false
                            }
                        )
                }

nos muestra el codigo base para la grilla esto lo encontramos en el archivo: GrillaViewport.js
https://bitbucket.org/xhrist14n/linea.codigo/src/633ccc2e0907d6bd47d35e6d8b7f127ad29ae44a/samples.javascript/2/public/app/view/GrillaViewport.js?at=master
En el codigo podemos observar las columns esas son las columnas de datos de nuestra grilla, luego lo siguiente son los listeners los cuales nos sirven para poner los eventos que la grilla puede usar durante su ejecucion, tambien hay un store que en este caso es de tipo json el cual recoge los datos proveidos por el controlador de codeigniter para mostrar los mismos en nuestra interfaz de Extjs.
La base del codigo de nuestra grilla es que nos indica mediante propiedades todo cuanto se usara para cargar los datos, es comun el uso de un lector llamado reader donde se muestra unas propiedades root: ‘items’ que indica la variable que almacena los datos del json tanto como  la propiedad totalProperty: ‘totalCount’que nos muestra en el json la cantidad de datos a mostrarse en la grilla.
Y el url es la direccion del controlador que atendera la peticion ajax dando una salida json adecuada para la lectura mediante ajax.
Un codigo que nos es util para hacer la recarga de nuestra grilla es el siguiente:
var grid=this.down(‘gridpanel’);
grid.getStore().load();
grid.getView().refresh();
Este codigo hace la recarga de la grilla cargando la data nuevamente desde la fuente de datos, una consideracion importante para poder hacer uso de esta funcionalidad es que el controlador que entrega datos debe ser dinamico en la entrega de datos para que nuestros datos varien en tiempo de ejecucion de nuestra aplicacion.

Codigo : https://bitbucket.org/xhrist14n/linea.codigo/src/633ccc2e0907/samples.javascript/2?at=master
Zip:     https://dl.dropboxusercontent.com/u/12443541/blogger/extjs/2.-Creacion%20y%20modificacion%20dinamica%20de%20una%20grilla%20de%20datos%20en%20Extjs/usuarios.zip
Escrito por : Christian Portilla Pauca

Anuncios

11 comentarios en “Creacion y modificacion dinamica de una grilla de datos en Extjs

  1. Bueno amigo camilo es bastante simple, primero que nada debes tomar en cuenta que se uso codeigniter para la parte de backend de este ejm, asi que primero debes dirigirte al punto de configuracion de bd de codeigniter… https://bitbucket.org/xhrist14n/linea.codigo/src/633ccc2e0907d6bd47d35e6d8b7f127ad29ae44a/samples.javascript/2/application/config/database.php?at=master lo cual te lleva a editar el archivo application / config / database.php, donde encontraras un codigo parecido a esto:
    $active_group = ‘default’;
    $active_record = TRUE;

    $db[‘default’][‘hostname’] = ‘localhost’;
    $db[‘default’][‘username’] = ‘root’;
    $db[‘default’][‘password’] = ”;
    $db[‘default’][‘database’] = ‘dbusuarios’;
    $db[‘default’][‘dbdriver’] = ‘mysql’;
    $db[‘default’][‘dbprefix’] = ”;
    $db[‘default’][‘pconnect’] = TRUE;
    $db[‘default’][‘db_debug’] = TRUE;
    $db[‘default’][‘cache_on’] = FALSE;
    $db[‘default’][‘cachedir’] = ”;
    $db[‘default’][‘char_set’] = ‘utf8’;
    $db[‘default’][‘dbcollat’] = ‘utf8_general_ci’;
    $db[‘default’][‘swap_pre’] = ”;
    $db[‘default’][‘autoinit’] = TRUE;
    $db[‘default’][‘stricton’] = FALSE;
    en ese codigo modificas el hostname, el username, el password, y la database y todo debe funcionar … con eso te bastara ….

    supongo que con esto tu dilema esta resuelto .. suerte..

  2. Cuando se carga el Store del GridPanel, me abre el resultado en una ventana nueva, tienes alguna idea ? me falta configurar algo en el codeigniter??

  3. Me parece que eso tiene mas que ver con el navegador que usas parece que ese navegador no admite los archivos json … quizas con algunos cambios en el archivo json tendrias que modificar las cabeceras del controller que lanza los datos en formato json.

    Creo que podre responderte mejor si me das una idea de que url te lanza ese problema …

    atte

    christian

  4. Saludos! Estoy revisando tu código para aprender a integrar los dos FW y realizar un proyecto que tengo. Sólo que tengo la siguiente duda. Cómo hago si quiero sacar el store de la vista grilla y declararlo en un archivo aparte; en el directorio dispuesto por Ext JS para ese fin, el app/views/store?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s