Related
I have an existing layout like the following where each box is a D3 chart
================================
|
box 1 | box 2
|
|
================================
|
|
box 3 | box 4
|
|
I would like to arrange box 1 so it has 2 buttons above it for switching charts.
=============
button|button
box 1
So the full layout would be like
================================
|
button|button | box 2
box 1 |
|
================================
|
|
box 3 | box 4
|
|
The code for the existing layout is below
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start'
},
flex: 1,
padding: 5,
defaults: {
viewId: me.viewId,
frame: true,
height: 350,
cls: 'app-panel'
},
items: [
{xtype:'panel', itemId: 'box-1'},
{xtype:'panel', itemId: 'box-2'},
{xtype:'panel', itemId: 'box-3'},
{xtype:'panel', itemId: 'box-4'}
]}
So i need to replace the first panel (itemId: 'box-1') with some sort of parent panel or container. I am having difficulty achieving this. How can i get the 2 buttons to sit inline and then have the box underneath it ?
If you have the first layout alreay in place you can use the following:
{
xtype:'panel',
itemId: 'box-1',
tbar:[{
xtype: 'button',
text: 'switch A'
}, {
xtype: 'button',
text: 'switch B'
}]
}
Other options are dockedItems and buttons (though these go to the bottom like fbar).
Here is one solution of many possible to arrive at the layout you are asking how to do.
Can be seen working on this Fiddle
let cnt = Ext.create('Ext.Container', {
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
padding: 10,
items: [{
xtype: 'container',
width: '100%',
margin: '0 0 10 0',
layout: {
type: 'hbox',
align: 'fit',
pack: 'start'
},
items: [{
xtype: 'panel',
flex: 1,
height: 250,
title: 'Panel 1',
itemId: 'box-1',
bodyPadding: 10,
margin: '0 10 0 0',
items: [{
xtype: 'button',
text: 'Button 1'
}, {
xtype: 'button',
text: 'Button 2'
}, {
xtype: 'container',
width: '100%',
height: 150,
style: {
border: '1px solid #000'
},
}]
}, {
xtype: 'panel',
flex: 1,
height: 250,
title: 'Panel 2',
itemId: 'box-2',
bodyPadding: 10,
items: [{
xtype: 'container',
width: '100%',
height: 150,
style: {
border: '1px solid #000'
},
}]
}]
}, {
xtype: 'container',
width: '100%',
layout: {
type: 'hbox',
align: 'fit',
pack: 'start'
},
items: [{
xtype: 'panel',
flex: 1,
height: 225,
title: 'Panel 3',
itemId: 'box-3',
bodyPadding: 10,
margin: '0 10 0 0',
items: [{
xtype: 'container',
width: '100%',
height: 150,
style: {
border: '1px solid #000'
},
}]
}, {
xtype: 'panel',
flex: 1,
height: 225,
title: 'Panel 4',
itemId: 'box-4',
bodyPadding: 10,
items: [{
xtype: 'container',
width: '100%',
height: 150,
style: {
border: '1px solid #000'
},
}]
}]
}]
}]
})
I have two containers and I need to add a scrollbar in one of them, I actually do that but only works when I put height directly, I need the height to adjust the window size.
I have tried to add autoHeight property instead of height but does not seems to work.
Here is the code:
{
xtype: 'container',//This is a parent container
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'container',
flex: 0.8,
autoScroll: true, // this works with height but not with autoHeight
//height: 610,
layout: 'fit',
defaults: {
anchor: '100%',
labelAlign: 'top'
},
style:{
"background-color" : '#1b536c',
},
items: [
{
xtype: 'dataview',
flex: 1,
scroll: 'vertical',
tpl: 'some tpl',
store:['some store'],
anchor: '100%',
itemSelector: '.nav-main'
}
]},
{
xtype: 'container',
flex: 3.2,
margins: '0 25 0 25',
defaults: {
anchor: '100%',
labelAlign: 'top'
},
layout: 'anchor',
items: [
//Some form components
]
}
}
I need a horizontal and vertical scroll bar for Viewport. With the below code, I get a vertical scroll bar. I've tried multiple ways to get a horizontal bar including scroll.autoScroll:true, scrollable:true, but it is not working.
var bbb = [{
region: 'north',
border: false,
maxHeight: 60,
//width : 250,
//margin: '0 0 5 0', //top, right, bottom, left
//padding: '0 2 5 2', //top, right, bottom, left
layout: 'anchor',
items: [{
xtype: 'container',
id: 'rendererHeader',
border: false,
height: 35,
scrollable: false,
style: 'background-color: #E6E6E6', //border:1px solid #70BF73;
padding: '0', //top, right, bottom, left
layout: {
type: 'hbox',
pack: 'start',
//align: 'stretch',
},
items: [{
xtype: 'displayfield',
id: 'dspdashboardname',
itemid: 'dspdashboardname',
//text: 'DashBoard',
value: '',
fieldStyle: "font-size:large;color:#000000;text-overflow:ellipsis;font-family:tahoma",
margin: '5 5 5 5', //top, right, bottom, left
},
{
xtype: 'tbfill'
},
{
xtype: 'combobox',
id: 'permitteddashboard',
itemid: 'permitteddashboard',
margin: '7 2 3 2', //top, right, bottom, left
queryMode: 'local',
typeAhead: true,
grow: true,
forceSelection: true,
editable: true,
valueField: 'DashBoardID',
displayField: 'DashBoardName',
value: '',
width: 200,
height: 20
},
{
xtype: 'image',
id: 'rdr_icondbrdrpersonalize',
itemid: 'rdr_icondbrdrpersonalize',
src: './resource/icons/filter.png',
title: 'Personalize Filters',
height: 25,
width: 25,
margin: '6 2 5 2', //top, right, bottom, left
mode: 'image'
},
{
xtype: 'image',
id: 'rdr_icondbrdrmanagedashboard',
itemid: 'rdr_icondbrdrmanagedashboard',
src: './resource/icons/dashboard.png',
title: 'Manage DashBoard',
height: 25,
width: 25,
margin: '6 5 5 2', //top, right, bottom, left
mode: 'image'
}
]
}]
},
// Renderer Panel
{
region: 'center',
id: 'dashboardcenterrigionpanel',
layout: 'anchor',
border: false,
style: 'background-color: #E6E6E6', //border:1px solid #70BF73;
defaults: {
},
items: [
{
xtype: 'container',
//anchor:'100% 10%',
maxHeight: 30,
border: true,
id: 'dashboardfilterpanel',
layout: 'hbox',
padding: '5 5 5 5', //top, right, bottom, left
//margin: '0 6 0 6', //top, right, bottom, left
//style: 'border:1px solid #C8C8C8;',
style: 'border-left:solid #C8C8C8 25px;', //border-right:solid #C8C8C8 5px;
defaults: {
//padding: '0 5 0 5', //top, right, bottom, left
//margin: '25 10 5 10' //top, right, bottom, left
}
}
]
}
];
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
alias: 'topContainer',
id: 'dbrendererviewport',
itemId: 'dbrendererviewport',
height: winHeight,
width: winWidth,
padding: 0,
//style:"background-color:lightgrey;",
items: {
xtype: 'container', // viewport can't scroll, so you need an extra container
//style: 'overflow-x: scroll;overflow-y: scroll',
style: 'overflow:auto',
layout: 'anchor',
items: eval(Ext.encode(bbb))
//layout: 'border',
//height: '100%',
//width: '100%',
}
});
http://docs.sencha.com/extjs/6.0.2/classic/Ext.container.Viewport.html
The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the scrollable config.
How to create a horizontal menu in Extjs ?
Example vertical menu :
Ext.onReady(function(){
var menu = Ext.create('Ext.menu.Menu', {
width: 100,
height: 100,
margin: '0 0 10 0',
renderTo: Ext.getBody(),
floating: false,
items: [{
text: 'JavaScript',
},{
text: 'Java'
},{
text: 'C/C++'
}]
});
});
Use layout property(examples)
Ext.onReady(function(){
var menu = Ext.create('Ext.menu.Menu', {
layout: 'hbox',
width: 300,
height: 100,
margin: '0 0 10 0',
renderTo: Ext.getBody(),
floating: false,
items: [{
text: 'JavaScript',
},{
text: 'Java'
},{
text: 'C/C++'
}]
});
});
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);
}
});