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'
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
]
}
}
How can I put panel with some text inside navigation view, like here http://joxi.ru/E2pyDJQC9MLnyA
I tried past panel in navigation treelist but panel not displayed.
Also I united my treelist and panel in joint container:
{
xtype: 'maincontainerwrap',
id: 'main-view-detail-wrap',
reference: 'mainContainerWrap',
flex: 1,
items: [
{
xtype: 'container',
reference: 'leftContainer',
itemId: 'leftContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'treelist',
reference: 'navigationTreeList',
itemId: 'navigationTreeList',
ui: 'navigation',
store: 'NavigationTree',
width: 64,
micro: true,
expanderFirst: false,
expanderOnly: false,
listeners: {
itemclick: 'onNavigationItemClick',
selectionchange: 'onNavigationTreeSelectionChange'
}
},
{
xtype: 'panel',
header: false,
layout: 'fit',
height: 100,
hidden: checkSubscription().hidden,
width : 64,
userCls: 'sidebar-purchase-wrapper',
renderTo: Ext.get("leftContainer"),
html :
'My text Here'
},
{
xtype: 'container',
flex: 1,
reference: 'mainCardPanel',
cls: 'sencha-dash-right-main-container',
itemId: 'contentPanel',
layout: {
type: 'card',
anchor: '100%'
}
}
]
}
Panel displayed, but when I'm click button onToggleNavigation animation not work correct.
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
}
I have a viewport with code
Ext.define('WIMM.view.Viewport', {
extend: 'Ext.container.Viewport',
autoScroll: true,
layout: 'anchor',
items: [
{
border: false,
title: 'Header',
layout: 'fit',
xtype: 'container',
html: 'Header block. We\'ll try to do this again'
},{
layout: 'border',
items: [
{
collapsible: true,
width: 240,
title: 'Aside Column',
region:'west',
layout: 'fit',
html: 'Aside widgets (news, balance, budget, goals) would be here.'
},{
title: 'Main Block',
border: false,
region:'center',
layout: 'fit',
html: 'Main block were tabPanel would be nested in.'
}
]
},{
title: 'footer',
xtype: 'container',
layout: 'fit',
html: 'Some information in footer (copyrights, disclaimer link)'
}
]
});
But item with border layout shrinks and only 1px border of that block is visible. It's important for me to have scrollBar, so I can't use border layout for entire viewport.
You have to set the height of the panel with the border layout.
{
layout: 'border',
height: 100,
items: [
{
collapsible: true,
width: 240,
title: 'Aside Column',
region: 'west',
layout: 'fit',
html: 'Aside widgets (news, balance, budget, goals) would be here.'},
{
title: 'Main Block',
border: false,
region: 'center',
layout: 'fit',
html: 'Main block were tabPanel would be nested in.'}
]
}
Look at this: http://jsfiddle.net/3CabN/4/
I need align the formpanels to the center, so I used the vbox layout, and after I used it the autoscroll did not work as before, the code is as below:
Usr.VWPanel = Ext.extend(Ext.Panel, {
id: null,
rid: null,
closable: true,
autoScroll: true,
buttonAlign: 'center',
layout: {
type:'vbox',
padding:'5',
pack:'center',
align:'center'
},
initComponent: function () {
Ext.apply(this, {
items: [
{
xtype: 'spacer',
height: 16
},
{
xtype: 'usr.usrform',
itemId: 'usr.vwpain.usrformt',
width: 600,
height: 500
},
{
xtype:'spacer',
height: 16
},
{
xtype: 'usr.loginform',
itemId: 'usr.vwpain.loginform',
width: 600
},
{
xtype: 'spacer',
height: 16
},
{
xtype: 'usr.subsform',
itemId: 'usr.vwpain.subsform',
width: 600
}],
...
plz advise.
the vbox layout will never show the scroller.
{
xtype: 'window',
title: 'My Window',
width: 500,
height: 500,
layout: 'vbox',
layoutConfig: {
pack: 'center',
align: 'center'
},
items: [
{
xtype: 'panel',
title: 'My Panel',
anchor: '80% 100%',
height: 300,
width: 300,
autoScroll: true,
items: [
{
xtype: 'panel',
html: 'this isform1',
height: 100
},
{
xtype: 'panel',
html: 'this isform1',
height: 100
},
{
xtype: 'panel',
html: 'this isform1',
height: 100
}
]
}
]
}
in your css you can set your My Panel margins to {0 auto} which will center the My Panel inside the window. This means you don't need a special layout config for your window.
I have added a listener on resize event to get the vertical scroll as for Vbox we have to provide height to get scroll but when window size get change scroller height remain constant.
Ext.define('DataConfigurations', {
extend: 'Ext.form.Panel',
bodyStyle: 'padding:5px 5px;',
listeners: {
resize: {
fn: function(el) {
this.setHeight(this.up('window').getHeight()-150); // 150 is extra for my panel coz of headers so have minus it.
console.log("new height = " + this.up('window').getHeight()-150);
}
}
},
title: "Update Data Configurations",
Hopes this help.