I am developing an extJs front end for an application. The page has a ext.window which has 3 items. These include a chart, combo box and a text field. I have successfully placed two items that is chart and combo inside the window but the chart for some reason takes all the width and height of the ext.window. For this reason, the combo box gets hidden behind the chart. How can i style different items of my 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
}
]
});
});
You have to use the layout system.
Currently you have specified
layout: 'fit'which means exactly that: expand the single item inside the container to the full width.Simply removing this line will make it default to
layout: 'auto'which will just place the components below each other.Check out the layout browser to explore all your options.