ExtJS Toolbar height incorrect in IE7 - extjs

I'm creating a toolbar then later adding it to a Panel in ExtJS. It looks great except in IE7 where it has a much larger height than other browsers. ExtJS is hardcoding the height in an inline CSS style. Some of the menus are created before the toolbar...
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
style: {
overflow: 'visible'
},
items: [
{
text: 'choice1'
},{
text: 'choice2'
},{
text: 'choice3'
}]
});
var tb = Ext.create('Ext.toolbar.Toolbar');
tb.suspendLayouts();
tb.add({
text:'Choice 1',
iconCls: 'bmenu',
menu: menu
},{
xtype: 'tbfill'
},{
xtype: 'tbtext',
text: 'Last name'
});
menu.add(' ');
tb.add('-', {
iconCls: 'icon-help',
clickEvent: 'mousedown'
});
tb.resumeLayouts(true);
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
id: 'North',
items: [{
region: 'center',
style: {
overflow: 'visible'
},
}, tb]
},{
region: 'west',
id: 'West',
xtype: 'panel',
layout: 'vbox',
collapsible: true,
split: true,
width: 200,
items: [{
xtype: 'panel',
id: 'upperWest',
width: 200,
flex: 1,
html: myAlerts
},{
xtype: 'panel',
id: 'lowerWest',
width: 200,
flex: 3,
html: quickView
}
]
]
},{
region: 'center',
id: 'center',
height: '100%',
minheight: 200,
minwidth: 200,
layout: 'border',
border: false,
autoScroll:true,
tbar: [
{xtype: 'tbfill'},
{
xtype: 'combo',
height: 20,
editable: false,
store: [
'choice1',
'choice2',
'choice3',
],
value: 'choice1'
},
{xtype: 'tbfill'}
],
items: [{
region: 'east',
id: 'center-east',
height: '100%',
minheight: 200,
width: 200,
items: barChartPanel
},{
region: 'center',
id: 'center-center',
layout: 'fit',
baseCls:'x-plain',
items: columnChartPanel
}]
},{
region: 'east',
id: 'moreOptions',
xtype: 'panel',
title: 'More Options',
collapsible: true,
split: true,
width: 200,
items: [
{xtype: 'panel',
id: 'rightPanel1',
collapsible: true,
collapsed: true,
}
]
},{
region: 'south',
xtype: 'container',
}]
});

Found the solution. HTML 5 Boilerplate included a CSS property that was adding bottom padding to some elements. This was causing ExtJS to also add top padding to the toolbar. I removed the CSS element and the issue went away

Related

Ext js 7 modern resizable panels

I'm trien to make a resizable panel layout. I've made a fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/3c94
Why can't I use the resizer between test1 and test2 while the resizer between test3 and test4 is working.
I tried adding flex/fit to a few container, tried removing unimportant stuff, can't find a solution.
Because you have used fit layout in the first panel and hbox (it works) in the second one:
Ext.create('Ext.form.Panel', {
xtype: 'main_customer',
itemId: 'main_customer',
renderTo: Ext.getBody(),
flex: 1,
items: [{
xtype: 'panel',
itemId: 'maincontainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
padding: 0,
scrollable: true,
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
height: '63%',
resizable: {
split: true,
edges: ['south']
},
items: [{
xtype: 'panel',
resizable: {
split: true,
edges: ['east'],
},
items: [{
xtype: 'panel',
html: 'test 1',
}]
}, {
xtype: 'panel',
html: 'test 2',
}]
}, {
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [{
xtype: 'panel',
width: '50%',
resizable: {
split: true,
edges: 'east'
},
html: 'test 3',
}, {
xtype: 'panel',
html: 'test 4',
}]
}]
}],
collapsible: false
});

extjs6, expand chart component to fit column

