PDA

View Full Version : maxHeight is not working in my EditorGridPanel



attu
8 Feb 2010, 11:56 PM
Hello everybody!

I've got a viewPort with a central region and a east region.

It's just like this:


var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'center',
xtype: 'panel',
split: true,
id: 'panelCentral'
},{
region: 'east',
xtype: 'panel',
id: 'panelDetalle',
split: true,
collapsible: true,
collapsed: true,
collapseMode: 'mini',
title: 'Detalles',
bodyStyle:'padding:5px;',
width: 200,
minSize: 200
}]
});
Also, i render a Ext.Panel in the center region:


var formulario = new Ext.FormPanel({
title: 'Modificar gastos',
collapsible: false,
frame: true,
autoWidth: true,
buttonAlign: 'center',
items:[{
layout: 'column',
items:[{
columnWidth: 0.5,
layout: 'form',
items:[{
id: 'proveedor',
name: 'proveedor',
xtype:'textfield',
fieldLabel: 'Proveedor',
anchor:'95%',
enableKeyEvents: true
},{
id: 'desde',
name: 'desde',
xtype:'datefield',
fieldLabel: 'Desde',
format: 'j/n/Y',
anchor:'95%',
vtype: 'daterange',
endDateField: 'hasta'
}]
},{
columnWidth: 0.5,
layout: 'form',
items:[{
id: 'proyecto',
name: 'proyecto',
xtype:'xComboProyectos',
fieldLabel: 'Proyecto',
anchor:'95%'
},{
id: 'hasta',
name: 'hasta',
xtype:'datefield',
format: 'j/n/Y',
fieldLabel: 'Hasta',
anchor:'95%',
vtype: 'daterange',
startDateField: 'desde'
}
}]
}]
},{
xtype: 'gridModificarGastos',
id:'gridModificarGastos',
collapsed: true
}]
});

Ext.getCmp('panelCentral').add(formulario);
Ext.getCmp('panelCentral').doLayout();
xtype: 'gridModificarGastos' Extends Ext.EditorGridPanel


var gridModificarGastos = new Ext.extend(Ext.grid.EditorGridPanel,{
clicksToEdit: 2,
title: 'Desglose de Gastos',
autoWidth: true,
autoHeight: true,
maxHeight: 300,
frame: false,
enableHdMenu: false,
loadMask: true,
iconCls: 'icon-grid',
store: store,
viewConfig:{forceFit:true},
completeOnEnter: false,
onRender: function(){
gridModificarGastos.superclass.onRender.apply(this, arguments);
},
frame: true,
initComponent: function(){
var sm2 = new Ext.grid.CheckboxSelectionModel();


Ext.apply(this, {
id:'o',
sm: sm2,
store: store,
view: new Ext.grid.GridView({
forceFit:true
}),
columns: [
new Ext.grid.CheckboxSelectionModel()
,{
header: "Código",
dataIndex: 'Codigo',
width: 50,
align: 'Left',
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: "Fecha",
dataIndex: 'Fecha',
width: 50,
align: 'left',
renderer: rendererFecha,
editor: new Ext.form.DateField({
format: 'j/n/Y',
allowBlank: false
})
},{
header: "Proyecto",
dataIndex: 'Proyecto',
width: 50,
align: 'left',
style: 'font-size: 16px; text-align: center;',
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: "Descripción",
dataIndex: 'Descripcion',
width: 150,
align: 'left',
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: "Importe",
dataIndex: 'Importe',
width: 50,
align: 'right',
editor: new Ext.form.TextField({
allowBlank: false
})
}]
});
gridModificarGastos.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('gridModificarGastos', gridModificarGastos);I don't know why, but my grid doesn't show the scrollbar. It grows untill infinite (it depends on the number of rows of the store.

I use autoHeight and maxHeight in the definition of the EditorGridPanel.

Anyone knows why is happening that?

Thank you very much!