1
私はアプリケーションのextJsフロントエンドを開発しています。ページには3つの項目を持つext.windowがあります。これらには、チャート、コンボボックス、およびテキストフィールドが含まれます。私は正常にウィンドウ内にチャートとコンボである2つの項目を配置しましたが、何らかの理由でチャートがext.windowの幅と高さをすべて取ります。このため、コンボボックスはチャートの後ろに隠れてしまいます。私はどのように私のウィンドウの異なる項目をスタイルすることができますか？extjsウィンドウアイテムのスタイリング
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
}
]
});
});
ありがとうございました！しかし、どのように私はパネルやウィンドウ内で自分の要素をスタイルすることができます。私は彼らが私が望むやり方で彼らをどのように配置することができるのかを意味たとえば、マージン、パディング、トップなどを含めます。 – dev
最後に完了しました。 – dev