Javascript ExtJS网格面板宽度
我正在使用ExtJS2.3.0,并创建了如下所示的搜索对话框 搜索结果显示在带有单个名称列的GridPanel中,但请注意,此列不会拉伸以填充所有可用的水平空间。但是,在执行搜索后,列的大小会正确调整(即使没有返回结果): 如何使列在最初显示时正确显示?相关代码如下所示:Javascript ExtJS网格面板宽度,javascript,extjs,Javascript,Extjs,我正在使用ExtJS2.3.0,并创建了如下所示的搜索对话框 搜索结果显示在带有单个名称列的GridPanel中,但请注意,此列不会拉伸以填充所有可用的水平空间。但是,在执行搜索后,列的大小会正确调整(即使没有返回结果): 如何使列在最初显示时正确显示?相关代码如下所示: FV.FindEntityDialog = Ext.extend(Ext.util.Observable, { constructor: function() { var queryTextFi
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);
}
});
尝试从
GridPanel
配置中删除autoWidth
,因为设置autoWidth:true
意味着浏览器将根据元素的内容管理宽度,而Ext根本不会管理它
此外,您可以在网格渲染后尝试调用
.doLayout(false,true)
。这与您在前面的问题中遇到的问题相同,viewConfig是网格面板的配置项,因此应选中它
this._searchResultsPanel = new Ext.grid.GridPanel({
viewConfig: {
forceFit: true
},
....other configs you need,
更准确地说,viewConfig接受Ext.grid.GridView
configs,您也可以随意阅读其中的文档
否则这似乎是唯一的问题,我指的是列宽,而不是gridpanel的宽度。在gridpanel上,您有一个标题和两个按钮,它们似乎没有受到影响。所以我重复gridPanel的宽度是可以的,这是列宽度的问题。尝试将
flex:1
添加到gridPanel中