In my extjs6 project, in the current page I have a column layout. Inside column 2 I have a chart. How can I make the chart fill that column in height and width? Everything I try is not working.
Below is my view, column 1 has small components so no need to expand contents. I've tried 'fit' height '100%', nothing seems to work properly. also, I am populating the chart AFTER the view is created. not sure if that matters
Ext.define('xxx.view.historical.Historical', {
extend: 'Ext.Panel',
xtype: 'app-historical',
controller: 'historicalController',
itemId: 'historicalItemId',
viewModel: 'historicalVM',
requires: [
'xxx.view.historical.HistoricalController',
'xxx.util.GlobalVar',
'Ext.chart.*'
],
title: 'Historical',
layout: 'fit',
items: [{
xtype: 'tabpanel',
margin: 10,
tabBar: {
layout: {
pack: 'left'
},
border: true
},
style: {
'border-radius': '4px 4px 4px 4px',
'box-shadow': '0 0 5px rgba(0, 0, 0, 0.3)'
},
defaults: {
iconAlign: 'top',
bodyPadding: 0
},
items: [{
title: 'Profit By Instrument',
autoScroll: true,
layout: {
type: 'column'
},
width: '100%',
items: [{
columnWidth: 0.20,
items: [{
xtype: 'combobox',
fieldLabel: 'Account',
emptyText: 'Select Account',
editable: false,
margin: 5,
displayField: 'AcctNum',
valueField: 'AcctNum',
bind: {
store: '{myAccountSummaryStore}'
},
listeners: {
select: 'onComboboxSelect'
},
queryMode: "local"
//combobox to select account
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Instruments',
defaultType: 'checkboxfield',
itemId: 'itemIdCheckboxContainer',
margin: 5,
//cls: 'my-class',
items: [{
boxLabel: 'Anchovies',
name: 'topping',
inputValue: '1',
id: 'checkbox1',
cls: 'ownClass'
}]
}, {
xtype: 'button',
text: 'Select All'
}, {
xtype: 'button',
text: 'Deselect All'
}]
}, {
//COLUMN 2
columnWidth: 0.80,
items: [{
xtype: 'chart',
title: 'this is my title',
itemId: 'chartId',
margin: 5,
width: '100%',
height: '100%',
legend: {
docked: 'bottom'
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['cumulativePl'],
title: 'Pl'
}, {
type: 'time',
position: 'bottom',
fields: ['filedate'],
title: 'Filedate',
//renderer: 'onAxisLabelRender',
label: {
rotate: {
degrees: -40
}
}
}]
}]
}]
}, {
title: 'Profit By Account',
autoScroll: true,
items: []
}]
}]
});
Just set the column layout to fit, it should work:
columnWidth: 0.40,
layout: {
type: 'fit'
},
Check out this FIDDLE

Align : 'stretch' not working for Accordion layout

