Question is simple.
I have a home screen where the north region has to display two textfields and one button to enable user to connect.
I have this code.
Ext.create('Ext.container.Viewport', {
layout: 'anchor',
id: 'homescreen',
items: [
{
layout: 'border',
border: false,
height: 160,
anchor: '100%',
items: [
{
region: 'west',
// some codes here
},
{
xtype: 'container',
width: '70%',
region: 'east',
layout:
{
type: 'table',
columns: 1,
tdAttrs:
{
style: 'padding: 5px 15px 5px 15px;',
align: 'middle',
},
defaults:
{
width: 150,
textAlign: 'right'
},
},
items: [
{
xtype: 'textfield',
//fieldLabel: 'login',
labelWidth:50,
emptyText: 'Utilisateur',
margin: '18 0 0 0',
},
{
xtype: 'textfield',
//fieldLabel: 'mot de passe',
labelWidth:100,
emptyText: 'Mot de passe',
},
{
xtype: 'button',
html: 'Connexion',
scale: 'large',
},
]
}]
},
As you can see, all the textfields and the button are aligned vertically on one column.
But problem is that they are displayed on the left side of the container. How can I display them on the right (without using css) ?
= align them horizontally.
VBox layout would probably be more appropriated to your use case. It stacks component vertically and lets you control horizontal and vertical alignment of the resulting block.
Try the following layout, for example:
layout: {
type: 'vbox'
,align: 'center' // or 'right'
,pack: 'center' // controls vertical align
,defaultMargins: 5
}
Related
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
]
}
}
In my extjs 6.0.0.640, in my panel, I have a tab panel.. inside tab panel I have 2 grids. How do I stretch the grids vertically to fit inside the tab panel? basically stretching the height to fill vertically?
PROJECT CODE
Ext.define('ExtApplication4.view.performance.Performance', {
extend: 'Ext.panel.Panel',
xtype: 'app-performance',
controller: 'performance',
itemId: 'performanceItemId',
requires: [
'ExtApplication4.view.performance.PerformanceController',
'ExtApplication4.util.GlobalVar',
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Line',
'Ext.chart.series.Area'
],
title: 'Performance',
layout: {
type: 'fit'
},
items: [
{
xtype: 'tabpanel',
itemId: 'tabPanelId',
activeTab: 0,
//flex: 1,
//height: '100%',
items: [
{
title: 'Portfolio Level',
//layout: {
// type: 'vbox'
//},
items: [
{
xtype: 'grid',
title: 'Portfolio Level',
itemId: 'performancePortfolioLevelGridID',
bind: {
store: '{myPortfolioPerformanceStore}'
},
margin: '10px 0px 10px 0px',
ui: 'featuredpanel-framed',
cls: 'custom-gridPerformance',
//height: 500,
flex: 1,
width: 975,
collapsible: false,
listeners: {
itemClick: 'onAccountClick'
},
features: [{
ftype: 'summary',
dock: 'bottom'
}],
columns: columns are here
},
{
title: 'Daily Portfolio Equity',
width: 975,
//height: 300,
flex: 1,
ui: 'featuredpanel-framed',
margin: '10px 0px 10px 0px',
xtype: 'chart',
theme: 'awesome2',
interactions: 'itemhighlight',
}
Your problem isn't the tabpanel. A tabpanel is already set to layout:'fit' by default.
It's the panel that contains the tabpanel. You should provide it with a fit layout as well, so that the tabpanel is sized to fill the panel.
Ext.create({
xtype: 'panel',
layout: 'fit'
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.
If I use Border layout and add a label to one of the regions, I then want to add some spacing around it so that it is not pushed up against the border. However no matter what I use (margin or padding) it always exposes some ugly gray/blue areas :
I do not expect this, because the label is sitting on a panel. I don't understand how transparancy comes into the equation.
I am simply adding my label like this :
var createPanel = Ext.create('Ext.panel.Panel', {
border: false,
region: 'center',
layout: {
type: 'border',
pack: 'start'
},
items: [
{
xtype: 'panel',
border: false,
region: 'center',
text: 'Create New With Selected Packets',
items: {
margin: 30, //or padding!!!!
xtype: 'label',
text: 'Create New With Selected Packets'
}
},
{
xtype: 'panel',
border: false,
region: 'east',
items: {
xtype: 'button',
margin: '5 5 5 5',
text: 'Create New '
}
}
]
});
jsfiddle here
You can wrap the label with a container, like:
{
xtype: 'panel',
border: false,
region: 'center',
text: 'Create New With Selected Packets',
items: {
xtype: 'container',
padding: 30,
items: {
xtype: 'label',
text: 'Create New With Selected Packets'
}
}
}
Working example: http://jsfiddle.net/vc8L43Lw/
I have a panel containing two children panels.the parent panel uses "border" layout, while two children panels use "form" and "column" layouts respectively. now How can I make these two children panels resize accordingly when window resizes, i.e., make sure the size ratio of these two panels is constant.
thanks!
my codes are as follows:
itemRts = {
xtype: 'panel',
title: 'Route',
region: 'north',
autoHeight: true,
layout: 'form',
width: 294,
bodyStyle: 'padding:10px 12px 10px',
id: 'ROUTE_PANEL',
el: 'Route_Setup',
items: [
{
xtype: 'button',
text: 'Go',
anchor: '0',
id: 'GO_BTN'
}]
};
itemEvts = {
xtype: 'panel',
title: 'Events',
region: 'center',
layout: 'column',
tpl: 'Please put events here.',
//bodyStyle: 'padding:10px 12px 10px',
border: false,
hideBorders: true,
id: 'EVENT_PANEL',
el: 'Event_Legend',
autoScroll: true
};
newView = new Ext.Viewport({
layout: "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
width: 200,
layout: 'border',
split: true,
boxMaxWidth: 280,
minWidth: 280,
id: 'RTS_EVTS_REGION',
collapseMode: 'mini',
items: [
itemRts,
itemEvts]
}]
});
how to modify above codes to make it work as what I want?
thanks again!
You can set a resize event for container panel and call "dolayout" method of their children in case of resize :
newView = new Ext.Viewport({
layout: "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
width: 200,
layout: 'border',
split: true,
boxMaxWidth: 280,
minWidth: 280,
id: 'RTS_EVTS_REGION',
collapseMode: 'mini',
items: [itemRts, itemEvts],
listeners: {
'resize': function () {
itemRts.doLayout();
itemEvts.doLayout();
}
}
}]
});
for your main container, i suggest hbox and/or vbox layouts. those layouts are what you are looking for. here a sample:
var testPanel = new Ext.Viewport( {
id : 'vp_test',
layout : 'hbox',
align : 'stretch',
items : [
{
id : 'pnl_child_1',
title : 'Test 1',
flex : 2
},
{
id : 'pnl_child_2',
title : 'Test 2',
flex : 3,
layout : 'vbox',
align : 'stretch',
items : [
{
id : 'pnl_child_3',
title : 'Test 3',
flex : 1
},
{
id : 'pnl_child_4',
title : 'Test 4',
flex : 1
}
]
},
]
} );
you can refer to documentation, viewport, hbox, vbox
itemRts = {
xtype: 'panel',
title: 'Route',
// region: 'north', <<< we don't need this anymore
flex: 1, // this means that this container has 1 flexible share
// autoHeight: true, <<< this will ruin all layout
layout: 'form',
// width: 294, <<< we don't need this anymore
bodyStyle: 'padding:10px 12px 10px',
id: 'ROUTE_PANEL',
el:'Route_Setup',
items: [
{
xtype:'button',
text:'Go',
anchor:'0',
id:'GO_BTN'
}
]
};
itemEvts = {
xtype: 'panel',
title: 'Events',
// region: 'center', <<< we don't need this anymore
flex: 1, // this means that this container has 1 flexible share
layout: 'column',
tpl: 'Please put events here.', // <<<< if you're not going to use xTemplates you should use html property instead
//bodyStyle: 'padding:10px 12px 10px',
border: false,
hideBorders: true,
id: 'EVENT_PANEL',
el : 'Event_Legend',
autoScroll: true
};
newView = new Ext.Viewport({
//// if you have only one child component you can use fit layout for viewport.
//// and consider removing that only child. use viewport as main container.
layout : "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
// width: 200, <<<< width has no effect on center region
/// we'll use hbox with align stretch
layout: 'hbox',
align: 'stretch',
// split: true, <<<< split has no effect on center region
// boxMaxWidth: 280, <<<< no effect
// minWidth: 280, <<<< no effect
id: 'RTS_EVTS_REGION',
// collapseMode: 'mini', <<<< collapse properties has no effect on center region
items: [
itemRts,
itemEvts
]
}
]
});