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)
Related
There is not a single element in that DOM I haven't tried setting color and background-color to non-black for. And #piechart_3d-1 has no styling at all.
So why does the center turn black? And how can I stop that from happening?
new Chartist.Pie('#piechart_3d-1', {
series: [{ meta: 'Active|' + numAllMachines, value: numActive },
{ meta: 'Standby|' + numAllMachines, value: numStandby }]
}, {
donut: true,
donutWidth: '40%',
showLabel: false,
width: '95%',
height: '95%'
});
I know this is old, but I had the same problem and no one seems to have posted the solution anywhere. This is an issue with the svg fill. The black won't show up on the css inspector so it's hard to figure out. The fix is to add a fill to the path. Something like this:
.ct-series path {fill: white !important;}
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 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 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've got a sencha touch app, with a panel that contains 3 image buttons, and the idea is that you can use flick scrolling to scroll them left or right to press the correct one.
The first time (after each load of the app) that you touch or flick these buttons, it doesn't scroll, or it scrolls jerkily. It works ok if you touch it and hold your finger steady for half a second before moving. After that initial time it flicks nicely.
The panel is constructed like so:
var picScroller = { // The picture scroller
flex: 1,
cls: 'items',
scroll: 'horizontal',
layout: 'hbox',
defaults: {
width: 235,
height: 160
},
items: [
{ width: 32 },
{ xtype: 'button', id:"bn1", cls:'myimagebutton', pressedCls:'', handler: myHandler },
{ xtype: 'button', id:"bn2", cls:'myimagebutton', pressedCls:'', handler: myHandler },
{ xtype: 'button', id:"bn3", cls:'myimagebutton', pressedCls:'', handler: myHandler },
{ width: 32 }
]
};
And my CSS is like so:
.myimagebutton {
border:0;
border-radius:0;
margin:10px;
}
Any suggestions? thanks so much
Here's an article that lists a solution to a similar-sounding problem (although this may be specific to being used in conjunction with PhoneGap): http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html