grid = function(el, config){
	Ext.apply(this, config);
	
	this.config = config;
	
    // crea el  Data Store
    this.ds = new Ext.data.Store({
        // setea el proxy del Data Store
        proxy: eval( 'new Ext.data.' + config.proxy.name + '(config.proxy)'),
        // crea el reader 
        reader: eval( 'new Ext.data. ' + config.reader.name + ' (config.reader.meta, config.reader.recordType)'),
       // indica si existe ordenamiento en el servidor
        remoteSort: config.remoteSort
    });
	this.ds.setDefaultSort(config.defaultSort.field, config.defaultSort.direction);
	
	this.ds.baseParams = config.baseParams;
	
	// crea el modelo de columna
	this.cm = new Ext.grid.ColumnModel(config.columnModel.model);

    // setea si hay ordenamiento por defecto en el modelo de columna
    this.cm.defaultSortable = config.columnModel.defaultSortable;	
	
    // crea el grid
    this.grid = new Ext.grid.Grid(el, {
        ds: this.ds,
        cm: this.cm,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
        enableColLock:false,
        loadMask: true
    });

	// despues de cargar el grid selecciona el primer registro
	this.ds.addListener('load',this.grid.selModel.selectFirstRow, this.grid.selModel, true);

    // hece el  grid resizable
    this.rz = new Ext.Resizable(el, {
        wrap:true,
        minHeight:100,
        pinned:true,
        handles: 's'
    });
	
    this.rz.on('resize', this.grid.autoSize, this.grid);

    this.grid.render();
	
    this.gridFoot = this.grid.getView().getFooterPanel(true);
	
    this.paging = new Ext.PagingToolbar(this.gridFoot, this.ds, {
        pageSize: config.proxy.params.limit,
        displayInfo: true,
        displayMsg: 'Desplegando ' + config.descripcion.toLowerCase() + ' {0} - {1} de {2}',
        emptyMsg: 'No hay información de ' + config.descripcion.toLowerCase()  + '  para desplegar.'
    });	

};