I am writing a Rally app that has both a chart and a grid in separate Rally containers. The containers are in a 'vbox' (vertical box) layout. They are set up like:
{
xtype: 'container',
itemId: 'rightView',
flex: 1,
layout: 'vbox',
items: [
{
xtype: 'container',
itemId: 'topRightView',
flex: 1
},
{
xtype: 'container',
itemId: 'bottomRightView',
flex: 1
}
]
}
where the chart is in the topRightView and the grid is in the bottomRightView
When they are first rendered, the grid completely overlaps the chart. However, when I resize the window at all, they go to the places that they are supposed to be (with the chart positioned above the grid).
The css for the grid and the chart is:
.builds-grid {
width:600px;
}
.builds-chart {
margin-top: 30px;
border: dotted;
width: 700px;
}
After inspecting both the chart and the grid html, I found that the position of both is relative, so that should not be messing it up.
I also tried putting different z-indexes on the two to make sure they don't overlap, but that has not worked.
The grid is rendered before the chart, so this could possibly be part of the problem. I don't really know what to do about it; any help would be greatly appreciated! Thank you!
In your top code segment, add this line:
height: 400px,
into the container that will be holding the chart. It should end up looking something like this:
{
xtype: 'container',
itemId: 'rightView',
flex: 1,
layout: 'vbox',
items: [
{
xtype: 'container',
itemId: 'topRightView',
height: 400px,
flex: 1
},
{
xtype: 'container',
itemId: 'bottomRightView',
flex: 1
}
]
}
Related
I'm creating a web application and I want a panel to be perfectly in the center of it's parent panel. I was going through ExtJS5's Kitchen Sink to find layout examples and I found this one.
It places the panel perfectly in the middle, it doesn't cheat using hbox or vbox then setting the pack and align properties to center and middle.
Here is the code he used:
Ext.define('KitchenSink.view.layout.Center', {
extend: 'Ext.container.Container',
requires: [
'Ext.layout.container.Center'
],
xtype: 'layout-center',
width: 500,
height: 400,
layout: 'center',
items: {
title: 'Centered Panel: 75% of container width and 95% height',
border: true,
layout: 'center',
scrollable: true,
width: '75%',
height: '95%',
bodyPadding: '20 0',
items: [
{
title: 'Inner Centered Panel',
html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
width: 300,
height: '100%',
frame: true,
bodyPadding: '10 20'
}
]
}
});
And here is how it looks like:
The reason I prefer this is because the width and height of one the first inner panel is purely percent based. If I tried this using hbox or vbox, I would need to set the width or height to a fixed number.
I'm using Sencha Architect and for some reason, I can't find the layout type center for my panel, container, and viewport elements. I've also included the Ext.layout.container.Center in my requires but still no dice.
Does anyone know how to implement this Kitchen Sink example in Sencha Architect?
This is a bug https://www.sencha.com/forum/showthread.php?293050
But you can easily overcome any such problems using process config function in SA.
Select your class where you want to edit special configs and click on add processCofnig
Next in the generated function you can edit the configs in any way you need.
processMyContainer: function(config) {
config.layout = "center";
}
The only disadvantage of using process config is that you will not see the settings set by it in the SA design view - but when you preview the app you will see it.
This is my final code for the class:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.container.Container',
alias: 'widget.mycontainer',
requires: [
'MyApp.view.MyContainerViewModel',
'Ext.panel.Panel'
],
viewModel: {
type: 'mycontainer'
},
height: 800,
width: 600,
initConfig: function(instanceConfig) {
var me = this,
config = {
items: [
me.processMainPAnel({
xtype: 'panel',
height: '95%',
width: '75%',
bodyPadding: '20 0',
title: 'Centered Panel: 75% of container width and 95% height',
items: [
{
xtype: 'panel',
height: '100%',
html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
width: 300,
bodyPadding: '10 20',
title: 'Inner Centered Panel'
}
]
})
]
};
me.processMyContainer(config);
if (instanceConfig) {
me.getConfigurator().merge(me, config, instanceConfig);
}
return me.callParent([config]);
},
processMainPAnel: function(config) {
config.layout = "center";
return config;
},
processMyContainer: function(config) {
config.layout = "center";
}
});
This is the result in the browser:
I have placed the following and everything is working great. I have a grid on the left and a grid on the right, but they placed side by side, I would like a thin line between thing. Is this possible?
{
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'first-grid-panel',
flex: 1
},
{
xtype: 'second-grid-panel',
flex: 1
}
]
}
I was hoping to placer some kind of vertical line between them, very thin.
Or other option would be to place a right border on the "left" grid panel and a left border on the "right" grid panel. I am unsure whether that would work.
I tried setting frame: true, but this puts a big ugly frame around it.
Setting a border as you mentioned is possible, for example:
items: [{
style: {
borderRight: 'solid 1px red'
}
},{
style: {
borderLeft: 'solid 1px green'
}
}]
Example: https://fiddle.sencha.com/#fiddle/umu.
(You better do this using a css class)
Here is a Sencha fiddle of my tab panel setup. Buttons are dynamically added to a vbox tabs container that is part of an hbox layout setup. The tabs container's width is determined by the flex property.
I've tried setting every button's width: '100%', but upon looking at the Sencha docs on button.width, I find that width takes an integer value representing pixels. I've tried setting the width in style, but I've only succeeded in making the button's width be the width of the screen.
Help and an explanation of the underlying CSS concepts would be greatly appreciated
You're looking for the stretchmax option.
var locationCameraList=[];
Ext.application({
name : 'Fiddle',
launch : function() {
var buttonArr = [];
for (i = 0; i < locationCameraList.length; ++i) {
var tabName = locationCameraList[i].location,
index = i;
var tab = {
xtype: 'button',
cls: 'tab'+index,
text: tabName,
scale: 'medium'
};
buttonArr.push(tab);
console.log(i)
}
var forms = {
xtype: 'container',
flex: 4,
layout: 'fit',
align: 'stretch',
html: 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'
};
Ext.create('Ext.window.Window', {
title: 'Foo',
layout: 'hbox',
items:[{
xtype: 'container',
items: buttonArr,
flex: 1,
layout: {
type: 'vbox',
align: 'stretchmax'
},
autoScroll: true,
height: 200
}, forms]
}).show();
}
});
i need a layout something like this:
https://fiddle.sencha.com/#fiddle/21i
I need the west filter panel to be collapsable and my content panel has a dynamic height.
A possibility could also be that the panel with the boarder layout has a full height and the overflow is just scrollable...
Though i dont get a valid border layout without setting a total height to my panel.
Please help
UPDATE
A nice workaround would be appreciated too...
EDIT
a new fiddler with dynamic generated content
https://fiddle.sencha.com/#fiddle/221
A quick and dirty workaround is to let render the body of the dynamic panel and adjust the height of your main container accordingly. You'll need to account for anything that adds height to the center panel's body.
For example, with your code, you can add a listener like this to your border layout container:
listeners: {
delay: 1,
afterrender: function() {
this.setHeight(
this.down('[region=center]').body.getHeight()
+ this.getHeader().getHeight()
// also account for borders, margins, etc. if needed
);
}
}
See your updated fiddle.
Update Toward a more robust solution
As I said in the comment, Ext4 makes it quite easy to make a panel collapsible with 'hbox' layout, and probably most other kinds.
Here's a good starter (fiddled there):
Ext.onReady(function() {
Ext.widget('viewport', {
layout: {
type: 'hbox'
,align: 'stretch'
}
,items: [{
title: 'left'
,width: 150
,resizable: true
,resizeHandles: 'e'
,style: {
borderRight: '2px solid #157FCC'
}
,collapsible: true
,collapseDirection: 'left'
,defaultType: 'button'
,layout: {
type: 'vbox'
,align: 'stretch'
}
,items: [{
text: "Foo"
},{
text: "Bar"
},{
text: "Baz"
}]
},{
title: 'center'
,flex: 1
,autoScroll: true
,tbar: [{
text: "Add content"
,handler: function() {
this.up('panel').add({
html: "<p>Lorem ipsum dolor sit amet...</p>"
})
}
}]
}]
});
});
You can use:
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start'
}
in a container ( window, panel, ..)
and:
Flex: 1
in a component within, like a grid.
Works pretty good, in my experience. ( as suggested in the layout examples from the Sencha site and Forum remarks )
Remove the 'border' layout and replace it with
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
Now you can remove the heights and it will fit dynamically
I am developing a portal as in http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html . The good thing about this example is that the height and width are readjusted at run time if you play with height and width of browser. Now i have a panel (just like what's in the graph for the chart), but the difference is that i have got two charts to display in that panel so i can't use layout:'fill' . The problem is that i have to define width and height of both charts in points. Due to which the charts don't resize when the panel is resized. How can i make them to get height and width in percentage relative to its parent ?? and for the record height and width 'auto' jsut wont render the graph.
Your help is appreciated
Ext.define("Ext.app.ChartPortlet",{extend:"Ext.panel.Panel",alias:"widget.chartportlet",requires:["Ext.data.JsonStore","Ext.chart.theme.Base","Ext.chart.series.Series","Ext.chart.series.Line","Ext.chart.axis.Numeric"],
generateData:function(){var b=[{name:"x",djia:10000,sp500:1100}],a;for(a=1;a<50;a++) {b.push({name:"x"+a,sp500:b[a-1].sp500+ ((Math.floor(Math.random()*2)%2)?-1:1)*Math.floor(Math.random()*7),djia:b[a-1].djia+ ((Math.floor(Math.random()*2)%2)?-1:1)*Math.floor(Math.random()*7)})}return b}
,initComponent:function()
{Ext.apply(this,{layout: {
type: 'vbox',
align: 'stretch'
}
,width:600,height:300,items:
[{xtype:"chart",animate:false,shadow:false,store:Ext.create("Ext.data.JsonStore",
{fields:["name","sp500","djia"],data:this.generateData()}),legend: {position:"bottom"},axes:[{type:"Numeric",position:"left",fields:["djia"],
title:"Dow Jones Average",label:{font:"11px Arial"}}, {type:"Numeric",position:"right",grid:false,fields:["sp500"],title:"S&P 500",label: {font:"11px Arial"}}],
series:[{type:"line",lineWidth:1,showMarkers:false,fill:true,axis: ["left","bottom"],xField:"name",yField:"djia",style:{"stroke-width":1}}, {type:"line",lineWidth:1,showMarkers:false,
axis:["right","bottom"],xField:"name",yField:"sp500",style:{"stroke-width":1}}]}]
});this.callParent(arguments)}});
Use a box layout:
Ext.onReady(function(){
Ext.create('Ext.container.Container', {
width: 300,
height: 300,
renderTo: document.body,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
title: 'Some panel'
}, {
flex: 1,
title: 'Other panel'
}]
})
});