我正在尝试向我的extj添加一个滚动条，似乎无法弄明白。 根据我的研究，人们似乎说它在我的设计中通常是一个糟糕的布局。有人可以指出我正确的方向允许滚动吗？
我有一个包含3个网格的hbox ...中间的一个是详细的DETAILS GRID，在填充数据时没有显示滚动条
{
layout: 'hbox',
flex: 1,
items: [
{
title: 'Account Summary',
xtype: 'grid',
id: 'summaryGridID',
bind: {
store: '{myAccountSummaryStore}',
selection: '{selectedManager}'
},
flex: 1.50,
forceFit: true,
//height: 200,
listeners: {
itemClick: 'onSelectionChange'
},
columns: [
{
header: 'AcctNum',
dataIndex: 'AcctNum'
//maxWidth: 80
},
{
header: 'AcctName',
dataIndex: 'AcctShortCode'
},
{
header: 'Daily P&L',
dataIndex: 'CalcPLSett',
renderer: function (value) {
var newVal;
var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
if (value > 0) {
newVal = '<span style="color:green">' + "$" + calc + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + "$" + calc + '</span>';
} else {
newVal = "$" + calc;
}
return newVal;
},
align: 'right'
},
{
header: 'Daily Pct',
dataIndex: 'CalcPLPct',
renderer: function (value) {
var newVal;
var calc = (value * 100).toFixed(2) + "%";
if (value === "Infinity") {
newVal = "0.00%";
} else if (value > 0) {
newVal = '<span style="color:green">' + calc + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + calc + '</span>';
} else {
newVal = calc;
}
return newVal;
},
align: 'right'
}
]
},
{
xtype: 'splitter'
},
{
xtype: 'grid',
id: 'detailsGridID',
bind: {
store: '{myDetailsStore}'
},
title: 'Details',
flex: 3,
forceFit: true,
//overflowY: 'scroll',
//autoScroll: true,
columns: [
{
header: 'Market',
dataIndex: 'FullMarketName',
width: 225
},
{
header: 'Last',
dataIndex: 'LastPrice',
align: 'right'
},
{
header: 'Delta',
dataIndex: 'Delta',
renderer: function (value) {
var newVal;
newVal = value.toFixed(3);
if (value > 0) {
newVal = '<span style="color:green">' + newVal + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + newVal + '</span>';
} else {
newVal = newVal;
}
return newVal;
},
align: 'right'
},
{
header: 'Prev Pos',
dataIndex: 'PrevPos',
renderer: function (value) {
var newVal;
if (value > 0) {
newVal = '<span style="color:green">' + value + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + value + '</span>';
} else {
newVal = value;
}
return newVal;
},
align: 'right'
},
{
header: 'Prev P&L',
dataIndex: 'PrevPL',
renderer: function (value) {
var newVal;
var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
if (value > 0) {
newVal = '<span style="color:green">' + "$" + calc + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + "$" + calc + '</span>';
} else {
newVal = "$" + calc;
}
return newVal;
},
align: 'right'
},
{
header: 'Top Trd',
dataIndex: 'TopTrd',
renderer: function (value) {
var newVal;
if (value > 0) {
newVal = '<span style="color:green">' + value + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + value + '</span>';
} else {
newVal = value;
}
return newVal;
},
align: 'right'
},
{
header: 'Top P&L',
dataIndex: 'TopPL',
renderer: function (value) {
var newVal;
var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
if (value > 0) {
newVal = '<span style="color:green">' + "$" + calc + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + "$" + calc + '</span>';
} else {
newVal = "$" + calc;
}
return newVal;
},
align: 'right'
},
{
header: 'Net Pos',
dataIndex: 'NetPos',
renderer: function (value) {
var newVal;
if (value > 0) {
newVal = '<span style="color:green">' + value + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + value + '</span>';
} else {
newVal = value;
}
return newVal;
},
align: 'right'
},
{
header: 'Net P&L',
dataIndex: 'NetPL',
renderer: function (value) {
var newVal;
var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
if (value > 0) {
newVal = '<span style="color:green">' + "$" + calc + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + "$" + calc + '</span>';
} else {
newVal = "$" + calc;
}
return newVal;
},
align: 'right'
}
]
},
{
xtype: 'splitter'
},
{
title: 'Sector Summary',
xtype: 'grid',
id: 'sectorGridID',
bind: {
store: '{mySectorSummaryStore}',
selection: '{selectedSector}'
},
flex: 1.50,
forceFit: true,
//height: 200,
listeners: {
itemClick: 'onSectorSelectionChange'
},
columns: [
{
header: 'Sector',
dataIndex: 'Sector'
},
{
header: 'Position',
dataIndex: 'Position',
renderer: function (value) {
var newVal;
var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
if (value > 0) {
newVal = '<span style="color:green">' + calc + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + calc + '</span>';
} else {
newVal = calc;
}
return newVal;
},
align: 'right'
},
{
header: 'P&L',
dataIndex: 'CalcPL',
renderer: function (value) {
var newVal;
var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
if (value > 0) {
newVal = '<span style="color:green">' + "$" + calc + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + "$" + calc + '</span>';
} else {
newVal = "$" + calc;
}
return newVal;
},
align: 'right'
}
]
}
]
},
这是整个小组的布局
Ext.define('ExtApplication1.view.clientdetails.clientdetails',{
extend: 'Ext.panel.Panel',
alias: 'widget.clientdetails',
itemId: 'clientDetailsItemID',
reference: 'clientDetailsPanel',
id: 'clientDetailsViewID',
requires: [
'ExtApplication1.view.clientdetails.clientdetailsController',
'ExtApplication1.view.clientdetails.clientdetailsModel'
],
controller: 'clientdetails-clientdetails',
viewModel: {
type: 'clientdetails-clientdetails'
},
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items: [
{
layout: 'hbox',
height: 50,
items:
},
{
layout: 'hbox',
height: 50,
items:
},
{
layout: 'hbox',
align: 'stretch',
flex: 1,
items: [
THIS IS IS THE AREA WITH THE 3 GRIDS.
THE MIDDLE GRID IS THE ONE THAT I AM TRYING TO HAVE A SCROLLBAR
]