我正在为应用程序开发extJs前端。该页面有一个ext.window，有3个项目。这些包括图表，组合框和文本字段。我已经成功地在窗口中放置了两个图表和组合项目，但由于某种原因，图表占用了ext.window的所有宽度和高度。因此，组合框隐藏在图表后面。我如何设置窗口的不同项目？
Ext.onReady(function () {
Ext.tip.QuickTipManager.init();
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name'},
{type: 'string', name: 'slogan'}
]
});
// The data for all states
var states = [
{"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
{"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
{"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"},
{"abbr":"AR","name":"Arkansas","slogan":"The Natural State"},
{"abbr":"CA","name":"California","slogan":"The Golden State"},
{"abbr":"CO","name":"Colorado","slogan":"The Mountain State"},
{"abbr":"CT","name":"Connecticut","slogan":"The Constitution State"},
{"abbr":"DE","name":"Delaware","slogan":"The First State"},
{"abbr":"DC","name":"District of Columbia","slogan":"The Nation's Capital"},
{"abbr":"FL","name":"Florida","slogan":"The Sunshine State"},
{"abbr":"GA","name":"Georgia","slogan":"The Peach State"},
{"abbr":"HI","name":"Hawaii","slogan":"The Aloha State"},
{"abbr":"ID","name":"Idaho","slogan":"Famous Potatoes"},
{"abbr":"IL","name":"Illinois","slogan":"The Prairie State"},
{"abbr":"IN","name":"Indiana","slogan":"The Hospitality State"},
{"abbr":"IA","name":"Iowa","slogan":"The Corn State"},
{"abbr":"KS","name":"Kansas","slogan":"The Sunflower State"},
{"abbr":"KY","name":"Kentucky","slogan":"The Bluegrass State"},
{"abbr":"LA","name":"Louisiana","slogan":"The Bayou State"},
{"abbr":"ME","name":"Maine","slogan":"The Pine Tree State"},
{"abbr":"MD","name":"Maryland","slogan":"Chesapeake State"},
{"abbr":"MA","name":"Massachusetts","slogan":"The Spirit of America"},
{"abbr":"MI","name":"Michigan","slogan":"Great Lakes State"},
{"abbr":"MN","name":"Minnesota","slogan":"North Star State"},
{"abbr":"MS","name":"Mississippi","slogan":"Magnolia State"},
{"abbr":"MO","name":"Missouri","slogan":"Show Me State"},
{"abbr":"MT","name":"Montana","slogan":"Big Sky Country"},
{"abbr":"NE","name":"Nebraska","slogan":"Beef State"},
{"abbr":"NV","name":"Nevada","slogan":"Silver State"},
{"abbr":"NH","name":"New Hampshire","slogan":"Granite State"},
{"abbr":"NJ","name":"New Jersey","slogan":"Garden State"},
{"abbr":"NM","name":"New Mexico","slogan":"Land of Enchantment"},
{"abbr":"NY","name":"New York","slogan":"Empire State"},
{"abbr":"NC","name":"North Carolina","slogan":"First in Freedom"},
{"abbr":"ND","name":"North Dakota","slogan":"Peace Garden State"},
{"abbr":"OH","name":"Ohio","slogan":"The Heart of it All"},
{"abbr":"OK","name":"Oklahoma","slogan":"Oklahoma is OK"},
{"abbr":"OR","name":"Oregon","slogan":"Pacific Wonderland"},
{"abbr":"PA","name":"Pennsylvania","slogan":"Keystone State"},
{"abbr":"RI","name":"Rhode Island","slogan":"Ocean State"},
{"abbr":"SC","name":"South Carolina","slogan":"Nothing Could be Finer"},
{"abbr":"SD","name":"South Dakota","slogan":"Great Faces, Great Places"},
{"abbr":"TN","name":"Tennessee","slogan":"Volunteer State"},
{"abbr":"TX","name":"Texas","slogan":"Lone Star State"},
{"abbr":"UT","name":"Utah","slogan":"Salt Lake State"},
{"abbr":"VT","name":"Vermont","slogan":"Green Mountain State"},
{"abbr":"VA","name":"Virginia","slogan":"Mother of States"},
{"abbr":"WA","name":"Washington","slogan":"Green Tree State"},
{"abbr":"WV","name":"West Virginia","slogan":"Mountain State"},
{"abbr":"WI","name":"Wisconsin","slogan":"America's Dairyland"},
{"abbr":"WY","name":"Wyoming","slogan":"Like No Place on Earth"}
];
// The data store holding the states; shared by each of the ComboBox examples below
var store = Ext.create('Ext.data.Store', {
model: 'State',
data: states
});
/*
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select a single state',
renderTo: 'myid',
displayField: 'name',
width: 320,
labelWidth: 130,
store: store,
queryMode: 'local',
typeAhead: true
});
*/
var win = Ext.create('Ext.Window', {
width: 800,
height: 500,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Column Chart',
renderTo: Ext.getBody(),
layout: 'fit',
/*
tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}],
*/
items: [
{
id: 'chartCmp',
xtype: 'chart',
width: 200,
height: 200,
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}]
}, {
// Simple ComboBox using the data store
xtype: 'combo',
fieldLabel: 'Select a single state',
displayField: 'name',
width: 320,
labelWidth: 130,
store: store,
autoselect: true,
queryMode: 'local',
typeAhead: true
}
]
});
});
答案 0 :(得分：0)
您必须使用布局系统。
目前您已指定layout: 'fit'，这意味着：将容器内的单个项目展开到整个宽度。
只需删除此行即可将其默认为layout: 'auto'，这样只会将组件放在彼此之下。
查看layout browser以探索所有选项。