I have a 2x2 button grid. Now I'd like to shrink the buttons to
200x200, place each in a container as a space place holder, then center
each button in its respective container.
In my image, I've only
shrunk the two top buttons so you can see the spacing on the page.
How can I go from the first image to the second image, which was
Photoshop'ed?
The goal: (actually, all 4 centered buttons is the goal)
File: app.js
Ext.application({
launch: function() {
var view = Ext.create('Ext.Container', {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'Home',
ui: 'plain',
style: 'background-color: #c9c9c9',
height: 200,
width: 200
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'News',
ui: 'plain',
style: 'background-color: #b9b9cb',
height: 200,
width: 200
}
]
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'Mail',
ui: 'plain',
style: 'background-color: #a9c9c9',
flex: 1
},
{
xtype:'button',
text: 'Search',
ui: 'Search',
style: 'background-color: #c9c9c9',
flex: 1
}
]
}
]
});
Ext.Viewport.add(view);
}
});
File: index.html
<!doctype html>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sencha</title>
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript"
src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<body>
</body>
</html>
Simply add centered:true to the configuration of all your buttons.
Good luck.
P/S: that config actually set your component to the center (horizontally & vertically) of its parent component.
Related
I need advise on how can I load SigmaJS v2 on a html document?
Here are the steps I did, but it is not working
Step 1) I created a new folder and open a cmd window, then execute the below command
npm install graphology sigma
Step 2) I download the require.js in cdn and put inside the node_modules/sigma/require.js
Step 3) I created a new file called index.html in the node_modules/sigma/index.html.
Below is my code for index.html
<html>
<head>
<script>var exports = {};</script>
<script>var module = {};</script>
<script src="require.js"></script>
<style>
html { height:100%; color: #fff!important;}
body {height: 100%; margin:0; color: #fff!important;}
#sigma-container { width:100%; height:100%; color: #fff!important;}
#sigma-mouse{
background: transparent;
}
</style>
<script type="text/javascript">
function onload(){
require([
"sigma.js",
"../events/events.js"
], function(){
var s = new sigma(
{
renderer: {
container: document.getElementById('sigma-container'),
type: 'canvas'
},
settings: {
labelColor: 'node',
minEdgeSize: 0.1,
maxEdgeSize: 2,
minNodeSize: 5,
maxNodeSize: 5,
}
}
);
var graph = {
nodes: [
{ id: "n0", label: "node 1", x: 0, y: 0, size: 3, color: '#00BCD4' },
{ id: "n1", label: "node 2", x: 3, y: 1, size: 2, color: '#00BCD4' },
{ id: "n2", label: "node 3", x: 1, y: 3, size: 1, color: '#00BCD4' },
{ id: "n3", label: "node 4", x: 6, y: 0, size: 3, color: '#00BCD4' },
{ id: "n4", label: "node 5", x: 5, y: 1, size: 2, color: '#00BCD4' },
{ id: "n5", label: "node 6", x: 4, y: 3, size: 1, color: '#00BCD4' }
],
edges: [
{ id: "e0", source: "n0", target: "n1", color: '#545454', type:'line'},
{ id: "e1", source: "n1", target: "n2", color: '#545454', type:'line'},
{ id: "e2", source: "n1", target: "n3", color: '#545454', type:'line'},
{ id: "e3", source: "n1", target: "n4", color: '#545454', type:'line'},
{ id: "e4", source: "n2", target: "n0", color: '#545454', type:'line'},
{ id: "e5", source: "n2", target: "n3", color: '#545454', type:'line'},
{ id: "e6", source: "n3", target: "n2", color: '#545454', type:'line'},
{ id: "e7", source: "n4", target: "n5", color: '#545454', type:'line'},
{ id: "e8", source: "n4", target: "n3", color: '#545454', type:'line'},
{ id: "e9", source: "n5", target: "n0", color: '#545454', type:'line'}
]
}
s.graph.read(graph);
s.refresh();
});
}
</script>
</head>
<body onload="onload()">
<div id='sigma-container'></div>
</body>
</html>
I encountered error below, when I browse to index.html.
Can anyone please help?
I've checked the source of the Sigma and the minified version is compatible with AMD modules, here is your example, slightly modified, but working:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
html { height:100%; color: #fff!important;}
body {height: 100%; margin:0; color: #fff!important;}
#sigma-container { width:100%; height:100%; color: #fff!important;}
#sigma-mouse{
background: transparent;
}
</style>
<script type="text/javascript">
function onload(){
require([
"https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.1.2/sigma.min.js"
], function(sigma){
console.log(sigma);
});
}
</script>
</head>
<body onload="onload()">
<div id='sigma-container'></div>
</body>
</html>
I need get chart with images in bars (i using pattern and script Highstocks) and put in a tag Canvas, but when i send SVG to tag Canvas the images in bar disappear. Do you can help me? Follow bellow that i did until here:
http://jsfiddle.net/Posture/7aLzdej4/
<!DOCTYPE html>
<html>
<head>
<title>Pattern Fill in Canvas</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Highcharts -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<!-- Canvg -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
</head>
<body>
<br>
<div style="background-color: #ffffff;">
<div id="graf-teste" style="min-width: 80%; height: 200px; max-width: 100%; margin: 0 auto"></div>
<button id='btn_capt'>Capturar Gráfico</button>
</div>
<script type="text/javascript">
var redrawEnabled = true,
ctr = 0;
ctr1 = 1;
Highcharts.chart('graf-teste', {
// $('#graf-teste').highcharts({
chart: {
events: {
render: function() {
if (redrawEnabled) {
redrawEnabled = false;
var chart = this,
renderer = chart.renderer;
chart.series[0].points.forEach(function(p) {
console.log(p);
var widthRatio = p.shapeArgs.width / p.shapeArgs.height,
id = 'pattern-' + p.index + '-' + ctr;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://i.pinimg.com/originals/6c/38/66/6c38667a1977cbcac6f94b92decd7927.png', 0, 0, 1, widthRatio).attr({
}).add(pattern);
p.update({
color: 'url(#' + id + ')'
}, false);
});
chart.series[1].points.forEach(function(q) {
console.log(q);
var widthRatio = q.shapeArgs.width / q.shapeArgs.height,
id = 'pattern-' + q.index + '-' + ctr1;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://s2.glbimg.com/GFHUa5KeFPDTmwtAVjWl1A7oqTQ=/695x0/s.glbimg.com/po/tt2/f/original/2014/07/14/imagem0.jpg', 0, 0, 1, widthRatio).attr({
}).add(pattern);
q.update({
color: 'url(#' + id + ')'
}, false);
});
ctr++;
ctr1++;
chart.redraw();
redrawEnabled = true;
}
}
}
},
title: {
text: 'Gráfico Teste'
},
exporting: {
enabled: false
},
xAxis: {
categories: ['']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'percent',
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.0f}%</b>',
//point.percentage:.1f
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
type: 'bar',
name: 'Serie 1',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [250]
}, {
type: 'bar',
name: 'Serie 2',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [100]
}],
credits: {
enabled: false
}
});
</script>
<canvas id="graf"></canvas>
<script type="text/javascript">
$("#btn_capt").on('click',function(e){
var svg = $('#graf-teste').highcharts().getSVG();
canvg(document.getElementById('graf'),svg);
var img = graf.toDataURL("image/png"); //img is data:image/png;base64
img = img.replace('data:image/png;base64,', '');
});
</script>
</body>
</html>
Comments: It's totally necessary use highstock, because of others charts in page.
Take a look at this demo: http://jsfiddle.net/BlackLabel/u20c8vhL/
I created a new div for the chart and render the SVG there by this method:
$("#btn_capt").on('click', function(e) {
var svg = chart.getSVG();
$('#containerContainer').prepend(svg);
});
I was wondering what would be the best way of achieving a layout like this in extJS:
I have 4 different components that I would like to place in each respective box but am having trouble figuring out exactly how I can do it.
Here is a snippet of some code I have been working on:
Ext.define('/../../../chefCreateAndPinRolesLayoutContainer', {
extend: 'Ext.container.Container',
height: '100%',
width: '100%',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
items: [
Ext.create('/../../../chefRequiredCookbooksGridPanel'),
Ext.create('/../../../chefRoleSetupFormPanel')
]
}, {
flex: 1,
items: [
Ext.create('/../../../chefOptionalCookbooksGridPanel'),
Ext.create('/../../../chefAttributeGridContainer')
]
}]
});
Here is what my current layout comes out to:
I'd like for it to fill the whole Tab Panel and have equal widths and heights per section.
Any ideas?
Thanks
You can try the below snippet, where internal container items(A, B, C, D) can be replaced with your custom items.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
border: 1,
items: [
{
xtype: 'container',
html: 'Cell A content',
flex: 1
},{
xtype: 'container',
html: 'Cell B content',
flex: 1
}
]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'container',
html: 'Cell C content',
flex: 1
},{
xtype: 'container',
html: 'Cell D content',
flex: 1
}
]
}]
}]
});
}
});
I have to do the following layout :
The red container has the layout card and contains :
A titlebar
A container : This one display a map and should take all the size of the screen below the titlebar
A panel : This is to display custom control buttons, it should be over the map and not hide it (background is transparent)
I tried the following code but it didn't work, I can't figure out how to place components over another one. If I use the hbox layout, the custom control buttons will be below the map, and not on the map...
Ext.define('Sencha.view.MapPanel', {
extend: 'Ext.Container',
requires: ['Ext.ux.LeafletMap'],
xtype: 'mappanel',
config: {
itemId: 'mapanel',
layout: 'card',
items: [{
xtype: 'titlebar',
title: 'title',
docked: 'top'
}, {
xtype: 'panel',
config:{
layout: 'fit',
height: '100px',
width: '100px',
itemId: 'controlButtons'
}
}, {
xtype: 'leafletmap',
mapOptions: {
zoom: 13,
zoomControl: false
},
config: {
layout: 'fit'
}
}]
}
});
Here the controlsButton show but not the map. If I put the controlsButton after the leafletMap, the map shows but not the buttons...
Any help welcome!
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
html: 'Main Container',
style: 'border: 2px solid black;',
layout: {
type: 'card'
},
items: [
{
xtype: 'container',
style: 'border:2px solid red',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Title Bar'
},
{
xtype: 'container',
html: 'Container',
style: 'border:2px solid blue;',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'panel',
docked: 'bottom',
height: '20%',
html: 'Panel that holds buttons',
style: 'border: 2px solid green;',
top: '',
width: '50%'
}
]
}
]
}
]
}
});
This is as same as you have wanted (per screenshot). Please ignore the border style. That was just to show you the difference. Hope you get an idea from this. :) Best luck!!
I need to put 3 elements under each other in the center of page. It is not a problem with HBOX. But my elements have different width:
two elements with 350 width and one element with 1000 width. here is the sample:
Ext.create('Ext.Viewport', {
layout: {
type: "hbox",
pack: "center",
align: "middle"
},
items: {
xtype: 'container',
items:[{
xtype: 'image',
height: 350,
width: 350,
src: '/images/logo.jpg'
},{
xtype: 'image',
height: 350,
width: 350,
src: '/images/logo2.jpg'
},{
xtype: 'panel',
width: 1000,
margin: '0px 0px 0px -325px',
frame: true,
autoscroll: true,
title: 'panel title',
html: 'some panel with some rows with<br /> some text'
}]
},
renderTo: Ext.getBody()
});
The main problem is horisontal alignment of elements.
The second problem is: no scrollbar if the resolution of the screen is small and I have big text in panel.
Ok, another example:
Ext.create('Ext.Viewport', {
layout: {
type: "hbox",
pack: "center",
align: "middle"
},
items: {
xtype: 'container',
items:[{
xtype: 'form',
width: 350,
title: 'Form Panel',
items: [{
xtype: 'textfield',
fieldLabel: 'Name'
}]
},{
xtype: 'panel',
width: 1000,
frame: true,
autoscroll: true,
title: 'panel title',
html: 'some panel with some rows with<br /> some text'
}]
},
renderTo: Ext.getBody()
});
This panel will be exactly in the middle of screen, but the form will not.
P.S. I've tried to move layout to the container - it doesn't work
Ext.create('Ext.Viewport', {
layout : 'fit',
autoScroll : true,
items: {
xtype: 'container',
autoScroll : true,
minHeight : 1000,
layout: {
type: "vbox",
pack: "center",
align: "center"
},
items:[{
xtype: 'image',
height: 350,
width: 350,
src: '/images/logo.jpg'
},{
xtype: 'image',
height: 350,
width: 350,
src: '/images/logo.jpg'
},{
xtype: 'panel',
width: 1000,
margin: '0px 0px 0px -325px',
frame: true,
title: 'panel title',
html: 'some panel with some rows with<br /> some text'
}]
},
renderTo: Ext.getBody()
});
I think that maybe you should define a minHeight to the container, and include the layout 'fit' to the container in order to get the autoscroll panel.
And include the vbox layout to the contianer' items.
First of all move your layout definition inside container. It has nothing to do with viewport. Second for your layout I think you should use
type: 'vbox',
align: 'center',
pack: 'center',
I also think there might be something with the way ExtJs layouts images - because when I tried your example in jsfiddle - images still won't layout in vbox, but other components - (box or button) would layout jsut fine