I have included an 'accordion' layout, which is included in 'west' region of a 'border' layout. But the align : 'stretch' property is not working for the accordion layout.
Accordion Layout
var user_menu_items = new Ext.Panel({
layout: 'accordion',
height: 565,
align: 'stretch',
id: 'usermenu',
items: [{
layout: 'fit',
title: 'Configuration',
id: 'menulist1',
html: 'Group1 Content',
collapseFirst: true
}, {
title: 'User Action Group2',
id: 'menulist2',
html: 'Group2 Content'
}, {
title: 'User Action Group3',
id: 'menulist3',
html: 'Group3 Content'
}]
});
Border Layout
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
layout: 'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:2px'
},
items: [{
title: 'USER MENU',
region: 'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 225,
minSize: 100,
maxSize: 250,
collapsible: true,
collapsed: false,
bodyStyle: 'padding:0px',
items: [user_menu_items]
}]
}],
renderTo: Ext.getBody()
});
I am using extjs-4.2.2
you can try below:
var user_menu_items = new Ext.Panel({
layout: 'accordion',
//height: 565,
//align: 'stretch',
id: 'usermenu',
items: [{
layout: 'fit',
title: 'Configuration',
id: 'menulist1',
html: 'Group1 Content',
collapseFirst: true
}, {
title: 'User Action Group2',
id: 'menulist2',
html: 'Group2 Content'
}, {
title: 'User Action Group3',
id: 'menulist3',
html: 'Group3 Content'
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
layout: 'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:2px'
},
items: [{
title: 'USER MENU',
region: 'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 225,
minSize: 100,
maxSize: 250,
collapsible: true,
collapsed: false,
bodyStyle: 'padding:0px',
layout: 'accordion', // <------- ADD THIS LINE TO WEST PANEL.------------------>
items: [user_menu_items]
}]
}],
renderTo: Ext.getBody()
});
If I am not mistaken, Ext.panel.Panel does not have a config option align.
What does have a config option align is the Ext.layout.container.Accordion.
So the code would be:
var user_menu_items = new Ext.Panel({
layout: {
type:'accordion',
align: 'stretch'
},
height: 565,
...

Extjs scrollbar doesn't appear

I have a problem like in this topic: Extjs how to make the scrollbar appear?, but too many things are confusing for me.
I need to show a scrollbar as soon as the form is wider than the containing container. Why is autoScroll: true not working?
I will give three different examples, combined with this problem. The most needed - the first ex.
1. https://fiddle.sencha.com/#fiddle/j2c
var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'anchor',
items: [{
itemId: "TPMethodContentProvider",
xtype: "form",
autoScroll: true,
layout: 'anchor',
anchor: "100%",
items: [{
xtype: "container",
padding: 5,
layout: 'anchor',
anchor: "100%",
autoScroll: true,
items: [{
margin: 5,
padding: 5,
width: 850,
xtype: "container",
autoScroll: true,
anchor: "100%",
layout: 'column',
items: [{
columnWidth: 0.7,
items: [{
itemId: "S1",
margin: 5,
xtype: 'textfield',
anchor: "95%",
fieldLabel: "type:",
labelWidth: 140,
tabIndex: 0,
value: "bd",
}],
layout: "anchor"
}, {
columnWidth: 0.3,
items: [{
itemId: "S2",
margin: 5,
xtype: 'textfield',
anchor: "95%",
fieldLabel: "num:",
labelWidth: 140,
}],
layout: "anchor"
}, ] //panel items
}] // some container items
}] // form items
}] }); win.show();
No scrollbar.
..fiddle.sencha.com/#fiddle/j2f
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyPadding: '5 5 0',
width: 600,
items: [{
xtype: 'container',
padding: '5',
layout: 'anchor',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
anchor: '-5',
name: 'first',
}]
}, {
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
anchor: '100%',
name: 'last'
}]
}],
}],
}); //Ext.create('Ext.container.Viewport', {});
It works, until commented last line Ext.create('Ext.container.Viewport', {});
If I remove the code inside items Viewport observed the same behavior.
..fiddle.sencha.com/#fiddle/j2g..
Ext.create('Ext.container.Viewport', {
padding: '5',
items: [{
id: 'mainPanelContainer',
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
//width: 600,
items: [{ //outer container
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
width: 600,
items: [{
xtype: 'container',
padding: '5',
layout: 'column',
items: [{
xtype: 'textfield',
fieldLabel: 'text1',
name: 'Name1',
columnWidth: .3
}, {
xtype: 'textfield',
fieldLabel: 'text2',
name: 'Name2',
columnWidth: .7
}], //container items
}], //outer container items
}, ] //form items
}, ]});
Scroll works until width: 600 set in that place, but doesn't work in the commented place.
Sorry for outer code in 2, 3 ex. Some unhandy snippets code.
You shouldn't use 'anchor' layout in case of scroll usage.
As you can see in the fiddle, I used 'fit' layout instead.
If you use ExtJS5 I do not recommend you to use 'autoScroll' config(it's deprecated), use 'scrollable' instead. (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-scrollable)
var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'fit',
items: [{
itemId: "TPMethodContentProvider",
xtype: "form",
layout: 'fit',
width: 600,
items: [{
margin: 10,
padding: 5,
xtype: "container",
scrollable: 'horizontal',
layout: 'hbox',
items: [{
itemId: "S1",
margin: 5,
xtype: 'textfield',
fieldLabel: "type:",
scrollable: 'horizontal',
labelWidth: 140,
tabIndex: 0,
value: "bd",
}, {
itemId: "S2",
margin: 5,
xtype: 'textfield',
scrollable: 'horizontal',
fieldLabel: "num:",
labelWidth: 140,
}] //panel items
}] // form items
}] //win items
});
win.show();
I changed the layout to auto, which did the trick for me. Now it is possible to added/remove panels and the scroll-bar will automatically show/hide.
var workActivityPanel = new Ext.Panel({
region: 'center',
autoScroll: true,
layout: {
type: 'auto',
align: 'stretch'
}
});

