View Full Version : Center region contents will not autosize

25 Aug 2009, 1:12 PM
I have a viewport object which uses border layout. Within the center region I am trying to place a grid and a form. Both initially render to the full width of the region, but when I re-size the center region (or the browser window) the form panel and the grid panel do not re-size. Anyone know what I'm doing wrong? I've removed some of the unnecessary regions from the following code to make it easier to read.

Ext.onReady(function() {

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
xtype: "toolbar",
height: 58,
..... // unnecessary code removed here
region: 'west',
width: 250,
..... // unnecessary code removed here
}, {
region: "center",
layout: 'border',
border: false,
items: [{
region: "center",
title: "Search",
border: true,
items: [{
xtype: "form",
labelWidth: 55,
id: "QuestionSearchBox",
style: "margin: 10px;",
items: [{
xtype: "trigger",
allowBlank: true,
inputType: "text",
selectOnFocus: true,
hideTrigger: true,
value: "Type a question here...",
fieldLabel: "Question",
name: "question",
anchor: "100%"
listeners: {
resize: function() { alert('form resized'); }
},new Ext.grid.GridPanel({
stateful: true,
stateId: "QuestionResultsGrid",
stripeRows: true,
autoExpandColumn: 'question',
store: new Ext.data.JsonStore({
autoDestroy: true,
url: "ajax/question_search.php",
storeId: "QuestionResultsStore",
root: "questions",
idProperty: "questionId",
fields: [
{name: "questionId", type: "integer"},
{name: "answerId", type: "integer"},
{name: "correctQuestion", type: "float"},
{name: "helpfulAnswer", type: "float"},
{name: "lastModifyDate", type: "float"}
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 100,
sortable: true
columns: [
{id: "questionId", header: "Question ID", width: 50, sortable: true, dataIndex: "questionId", hidden: true},
{header: "Question", sortable: true, dataIndex: "question"},
{header: "Answer ID", width: 30, sortable: true, dataIndex: "answerId"},
{header: "Correct Question", width: 40, sortable: true, dataIndex: "correctQuestion"},
{header: "Helpful Answer", width: 40, sortable: true, dataIndex: "helpfulAnswer"},
{header: "Last Modified By", width: 40, sortable: true, dataIndex: "lastModifiedBy"},
{header: "Last Modified", width: 40, sortable: true, dataIndex: "lastModifyDate", xtype: "datecolumn", format: "M d, Y"}
viewConfig: {
forceFit: true
region: "south",
title: "Answers",
collapsible: true,
border: true,
split: true,
height: 200,
minSize: 100,
html: 'Answers'

Any help is much appreciated. Thank you.

25 Aug 2009, 1:34 PM
Your center region has no layout. Give it a border layout and assign regions to the form and grid.

31 Aug 2009, 5:12 AM
That was exactly the problem. Thanks for helping out. I had assumed that the default layout would automatically have 100% width, but in hind sight I can see why that is not the case. Thanks a ton for your help. Not sure how long that would have taken to see on my own.