Related
I have another Ext js 7 modern layout problem with multiple resizer and collapser like this:
https://fiddle.sencha.com/#view/editor&fiddle/3ci6
When i collapse the "Move this first" panel, and then move left resizer and then right resizer a strange layout bug appears (right from statistik white space appears).
What did I do wrong?
Just move the resizer to the previous panel:
function __(key) {
return key;
}
Ext.create('Ext.form.Panel', {
xtype: 'main.customer',
itemId: 'main_customer',
renderTo: Ext.getBody(),
//title: __('Kunde'),
flex: 1,
items: [{
xtype: 'panel',
itemId: 'maincontainer',
//hidden: true,
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
height: '100%',
items: [{
xtype: 'panel',
padding: 0,
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
height: '63%',
resizable: {
split: true,
edges: ['south']
},
items: [{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [{
title: __('Stammdaten'),
xtype: 'panel',
html: 'test',
flex: 1,
collapsible: {
direction: 'left',
animation: false,
useDrawer: false,
collapseToolText: __('Stammdaten einklappen'),
expandToolText: __('Stammdaten ausklappen'),
},
}, {
xtype: 'panel',
title: __('Weitere Kundendaten'),
collapsed: true,
flex: 1,
collapsible: {
direction: 'right',
animation: false,
useDrawer: false,
collapseToolText: __('Weitere Kundendaten einklappen'),
expandToolText: __('Weitere Kundendaten ausklappen'),
},
layout: {
type: 'fit',
align: 'stretch'
},
items: [{
xtype: 'tabpanel',
flex: 1,
layout: {
animation: {
type: '',
}
},
defaults: {
scrollable: true,
userSelectable: {
bodyElement: true
},
padding: 10,
},
items: [{
title: __('Zusatz 1'),
iconCls: '',
flex: 1,
items: [{
xtype: 'container',
flex: 1,
items: [{
xtype: 'panel',
flex: 1,
html: 'test',
}]
}]
}, {
title: __('Zusatz 2'),
iconCls: '',
flex: 1,
items: [{
xtype: 'container',
flex: 1,
items: [{
xtype: 'panel',
flex: 1,
html: 'test',
}]
}]
}]
}]
}],
}]
}, {
xtype: 'panel',
resizable: {
split: true,
edges: ['west'],
},
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [{
xtype: 'panel',
flex: 1,
html: '< Move this first<br>then this one to the right >',
collapsible: {
direction: 'right',
animation: false,
useDrawer: false,
collapseToolText: __('Statistik einklappen'),
expandToolText: __('Statistik ausklappen'),
},
// THE RESIZER IS MOVED HERE
resizable: {
split: true,
edges: ['east'],
},
}, {
xtype: 'panel',
title: __('Statistik'),
collapsible: {
direction: 'right',
animation: false,
useDrawer: false,
collapseToolText: __('Statistik einklappen'),
expandToolText: __('Statistik ausklappen'),
},
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [{
xtype: 'tabpanel',
flex: 1,
layout: {
animation: {
type: '',
}
},
defaults: {
scrollable: true,
userSelectable: {
bodyElement: true
},
padding: 10,
},
items: [{
title: __('Umsatzstatistik'),
iconCls: '',
flex: 1,
items: [{
xtype: 'panel',
flex: 1,
items: [{
//xtype: 'main.customer.basedata.statistik',
}]
}]
}, {
title: __('Weitere Statistik'),
iconCls: '',
flex: 1,
items: [{
xtype: 'container',
html: 'stats2',
}]
}]
}],
// ADDITIONAL LISTENERS
listeners: {
collapse: function (panel) {
panel.previousSibling().setResizable({})
},
expand: function (panel) {
panel.previousSibling().setResizable({
split: true,
edges: ['east'],
})
}
}
}],
}]
}, {
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [{
xtype: 'panel',
width: '50%',
resizable: {
split: true,
edges: 'east'
},
items: [{
xtype: 'panel',
html: 'test',
}],
}, {
xtype: 'panel',
flex: 1,
items: [{
xtype: 'panel',
html: 'test',
}],
}]
}]
}],
collapsible: false
});
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'
}
});
SOLUTION:
To better show the problem our actual code was facing, the following code works.
The keys for me to get this to work were to give border layout an 'align' config of stretch, and to ensure that containers had 'flex' config of 1 where necessary.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{text: 'First Name'}],
store: Ext.create('Ext.data.Store', {fields: ['fname']})
});
Ext.define('MyView', {
extend: 'Ext.container.Container',
alias: 'widget.myView',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myGrid',
title: 'My First Grid',
flex: 7,
bodyStyle: {
backgroundColor: '#ff0000'
}
}, {
xtype: 'myGrid',
title: 'My Second Grid',
flex: 3,
bodyStyle: {
backgroundColor: '#0000ff'
}
}]
});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
layout: {
type: 'border',
align: 'stretch'
},
items: [{
xtype: 'container',
region: 'center',
itemId: 'gridsContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myView',
flex: 1
}]
}]
}]
});
});
ORIGINAL POST:
In the code below, if you replace:
Ext.create('Ext.container.Container'
with:
Ext.create('Ext.container.Viewport'
The grids correctly occupy 70%/30% of the available area.
But when the code has Container and not Viewport, the grids are very small.
Of course my real code is within a larger application, so I cannot use a Viewport at that point, I must use container.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{
text: 'First Name',
dataIndex: 'fname'
}],
store: Ext.create('Ext.data.Store', {
fields: ['fname']
})
});
Ext.onReady(function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
autoScroll: true,
bodyPadding: 0
},
items: [{
xtype: 'myGrid',
itemId: 'grid1',
flex: 7
}, {
xtype: 'splitter'
},{
xtype: 'tabpanel',
itemId: 'mypanel',
width: 400,
height: 400,
renderTo: document.body,
flex: 3,
scroll: true,
resizable: false,
activeTab: 0,
items: [{
xtype: 'myGrid',
itemId: 'tabgrid1',
title: 'My Grid Tab One'
},{
xtype: 'myGrid',
itemId: 'tabgrid2',
title: 'My Grid Tab Two'
}],
tabBar:{
//plain:true,
items:[{
xtype: 'tbfill'
},{
text:'????',
xtype:'image',
src: 'panelCollapseBtn.png',
closable: false,
listeners:{
'afterrender':function (comp) {
comp.getEl().on('click', function (el) {
// alert(comp.up('#mypanel').getCollapsed());
var panel = comp.up('#mypanel');
var isCollapsed = panel.getCollapsed();
//alert('is collapsed: ' + isCollapsed);
panel.header = !isCollapsed;
//panel.collapsible =isCollapsed;
comp.setSrc(isCollapsed?"panelCollapseBtn.png":"panelExpandBtn.png");
panel.toggleCollapse();
}, this);
comp.getEl().on('mouseover', function (el) {
el.target.style.cursor = "pointer";
}, this);
}
}
}]
}
}]
}]
});
});
I want to insert an image after a tabpanel in Sencha Touch 2, but it doesn't work. This is my code:
Ext.Viewport.add({
xtype: 'panel',
layout: 'vbox',
fullscreen: true,
items: [{
xtype: 'image',
width: 500,
height: 100,
src: 'http://placekitten.com/g/500/100'
}, {
xtype: 'tabpanel',
tabBarPosition: 'bottom',
items: [{
title: 'Nous contacter',
iconCls: 'user',
html: 'page2',
items: [{
docked: 'top',
title: 'title',
xtype: 'titlebar'
}],
}]
}]
});
Try like this
Ext.Viewport.add({
xtype: 'panel',
layout: 'vbox',
fullscreen: true,
items: [{
xtype: 'image',
width: '100%',
height: '20%',
src: 'http://placekitten.com/g/500/100'
}, {
xtype: 'tabpanel',
tabBarPosition: 'bottom',
height: '80%',
items: [{
title: 'Nous contacter',
iconCls: 'user',
html: 'page2',
items: [{
docked: 'top',
title: 'title',
xtype: 'titlebar'
}],
}]
}]
});
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