我在 DIV 中渲染网格面板，对于 DIV 和网格面板，我没有指定任何宽度，因此它应该占用浏览器的所有可用宽度。当用户重新调整浏览器窗口的大小时，此网格不会根据浏览器的新宽度重新调整自身大小。我已经尝试过在以下链接中找到的建议/解决方案，但这些对我不起作用
Stackoverflow 帖子- 从这里我尝试了窗口调整大小的解决方案
ExtJs 插件 - 适合父级- 我还将这个 ExtJs 3 插件移植到 ExtJs 4，但这也没有帮助
非常感谢任何指针或帮助
这是我的项目中 Grip 面板的代码片段
Ext4.define('myNameSpace.myGrid', {
extend: 'Ext4.grid.Panel',
alias: ['widget.myGrid'],
constructor: function (config) {
config = Ext4.apply({}, config || {}, {
columnLines: true,
sortableColumns: false,
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: false,
forceFit: false,
viewConfig: {
enableTextSelection: true,
stripeRows: false,
loadMask: false,
emptyText: '<div class="x-grid-empty"> NO Data present</div>',
deferEmptyText: true,
getRowClass: function(record, rowIndex, rowParams, store){
return record.data.isExpired ? "expired-transaction" : '';
}
},
columns: {
defaults: {
height: 30
},
items: [
{
text: " ",
id: "recurringColumnHdr",
width: 30,
dataIndex: "isRecurring",
align: "center"
},
{
text: "From",
id: "fromColumnHdr",
width: 175,
flex: .15,
dataIndex: "fromAccountDescription"
},
{
text: "To",
id: "toColumnHdr",
width: 175,
flex: .15,
dataIndex: "toAccountDescription"
},
{
text: "Amount",
id: "amountColumnHdr",
width: 100,
dataIndex: "amount",
renderer: Ext4.util.Format.usMoney,
align: 'right'
},
{
text: "Date",
id: "dateColumnHdr",
width: 75,
dataIndex: "transferDate",
align: 'right'
},
{
text: "Repeat",
id: "repeatColumnHdr",
dataIndex: "frequency",
flex:.35,
},
{
text: "Memo",
dataIndex: "memo",
id: "memoColumnHdr",
flex: .35
}
]
},
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
height: 30
}]
});
this.callParent([config]);
}
});
这是我用来在网格上方渲染的代码
Ext4.create('myNameSpace.myGrid', {
store: Ext4.create('myGridStore'),
renderTo: 'transfersGrid',
id: "transferGridPanel"
});