PDA

View Full Version : Expand column grid



jocampo
17 Sep 2009, 12:01 PM
Hi everybody..
I am using ExtJS 3.0 and I am trying to show data in a grid. I need to show 3 grids, but only the first one show fine and with the column expanded, the others show like compact but when I refesh them they become expanded..

I am attaching the images of the grids, the "image01.jpg", show the first grid expanded and the image02 and 03 show them compact.

Here is my code:


Ext.onReady(function()
{
Ext.QuickTips.init();

/***************agrupación de tabs***************/
var body = Ext.get('contenedor_principal');
items = body.query('div[class=tab_item]');

var tabsPanel = new Ext.TabPanel
(
{
region:'center',
applyTo: 'contenedor_principal',
id: 'tab_panel',
autoScroll: true,
width: 915,
plain:true,
deferredRender:false,
hideMode: 'offsets',
frame:true
}
);

for( var i = 0 ; i < items.length ; ++i)
{
var item = Ext.get(items[i]);
var elementos = item.query('input[class=titulo_tab]');
var titulo = Ext.get(elementos[0]).dom.value;
var tab = new Ext.Panel
(
{
title: titulo,
id: 'tab_'+item.id,
region: 'center',
contentEl: item.id,
closable:false,
autoScroll:true
}
);

tabsPanel.add(tab);
}
tabsPanel.setActiveTab(0);
/**************************************************/

/*******************Creacion Grid******************/
////////////////Grid Adicionales////////////////
var storeAdicionales = new Ext.data.JsonStore(
{
//url: '/ope_actividades/getAdicionales',
proxy: new Ext.data.MemoryProxy(Ext.util.JSON.decode(Ext.get('txt_adicionales').dom.value)),
root: 'adicionales',
totalProperty: 'total',
id: 'hostname_id',
fields:
[
{name:'hostname_id', mapping:'hostname_id'},
{name:'nombre', mapping:'nombre'},
{name:'es_registrada', mapping:'es_registrada'},
{name:'es_finalizada', mapping:'es_finalizada'},
{name:'es_aprobada', mapping:'es_aprobada'},
{name:'es_cancelada', mapping:'es_cancelada'},
{name:'es_rechazada', mapping:'es_rechazada'},
{name:'es_reprogramada', mapping:'es_reprogramada'},
{name:'es_reversada', mapping:'es_reversada'}
]
});

var checkCrea = new Ext.grid.CheckColumn(
{
header: 'Crea',
dataIndex: 'es_registrada',
hideable: false,
width: 55
});

var checkReversa = new Ext.grid.CheckColumn(
{
header: 'Reversa',
dataIndex: 'es_reversada',
hideable: false,
width: 55
});

var checkRechaza = new Ext.grid.CheckColumn(
{
header: 'Rechaza',
dataIndex: 'es_rechazada',
hideable: false,
width: 65
});

var checkReprograma = new Ext.grid.CheckColumn(
{
header: 'Reprograma',
dataIndex: 'es_reprogramada',
hideable: false,
width: 65
});

var checkAutoriza = new Ext.grid.CheckColumn(
{
header: 'Autoriza',
dataIndex: 'es_aprobada',
hideable: false,
width: 65
});

var checkCancela = new Ext.grid.CheckColumn(
{
header: 'Cancela',
dataIndex: 'es_cancelada',
hideable: false,
width: 65
});

var checkFinaliza = new Ext.grid.CheckColumn(
{
header: 'Finaliza',
dataIndex: 'es_finalizada',
hideable: false,
width: 65
});

var cmAdicionales = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{
id: 'hostname_id',
header: 'IdEmpleado',
dataIndex: 'hostname_id',
hidden: true,
hideable: false
},
{
id: 'nombre',
header: 'Nombre',
dataIndex: 'nombre',
width: 100,
hideable: false,
sortable: true
},
checkCrea,
checkRechaza,
checkReprograma,
checkAutoriza,
checkCancela,
checkReversa,
checkFinaliza
]);

gridAdicionales = new Ext.grid.GridPanel(
{
id:'gridAdicionales',
store: storeAdicionales,
cm: cmAdicionales,
renderTo: 'adicionales',
width: 700,
height: 155,
//viewConfig: { forceFit:true },
columnLines: true,
autoExpandColumn: 'nombre',
frame: true
});

////////////////Grid Colaboradores////////////////
var storeColaboradores = new Ext.data.JsonStore(
{
//url: '/ope_actividades/getColaboradores',
proxy: new Ext.data.MemoryProxy(Ext.util.JSON.decode(Ext.get('txt_colaboradores').dom.value)),
root: 'colaboradores',
totalProperty: 'total',
id: 'hostname_id',
fields:
[
{name:'hostname_id', mapping:'hostname_id'},
{name:'nombre', mapping:'nombre'}
]
});

