Sep 12, 2011, 2:33 PM
[CLOSED] EXT .NET GridView with ForceFit=true not resizing without scroll bars
I am trying to get a grid panel to resize when the browser window is resized. I can get this to work perfectly if the grid panel has too many rows to fit in the browser window, and therefore has a vertical scroll bar. However, if the panel does not have enough rows to require a vertical scroll bar, the grid contents do not resize when the window is resized (they do resize on reload). There are multiple panels on the form, each is nested to the same level, and I've verified that all the settings on the containers as well as the grid panels themselves match between the one that resizes on window resize (the one with scroll bar) and the one that does not resize on window resize (the one without the scroll bar).
Is this a known problem? Is there a workaround?
Here is the applicable (partial) source code as rendered by EXT.NET from the view source of the page in question:
(the grids in question are ContentPH_gpMessageTypeSettings and ContentPH_gpClientDefaultSkills)
Is this a known problem? Is there a workaround?
Here is the applicable (partial) source code as rendered by EXT.NET from the view source of the page in question:
(the grids in question are ContentPH_gpMessageTypeSettings and ContentPH_gpClientDefaultSkills)
new Ext.net.Viewport({
id: "MasterVP",
renderTo: "MasterForm1",
items: [{
id: "divToolbar",
style: "z-index: 900; position: relative;",
xtype: "container",
contentEl: "divToolbar_Content",
region: "north",
margins: "-1 15 -1 15",
boxMinWidth: 978
},
{
id: "cntCenter",
xtype: "container",
region: "center",
margins: "-1 15 -1 15",
cls: "CenterArea",
boxMinWidth: 978,
items: [{
id: "divHeader",
contentEl: "divHeader_Content",
region: "north",
cls: "PageHeader",
height: 110,
bodyStyle: "background-color:transparent;"
},
{
id: "divContent",
xtype: "container",
region: "center",
cls: "Content",
items: {
id: "ContentPH_frmMain",
xtype: "form",
autoScroll: true,
items: [{
id: "ContentPH_pnlMessageTypeSettings",
cls: " PanelFrame",
autoWidth: true,
items: {
id: "ContentPH_gpMessageTypeSettings",
setViewMode: function(viewMode){if(this.topToolbar) this.topToolbar.setVisible(viewMode); if(this.hasActions) this.colModel.setHidden(0,!viewMode)},
commitChanges: function(){this.store.commitChanges()},
rejectChanges: function(){this.store.data.each(function(r){if(r.phantom) this.store.remove(r)});this.store.rejectChanges();this.store.rejectDeleting();},
xtype: "netgrid",
ctCls: "x-grid-custom",
style: ";font-family:Arial; font-size:12px;",
enableColumnHide: false,
enableColumnMove: false,
enableHdMenu: false,
sm: this.ContentPH_rsmGPMessageTypeSettings=new Ext.grid.RowSelectionModel({
proxyId: "ContentPH_rsmGPMessageTypeSettings",
singleSelect: true
}),
store: ContentPH_stoMessageTypeSettings,
stripeRows: true,
view: this.ContentPH_gvGPMessageTypeSettings=new Ext.grid.GridView({
proxyId: "ContentPH_gvGPMessageTypeSettings",
forceFit: true,
scrollOffset: 1
}),
clicksToEdit: 1,
selectionMemory: false,
cm: this.ContentPH_ColumnModel1=new Ext.grid.ColumnModel({
proxyId: "ContentPH_ColumnModel1",
defaults: { "sortable":false },
columns: [{
dataIndex: "MessageTypeID",
header: "Message Type",
renderer: messageRenderer,
width: 180
},
{
dataIndex: "MessageText",
editor: new Ext.grid.GridEditor(Ext.apply({field:{
id: "ContentPH_TextField1",
xtype: "textarea",
height: 45,
maxLength: 800
}}, {})),
header: "Message",
renderer: rdrEditableTextArea,
width: 600
},
{
dataIndex: "MessageID",
width: 80
}]
}),
listeners: { beforeedit: { fn: isEditable } } },
layout: "fit",
collapsedCls: " PanelCollapse",
collapsible: true,
frame: true,
padding: 10,
title: "Message Type Settings",
listeners: { afterrender: { fn: function(item){stylePanel(this);} } }
},
{
id: "ContentPH_pnlGlobalCandidateRequirements",
cls: " PanelFrame",
items: {
id: "ContentPH_gpClientDefaultSkills",
setViewMode: function(viewMode){if(this.topToolbar) this.topToolbar.setVisible(viewMode); if(this.hasActions) this.colModel.setHidden(0,!viewMode)},
commitChanges: function(){this.store.commitChanges()},
rejectChanges: function(){this.store.data.each(function(r){if(r.phantom) this.store.remove(r)});this.store.rejectChanges();this.store.rejectDeleting();},
xtype: "netgrid",
style: ";font-family:Arial; font-size:12px;",
autoHeight: true,
tbar: {
id: "ContentPH_tbClientDefaultSkills",
xtype: "toolbar",
items: [{
id: "ContentPH_btnAddSkill",
style: ";font-family:Arial; font-size:12px;",
iconCls: "icon-add",
text: "Add",
listeners: { click: { fn: function(item,e){gpClientDefaultSkillsAddRecord();} } } },
{
id: "ContentPH_btnDeleteSkill",
style: ";font-family:Arial; font-size:12px;",
iconCls: "icon-delete",
text: "Delete",
listeners: { click: { fn: function(item,e){ContentPH_gpClientDefaultSkills.deleteSelected();} } }
}]
},
enableColumnHide: false,
enableColumnMove: false,
enableHdMenu: false,
sm: this.ContentPH_rsmGPClientDefaultSkills=new Ext.grid.RowSelectionModel({
proxyId: "ContentPH_rsmGPClientDefaultSkills",
singleSelect: true
}),
store: ContentPH_stoDefaultOrgReqSkills,
stripeRows: true,
view: this.ContentPH_gvGPClientDefaultSkills=new Ext.grid.GridView({
proxyId: "ContentPH_gvGPClientDefaultSkills",
forceFit: true,
scrollOffset: 1
}),
clicksToEdit: 1,
selectionMemory: false,
cm: this.ContentPH_ColumnModel9=new Ext.grid.ColumnModel({
proxyId: "ContentPH_ColumnModel9",
defaults: { "sortable":false },
columns: [{
dataIndex: "Description",
editor: new Ext.grid.GridEditor(Ext.apply({field:{
id: "ContentPH_TextField3",
xtype: "textfield",
isFormField: true,
allowBlank: false,
selectOnFocus: true
}}, {})),
header: " Requisition Description",
renderer: rdrEditableField,
width: 600
},
{
dataIndex: "SkillType",
editor: new Ext.grid.GridEditor(Ext.apply({field:{
id: "ContentPH_lstSkillType",
viewMode: "Edit",
xtype: "selectbox",
allowBlank: false,
displayField: "Description",
hiddenName: "ContentPH_lstSkillType_Value",
triggerAction: "all",
valueField: "SkillTypeId",
store: ContentPH_stoSklType,
submitValue: true,
listeners: {
show: { fn: function(item){if (lstSkillTypeDropped) { this.onTriggerClick(); }} },
focus: { fn: function(item){if (!lstSkillTypeDropped) { this.onTriggerClick(); lstSkillTypeDropped=true; }} }
} }, {})),
header: " Required/Desired",
id: "SkillType",
renderer: sklRenderer,
width: 150
},
{
dataIndex: "Duration",
editor: new Ext.grid.GridEditor(Ext.apply({field:{
id: "ContentPH_TextField4",
xtype: "numberfield",
selectOnFocus: true,
allowDecimals: false,
decimalSeparator: ".",
minValue: 0.0
}}, {})),
header: "Duration",
renderer: rdrEditableField
},
{
dataIndex: "DurationType",
editor: new Ext.grid.GridEditor(Ext.apply({field:{
id: "ContentPH_lstDurationType",
viewMode: "Edit",
xtype: "selectbox",
displayField: "Description",
hiddenName: "ContentPH_lstDurationType_Value",
triggerAction: "all",
valueField: "DrtnTypeId",
store: ContentPH_stoDurationType,
submitValue: true,
listeners: {
show: { fn: function(item){if (lstDurationTypeDropped) { this.onTriggerClick(); }} },
focus: { fn: function(item){if (!lstDurationTypeDropped) { this.onTriggerClick(); lstDurationTypeDropped=true; }}
} }}}, {})),
header: "Months/Years",
renderer: durationRenderer
},
{
dataIndex: "CandidateDisplay",
editor: new Ext.grid.GridEditor(Ext.apply({field:{
id: "ContentPH_lstCandidateDisplay",
viewMode: "Edit",
xtype: "selectbox",
displayField: "text",
hiddenName: "ContentPH_lstCandidateDisplay_Value",
triggerAction: "all",
valueField: "value",
store: ContentPH_stoYesNo,
submitValue: true,
listeners: {
show: { fn: function(item){if (lstCandidateDisplayDropped) { this.onTriggerClick(); }} },
focus: { fn: function(item){if (!lstCandidateDisplayDropped) { this.onTriggerClick(); lstCandidateDisplayDropped=true; }}
} } }}, {})),
header: " Display on<br/> Candidate Detail",
id: "CandidateDisplay",
renderer: function(value,metadata,record,rowIndex,colIndex,store){return rdrYesNo(value, metadata, ContentPH_stoYesNo);},
width: 150
},
{
dataIndex: "Sequence",
editor: new Ext.grid.GridEditor(Ext.apply({field:{
id: "ContentPH_TextField5",
xtype: "numberfield",
allowBlank: false,
selectOnFocus: true,
allowDecimals: false,
decimalSeparator: ".",
minValue: 1.0
}}, {})),
header: " Sequence",
id: "Sequence",
renderer: rdrEditableField
}]
}),
listeners: { beforeedit: { fn: isEditable } } },
layout: "fit",
collapsedCls: " PanelCollapse",
collapsible: true,
frame: true,
padding: 10,
title: "Global Candidate Requirements",
listeners: { afterrender: { fn: function(item){stylePanel(this);} } }
},
(...)
Last edited by Daniil; Sep 19, 2011 at 6:18 PM.
Reason: [CLOSED]