I want to use a layout where components are added horizontally like hbox but where upon adding if the component exceed the bounds of the container it is moved to the next line. This is similar to what FlowLayout is in swing and flex.
I couldn't find any layout in ExtJS 4.0 that would achieve this.
So I am wondering how I would go about doing this. I am fairly new to the framework so any pointers would be great.
Have you tried using ColumnLayout? If you don't specify the "columnWidth" properties, the child elements are css-floated from left to right:
Ext.create('Ext.Panel', {
width: 500,
height: 280,
title: "ColumnLayout Panel",
layout: 'column',
renderTo: document.body,
items: [{
xtype: 'panel',
title: 'First Inner Panel',
width: 250,
height: 90
},{
xtype: 'panel',
title: 'Second Inner Panel',
width: 200,
height: 90
}, {
xtype: 'panel',
title: 'Third Inner Panel',
width: 150,
height: 90
}]
});
Related
I was able to create a custom element utilizing answers from this question:
Using predefined SVG file for creating a custom JointJS shape with ports
After reviewing the tutorials for JointJS I don't see how to move the ports to different locations on the element.
Thanks
Example code:
http://jsfiddle.net/jshubert/9a8brrun/
var el1 = new joint.shapes.devs.Model({
markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
size: {
width: 100,
height: 100
},
position: {
x: 50,
y: 75
},
attrs: {
'.label': { text: 'SW_1', 'ref-x': .1, 'ref-y': .01},
'.body': {
width: 1024,
height: 768,
'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
preserveAspectRatio: 'none'
}
},
inPorts: ['1'],
outPorts: ['2']
});
ref-x, ref-y applied on appropriate selector can do the trick eg.
'.inPorts .port0 .port-body' : {'ref-x': -20, 'ref-y': -20}
http://jsfiddle.net/9a8brrun/1/
I m new to jointJS, I need to create custom shapes using JointJS, I have tried creating the diamond shape using the Rectangle, making its height and width same, and then rotate by 45 degrees as follows,
var diamond = new joint.shapes.basic.Rect({
position: { x: 100, y: 100 },
size: { width: 100, height: 100 },
attrs: { diamond: { width: 100, height: 30 } }
});
diamond.attr({
rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' },
text: {
text: 'Diamond', fill: '#3498DB',
'font-size': 18, 'font-weight': 'bold',
'font-variant': 'small-caps',
'text-transform': 'capitalize'
}
});
diamond.rotate(45);
However, the text present inside the rectangle also gets rotated, Any Ideas how can i proceed.... Also I need to create hexagon with a label... Any help will be much appreciated ....
Thanks In Advance,
Mayuri
There is no need to rotate the whole element. Try to add a transform attribute to joint.dia.basic.Rect model.
rect: { transform: 'rotate(45)' }
The other option would be to use joint.dia.basic.Path model.
var diamond = new joint.shapes.basic.Path({
size: { width: 100, height: 100 },
attrs: {
path: { d: 'M 30 0 L 60 30 30 60 0 30 z' },
text: {
text: 'Diamond',
'ref-y': .5 // basic.Path text is originally positioned under the element
}
}
});
In order to achieve a hexagon shape, use the joint.dia.basic.Path model again, but this time use the following path data.
path: { d: 'M 50 0 L 0 20 0 80 50 100 100 80 100 20 z'}
Last but least you can create a custom shape with SVG Polygon in its markup.
Thanks a lot Roman, I followed first solution for diamond and it worked liked a charm!!
here is this for any one looking to make diamond shape using joint.js, I have added the following in joint.js
joint.shapes.basic.Diamond = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.Rect',
attrs: {
'rect': { fill: '#FFFFFF', stroke: 'black', width: 1, height: 1,transform: 'rotate(45)' },
'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
And for its implementation as follows,
var diamond = new joint.shapes.basic.Diamond({
position: { x: 100, y: 100 },
size: { width: 100, height: 100 },
attrs: { diamond: { width: 100, height: 30 } }
});
diamond.attr({
rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' },
text: {
text: 'Diamond', fill: '#3498DB',
'font-size': 18, 'font-weight': 'bold',
'font-variant': 'small-caps',
'text-transform': 'capitalize'
}
});
I have this border layout: http://jsfiddle.net/rGM2t/1/
Running expand function: Ext.getCmp("west").expand(); will shrink the center in order to make room for west.
How can I dynamically expand west and force him to go over center and not shrink it?
Is there anything like Ext.getCmp("west").softExpand();?
Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true,
collapsed : true,
id: 'west',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
Ext.getCmp("west").expand();
You would need west to float. But putting floating elements in a border layout doesnt make much sense. You could use a Window component (which is just a customized floating Panel) to float over the center and the west, and then when the window closes you again see your west and center as before.
something like this maybe: http://jsfiddle.net/3bDWU/
i need to add two boxes in the north section of a layout border
it would be something like this : in red the boxes / panels i need to add (but i dont want to keep borders)
here is my try :
...
{
region: 'north',
split: true,
//xtype : 'box',
height: 100,
layout : 'anchor',
items: [{ xtype: 'box', id: 'header', height: 100, anchor: '70%',
html: '<h1> my title</h1>'},
{
xtype: 'panel', title: 'title', border: 'false', frame: false, height: 100,
html: '<h1> my info</h1>'
}]
}
...
the second panel doesnt work
thanks for ur help
If you want further partition of your north panel, then you should use layout:'border'.
Otherwise you can add your items to the north region derectly without using layout.
If you don't want the border,You should use border:false
You would be better using a border layout again in the north region...
region: 'north',
split: true,
//xtype : 'box',
height: 100,
layout : 'border',
items: [{
xtype: 'box',
id: 'header',
region: 'center',
height: 100,
anchor: '70%',
html: ' my title'
}, {
xtype: 'panel',
region: 'east'
border: 'false',
frame: false,
height: 100,
width: '49%',
html: ' my info'
}]
...
That should work okay.
I am trying a implement a really simple layout using BorderLayout.
var summary = new Ext.Panel({
region:'west',
id:'summary',
title:'Summary layout',
header: true,
split:true,
collapseMode: 'mini',
collapsible: true,
width: 200,
minSize: 175,
maxSize: 400,
layout:'vbox',
align: 'stretch',
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
flex: 1
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings',
flex: 1
}]
});
The layout renders well, but when I change the width using the handle, the two panels inside the vbox don't resize.
I tried any kind of configuration I thought of, but i did not work.
(layout fit, width auto, autoWidth, etc...)
What do I miss? Thanks
For me, it doesn't work.
But this code works :
layout:{
type:'vbox',
align:'stretch'
}
I finally found by myself.
I set the layout options not correctly
I had to change to
...
layout:'vbox',
layoutConfig: {
align: 'stretch'
},
items: [{
...