extjs 窗口项样式
extjs window items styling
我正在为一个应用程序开发一个extJs前端。该页面有一个包含 3 个项目的 ext.window。其中包括图表、组合框和文本字段。我已经成功地在窗口中放置了两个项目,即图表和组合,但由于某种原因,图表占用了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
}
]
});
});
您必须使用布局系统。
目前,您已经指定了layout: 'fit'
,这意味着:将容器内的单个项目展开到完整宽度。
只需删除此行将使其默认为 layout: 'auto'
,这将仅将组件放置在彼此下方。
查看布局浏览器以探索所有选项。
相关文章:
- 我可以在FullCalendar中设置事件ClickLimit弹出窗口的样式吗
- Javascript em根据窗口/视口尺寸调整大小,不影响文档样式的text/css
- 使用JavaScript更改带有窗口高度的元素样式
- 在 shopify 上设置JavaScript弹出窗口的样式
- 自定义/样式提示窗口
- 动态为不同大小的浏览器窗口应用不同的样式表
- 在样式模式 (jQuery UI) 窗口中显示 JS 警报
- 打开一个新的javascript窗口(.open)及其CSS样式
- 如何使PHP/JavaScript错误弹出窗口以正确的样式显示
- extjs 窗口项样式
- 如何在提交按钮上设置javascript弹出确认窗口的样式
- 如何在改变窗口宽度时重新加载css样式?
- 如何创建一个不规则的(不是矩形的)工具样式的弹出窗口
- 如何保持Javascript自定义下拉/弹出窗口和类似的交互打开,而样式化它
- AngularUI弹出窗口样式改变父元素点击
- 使用bxslider破坏断点样式调整窗口大小
- 是否可以使用javascript应用随机窗口大小的媒体查询样式
- 使用Javascript为弹出窗口应用css样式
- JS:打开样式窗口
- 如何获得此弹出窗口样式