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
Related
I'm interested in automatically setting the height of a panel to the height of the viewport in Ext js.
Using listeners this is easy to do, but it seems to be a perfect use of Ext js variable binding. I can't seem to get it to work, however.
In my main view my bind config is, bind: {height: 'viewportHeight'}. In the view model, I have data: { viewportHeight: Ext.getViewportHeight()}. I extend this view model with the view model for my panel class, and have bind: {height: 'viewportHeight'} in the view.
I thought this was how bindings work in Ext js, but viewportHeight is set at the initial viewport height, and then never updated. Resizing the window does not resize the panel.
What am I missing with variable binding in Ext js?
You do not need to use binding. ExtJs has layouts for these purposes:
Ext.create('Ext.container.Viewport', {
//layout: 'fit',
layout: {
type: 'hbox',
align : 'stretch'
},
items: [{
xtype: 'panel',
title: "Sample Panel",
html: "Content HTML",
width: 200,
margin: 5
}, {
xtype: 'panel',
title: "Another Panel",
html: "Content HTML",
width: 400,
margin: 5
}]
});
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)
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
}
]
}
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'
}]
})
});
I've got a a Tab panel with a few tabs inside. I'm using the iconCls property in the tabs to give each tab an image along with its title. I'm using the fam fam fam 16x16 icons and the default tab space is cutting the images off at the top/bottom.
I tried messing around with the icon's class by changing the margins but it's not helping. According to the documentation the ext.tab.Tab component has padding and height properties, but setting those is not having an effect on the tab at runtime.
Ext.define('AM.view.Tab.Standard', {
extend: 'Ext.tab.Panel',
alias: 'widget.TabStandard',
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
initComponent: function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function(){
var items =
[
{
padding: 10, // nope :(
title: 'Gantt',
autoScroll: true,
iconCls: 'gantt icon',
},
{
height: 10, // nope :(
title: 'Logs',
autoScroll: true,
iconCls: 'logs icon',
},
{
title: 'Help',
autoScroll: true,
iconCls: 'help icon',
}
];
return items
},
});
Perhaps I'm misunderstanding how those properties work, but the everything on the page looks the same.
EDIT: It appears I'm having the same problem with the "Headings" (the bar with the +/-) when used as an accordion panel.
You can customize tabs in a tab panel by using the tabBar property on tabPanel:
var tabpanel = new Ext.tab.Panel({
plain: true,
region: 'center',
tabBar: {
defaults: {
flex: 1, // if you want them to stretch all the way
height: 20, // set the height
padding: 6 // set the padding
},
dock: 'top'
}
});