DIV でグリッド パネルをレンダリングしています。DIV とグリッド パネルの両方で幅を指定していないため、使用可能なブラウザーの幅をすべて占有する必要があります。ユーザーがブラウザ ウィンドウのサイズを変更しても、このグリッドはブラウザの新しい幅に合わせてサイズ変更されません。以下のリンクで見つけた提案/解決策をすでに試しましたが、これらはうまくいきません
Stackoverflow の投稿- これから、ウィンドウのサイズ変更ソリューションを試しました
ExtJs プラグイン - 親に適合 - この ExtJs 3 プラグインも ExtJs 4 に移植しましたが、これも役に立ちませんでした
ポインタやヘルプは大歓迎です
これが私のプロジェクトのグリップパネルのコードスニペットです
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"
});