PDA

View Full Version : GridPanel width



domurtag
16 Nov 2011, 10:08 AM
I'm using Ext JS 2.3.0 and have created the search dialog shown below.

29341

The search results are shown in a GridPanel with a single Name column, but notice that this column does not stretch to fill all the available horizontal space. However, after I perform a search, the column resizes properly (even if no results are returned):

029342

How can I make the column display correctly when it's shown initially? The relevant code is shown below:



FV.FindEntityDialog = Ext.extend(Ext.util.Observable, {
constructor: function() {

var queryTextField = new Ext.form.TextField({
hideLabel: true,
width: 275,
colspan: 2,
});
var self = this;

// the search query panel
var entitySearchForm = new Ext.form.FormPanel({
width: '100%',
frame: true,
layout:'table',
layoutConfig: {columns: 3},
items: [
queryTextField,
{
xtype: 'button',
text: locale["dialogSearch.button.search"],
handler: function() {
var queryString = queryTextField.getValue();
self._doSearch(queryString);
}
}
]
});

// the search results model and view
this._searchResultsStore = new Ext.data.SimpleStore({
data: [],
fields: ['name']
});

var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);

var selectionModel = new Ext.grid.RowSelectionModel({singleSelect: false});

this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
stripeRows: true,
autoWidth: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,

colModel: colModel,
selModel: selectionModel,
hidden: false,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
handler: function () {
entitySearchWindow.close();
}
},
{
text: locale["dialogSearch.button.cancel"],
handler: function () {
entitySearchWindow.close();
}
}
]
});

// a modal window that contains both the search query and results panels
var entitySearchWindow = new Ext.Window({
closable: true,
resizable: false,
draggable: true,
modal: true,
viewConfig: {
forceFit: true
},
title: locale['dialogSearch.title'],
items: [entitySearchForm, this._searchResultsPanel]
});

entitySearchWindow.show();
},

/**
* Search for an entity that matches the query and update the results panel with a list of matches
* @param queryString
*/
_doSearch: function(queryString) {

def dummyResults = [['foo'], ['bar'], ['baz']];
self._searchResultsStore.loadData(dummyResults, false);
}
});

darthwes
16 Nov 2011, 10:52 AM
so get rid of autoWidth and autoExpandColumn on your grid definition and then add



viewConfig: {
forceFit: true
}



profit?

domurtag
17 Nov 2011, 2:02 AM
profit?


Thanks for the suggestion, but unfortunately it didn't make any difference.

darthwes
17 Nov 2011, 8:56 AM
Works when I try it over here. What browser and Ext version are we talking? CNR, works over here.

domurtag
17 Nov 2011, 9:08 AM
sorry wes, you're right, it does work, thanks a lot