In my interface I use the following structure:
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'fieldset',
flex: 2,
layout: {
type: 'vbox',
align: 'stretch'
},
margin: '0 5 0 0',
padding: '10',
items: [
{
xtype: 'container',
flex: 1,
layout: 'hbox',
items: [
{
xtype: 'combo',
flex: 1,
margin: '0 5 0 0',
name: 'deviceSelect',
...
},
{
xtype: 'button',
...
},
{
xtype: 'button',
...
}
]
},
{
xtype: 'box',
flex: 1,
name: 'deviceMessage'
...
}
]
},
{
...
},
{
...
}
Combo 'deviceSelect' should take entire width of the container except of the size of the two buttons and under it should be text. At the moment everything is working as it should, with one exception - the text "pinned" to the top of its 'deviceMessage' container. How can place it in the middle (vertically) of the container? I tried style: 'vertical-align: middle;', but it doesnt work (probably because ext add top: 24px).
I think the code is not optimal. Any comments are welcome.
Something like this: http://jsfiddle.net/laurenzonneveld/YLrzC/?
The part you need is the layout part:
xtype: 'container',
name: 'deviceMessage',
layout: {
// Centers your inner panel with the HTML
type: 'vbox',
align: 'center',
pack: 'center'
},
//...
items: {
xtype: 'container',
html: 'sadfasdf<br>safasdfasf'
}
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
]
}
}
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.
I have the following application that contains two panels. The height of the first one set to 75% of the screen area and the second panel set to take up the bottom 25% of the screen. I have been working on this for a couple hours and I the button contained in the second panel that is supposed to be taking up the bottom 25% of the screen always shows up at the top. I am new to Sencha and JS any help would be appreciated:
Ext.application({
name : 'MyApp',
launch : function()
{
Ext.onReady(function ()
{
var panel = Ext.create('Ext.panel.Panel', {
title: 'Test 2',
autoScroll: true,
forceFit: true,
layout: { type: 'vbox', align: 'fit', padding: 5},
items:
[
{ xtype: 'panel', height: '75%', layout: { type: 'vbox', align: 'fit', padding: 5}},
{ xtype: 'panel', height: '25%', layout: { type: 'vbox', align: 'fit', padding: 5}, items:[ { itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' } ]}
]
});
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [panel]
});
});
}
});
You can try use the flex property for the panels, and instead of using percentages, set the panel 1 to fit to entire height and the panel 2 to a specific height, just like the following code:
layout: { type: 'vbox', align: 'stretch', padding: 5},
items:
[
{ xtype: 'panel', flex: 1, layout: { type: 'vbox', align: 'fit', padding: 5}},
{ xtype: 'panel', height: 100, layout: { type: 'vbox', align: 'fit', padding: 5},
items:[
{ itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' }
]}
]
You can check the following example: http://jsfiddle.net/rx7Lfo55/
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);
}
});