How to auto height viewport child panels in it?

I am working in ExtJS4. I am getting stuck at a point where I want to auto height the east region of border layout. Actually my requirement is to automatically increase height of any region based on child elemtents content inside it. I tried a lot but I did not get solution for it. Please give me some suggestion.
In my code I am just testing a simple code containing 5 panels in east region, out of those four panels are displayed. The fifth panel is not displayed, how can I make it visible? I am just using a sample code for reference.
Here is my viewport code :
Ext.define('Am.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id:'viewportId',
alias:'widget.Viewport',
autoScroll:true,
// closable:true,
items: [
{
region:'north',
items:[
{
xtype:'panel',
flex:.2,
title:'north region',
html:'<p>north region'
}
]//end of items
},
{
region:'west',
id:'westId',
//margins:'0 5 5 5',
flex:.3,
//layout:'accordion',
items:[
{
title:'This day in a history',
xtype:'Content'
}
]//end if items
},// end of region west
{
//title:'center',
region:'center',
id:'centerId',
//html:'center region',
items:[
]//End of itmes
},// end of region center
{
region:'east',
id:'eastId',
//margins:'0 5 0 5',
flex:.3,
//layout:'accordion',
items:[
{
xtype:'panel',
title:'panel1',
html:'hi<br>hello<br>good<br><br><br><br><br>morning<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel2',
html:'hi<br>hello<br>good<br><br><br><br<br>noon<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel3',
html:'hi<br>hello<br>good<br><br><br><br><brafter noon<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel4',
html:'hi<br>hello<br>good<br><br><br><br><br><br><brnigth<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel5',
html:'good bye'
},
]//end if items
},
{
//title:'South',
region:'south',
id:'southId',
items:[{
xtype:'panel',
title:"footer",
html:'footer '
}]
},//mainMenu // used mainMenu when you are using mainMenu variable
]//end if items
});//End of view port
And here is my screen shot output :
Child component panel5 is not displayed. How can I make it visible?
How can I display all panels with this requirement? I want to make auto increase the size of east region based on panel contents.
Please give me some suggestion.
To get a panel to autoresize based on its content
You should set its flex to 0, and make sure other panels have flex that is different from 0. So in the following code, the footer has flex: 0 and the center region has flex: 1; the footer will therefore resize based on its contents. Here's a working JsFiddle:
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Footer',
region:'south',
xtype: 'panel',
margins: '5 0 0 5',
flex: 0, // Notice this.
id: 'footer',
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items:[{
title: '1',
height: 50
},{
title: '2',
height: 50
}]
},{
title: 'Center Region',
flex: 1, // Notice this.
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
Ext.getCmp('footer').add({
title: '3',
height: 50
});
To get a panel of fixed size to scroll based on its content
Simply add autoScroll: true on the containers (the region panels).
Here's some working code, which you can see in action on this JsFiddle:
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'West Region',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
id: 'west-region-container',
// Notice the next line
autoScroll: true,
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items:[{
title: '1',
height: 100
},{
title: '2',
height: 100
},{
title: '3',
height: 100
}]
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
You are searching for flex config setting:
items:[{
title: 'panel1',
flex: .3
},{
title: 'panel2',
flex: .3
},{
title: 'panel3',
flex: .4
}]
this works (for your first problem at least):
Ext.define('MyApp.view.ui.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
region: 'center'
},
{
xtype: 'panel',
width: 150,
title: 'My Panel',
region: 'west'
},
{
xtype: 'container',
width: 150,
layout: {
align: 'stretch',
type: 'vbox'
},
region: 'east',
items: [
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
}
]
},
{
xtype: 'panel',
height: 50,
title: 'My Panel',
region: 'north'
},
{
xtype: 'panel',
height: 50,
title: 'My Panel',
region: 'south'
}
]
});
me.callParent(arguments);
}
});

Resources