var cmColaboradores = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{
id: 'hostname_id',
header: 'IdEmpleado',
dataIndex: 'hostname_id',
hidden: true,
hideable: false
},
{
id: 'nombre',
header: 'Nombre',
dataIndex: 'nombre',
width: 200,
hideable: false,
sortable: true
}
]);

gridColaboradores = new Ext.grid.GridPanel(
{
id:'gridColaboradores',
store: storeColaboradores,
cm: cmColaboradores,
renderTo: 'colaboradores',
width: 250,
height: 100,
//viewConfig: { forceFit:true },
columnLines: true,
autoExpandColumn: 'nombre',
frame: true
});

////////////////Grid Criterios////////////////
var storeCriterios = new Ext.data.JsonStore(
{
//url: '/ope_actividades/getCriterios',
proxy: new Ext.data.MemoryProxy(Ext.util.JSON.decode(Ext.get('txt_criterios').dom.value)),
root: 'criterios',
totalProperty: 'total',
fields:
[
{name:'id_criterio', mapping:'id_criterio'},
{name:'criterio', mapping:'criterio'},
{name:'detalle', mapping:'detalle'},
{name:'query', mapping:'query'}
]
});

var cmCriterios = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{
id: 'id_criterio',
header: 'IdCriterio',
dataIndex: 'id_criterio',
hidden: true,
hideable: false
},
{
id: 'criterio',
header: 'Criterio',
dataIndex: 'criterio',
width: 50,
sortable: true
},
{
id: 'detalle',
header: 'Detalle',
dataIndex: 'detalle',
width: 50,
sortable: true
},
{
id: 'query',
header: 'Query',
dataIndex: 'query',
hidden: true,
hideable: false
}
]);

gridCriterios = new Ext.grid.EditorGridPanel(
{
id:'gridCriterios',
store: storeCriterios,
cm: cmCriterios,
renderTo: 'criterios',
width: 450,
height: 200,
//viewConfig: { forceFit:true },
columnLines: true,
bbar:new Ext.PagingToolbar(
{
pageSize: 8,
store: storeCriterios,
displayInfo: true,
displayMsg: 'Mostrando Criterios {0} - {1} of {2}',
emptyMsg: 'No se encontro criterios para mostrar',
items:['-']
}),
autoExpandColumn: 'detalle',
title: 'Criterios de Seleccion',
frame: true
});

////////////////Grid Afectados////////////////
var storeAfectados = new Ext.data.JsonStore(
{
url: '/ope_actividades/getAfectados',
root: 'afectados',
totalProperty: 'total',
fields:
[
{name:'id_cliente', mapping:'id_cliente'},
{name:'usuario', mapping:'usuario'},
{name:'filial', mapping:'filial'},
{name:'empresa', mapping:'empresa'}
]
});

var cmAfectados = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{
id: 'id_cliente',
header: 'IdCliente',
dataIndex: 'id_cliente',
hidden: true,
hideable: false
},
{
id: 'usuario',
header: 'Usuario',
dataIndex: 'usuario',
width: 25,
sortable: true
},
{
id: 'filial',
header: 'Filial',
dataIndex: 'filial',
width: 25,
sortable: true
},
{
id: 'empresa',
header: 'Empresa',
dataIndex: 'empresa',
width: 50,
sortable: true
}
]);

gridAfectados = new Ext.grid.GridPanel(
{
id:'gridAfectados',
store: storeAfectados,
cm: cmAfectados,
renderTo: 'clientes',
width: 450,
height: 200,
//viewConfig: { forceFit:true },
columnLines: true,
bbar:new Ext.PagingToolbar(
{
pageSize: 8,
store: storeAfectados,
displayInfo: true,
displayMsg: 'Mostrando Afectados {0} - {1} of {2}',
emptyMsg: 'No se encontro clientes para mostrar',
items:['-']
}),
autoExpandColumn: 'empresa',
title: 'Usuarios Afectados',
frame: true
});

// trigger the data store load
gridAdicionales.getStore().load();
gridColaboradores.getStore().load();
gridCriterios.getStore().load();
obtenerAfectados();
});

hueoogle
17 Sep 2009, 7:00 PM
I am not sure why you are putting width in every column, but maybe the width is not big enough? Remember its in pixels, which aren't very big.

I have never used width in my grids, and they have never shown 'cutoff' the way that your last image is showing. Good luck. I would try letting the grid be smart enough to know how wide to make the column though, its always worked for me.

Most of that is the point of Ext I have found. When I have been doing something, and found that it was not nessesary and even messed things up because it was already trying to do it automatically you know?

Just a couple thoughts.

abotero
15 Jan 2010, 11:40 AM
Try:

view: new Ext.grid.GridView({
forceFit:true
}),