What's the best way to do a layout where the start content is fixed, the center is flex and the end content is fixed? Like a 100% wide HBox with three columns, first and last col are fixed and the center stretches?
This is how I do it by now, can I avoid using sap.ui.commons.layout.MatrixLayout?
new sap.ui.commons.layout.MatrixLayout({
layoutFixed: true,
columns: 3,
width: '100%',
widths: [ '100px', '100%', '100px' ],
rows: [
new sap.ui.commons.layout.MatrixLayoutRow({
cells : [
new sap.ui.commons.layout.MatrixLayoutCell({
content: new sap.m.Label({
text: 'start'
})
}),
new sap.ui.commons.layout.MatrixLayoutCell({
content: new sap.m.Label({
text: 'center'
})
}),
new sap.ui.commons.layout.MatrixLayoutCell({
content: new sap.m.Label({
text: 'end'
})
})
]
})
]
})
I tried to use sap.ui.layout.HorizontalLayout, but it does not stretch horizontally:
sap.ui.layout.HorizontalLayout({
width: '100%',
content: [
new sap.m.Label({
width: '100px',
text: 'start'
}),
new sap.m.Label({
width: '100%',
text: 'center'
}),
new sap.m.Label({
width: '100px',
text: 'end'
})
]
})
The HBox is the solution for browsers supporting the CSS3 FlexBoxLayout. Alternatively, you could nest two FixFlex layouts - this should work in all UI5-supported browsers (FixFlex is like a specific, limited subset of HBox/Vbox with fallback for non-FlexBox browsers).
Ok, I think I got it. :)
new sap.m.HBox({
items: [
new sap.m.Label({
text: 'start',
width: '100px',
layoutData: new sap.m.FlexItemData({
growFactor: 0
})
}),
new sap.m.Label({
text: 'center',
layoutData: new sap.m.FlexItemData({
growFactor: 1
})
}),
new sap.m.Label({
text: 'end',
width: '100px',
layoutData: new sap.m.FlexItemData({
growFactor: 0
})
})
]
})
Related
I have the following code: in a St.ScrollView I have added a St.BoxLayout . The St.Scrollview is added in a menu.box.Now I want to create a St.Button, to remove the St.BoxLayout from St.ScrollView and add another St.BoxLayout there.I have tried to make a function "clicked" connected with the button, and do this:
this.buttonnotifications.connect('clicked', this.displayNotifications);
displayNotifications: function() {
this.scrollbox.remove(this.vbox);
this.menu.box.remove(this.scrollbox);
this.scrollbox.add_actor(this.vbox1);
this.menu.box.add(this.scrollbox);
},
but it does not work.A snippet of the code is below:
this.buttonbox = new St.BoxLayout();
this.buttontoday = new St.Button({ label: 'Today', width: 140, x_align: 1, style_class: 'selectbutton'});
this.buttonnotifications = new St.Button({ label: 'Notifications', width: 140, x_align: 1, style_class: 'selectbutton'});
this.buttonbox.add_actor(this.buttontoday);
this.buttonbox.add_actor(this.buttonnotifications);
this.menu.box.add(this.buttonbox);
this.scrollbox = new St.ScrollView({
height: 700,
width: 330,
hscrollbar_policy: 2,
vscrollbar_policy: 2,
enable_mouse_scrolling: true
});
this.vbox = new St.BoxLayout({
//height: 1400,
//width: 330,
vertical: true,
//y_expand: true,
style_class: "datemenu-displays-box",
style: "border:10px;"
});
this.vbox1 = new St.BoxLayout({
//height: 1400,
//width: 330,
vertical: true,
//y_expand: true,
style_class: "datemenu-displays-box",
style: "border:10px;"
});
this.vbox.add_actor(this._date.actor);
this.vbox.add_actor(this._calendar.actor);
this.vbox1.add_actor(this._eventsSection.actor, {
//x_fill: true
});
this.vbox.add_actor(this._mediaSection.actor);
this.vbox.add_actor(this._clocksSection.actor);
this.vbox.add_actor(this._weatherSection.actor, {
//x_fill: true
});
this.vbox1.add_actor(this._messageList.actor);
this.scrollbox.add_actor(this.vbox);
this.menu.box.add(this.scrollbox);
In other words I want to remove the vbox and add vbox1 pressing the buttonnotifications.
Any help will be appreciated.
Thanks in advance.
I have managed to solve this by adding this code:
this.buttonnotifications.connect('clicked', this.displayNotifications.bind(this));
The difference to the previous code is
.bind(this)
method.
Using pdfmake.js to generate pdf in javascript. But it generates a blank document if the content is too large. Used the html2canvas to create the canvas and created the pdf using this. How can resolve this issue??
self.exportAsCanvas = function (contentObject, fileName, heading) {
var useWidth = $(contentObject)[0].offsetWidth;
var useHeight = $(contentObject)[0].offsetHeight;
//var graphContent = angular.element(contentObject).find('.graph-content');
html2canvas(contentObject, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
var data = canvas.toDataURL();
var docDefinition = {
header: { text: heading, style: 'header' },
footer: {
columns: [
{ text: 'Copyright © 2015 H&R Block. All Rights Reserved.', alignment: 'center',fontSize: 11 }
]
},
pageOrientation: self.pageOrientation,
content: [{
image: data,
fit: [1000, 1100]
//width: 500,
//height:1100
}],
styles: {
header: {
fontSize: 14,
bold: true,
alignment: 'center',
margin: [0, 10, 0, 10]
}
}
};
pdfMake.createPdf(docDefinition).download(fileName + ".pdf");
},
width: useWidth,
height: useHeight
});
};
You should try implementing a page break:
var docDefinition = {
header: { text: heading, style: 'header' },
footer: {
columns: [
{ text: 'Copyright © 2015 H&R Block. All Rights Reserved.', alignment: 'center',fontSize: 11 }
]
},
pageOrientation: self.pageOrientation,
content: [{
image: data,
fit: [1000, 1100],
pageBreak: 'after', //PAGE BREAK
//width: 500,
//height:1100
}],
styles: {
header: {
fontSize: 14,
bold: true,
alignment: 'center',
margin: [0, 10, 0, 10]
}
}
};
I am trying to increase the header size on a pdf using pdfmake.
Currently am able to get a header on both the left and right of the page, which is what I want, but when the height passes 26, the image disappears because there is a limited amount of space for the header.
The margin can be decreased to increase the size but i want the
margin to remain.
I've searched pdfMake github for similar issues with no success.
If you need to test anything, try the code I have so far on
pdfmake playground
Keep in mind you will need to copy and paste all this code on the "playground" to make it work.
var dd = {
pageSize: 'LEGAL',
pageOrientation: 'landscape',
header: {
margin: 8,
columns: [{
table: {
widths: ['50%', '50%'],
body: [
[{
image: 'sampleImage.jpg',
width: 80,
height: 26,
}, {
image: 'sampleImage.jpg',
width: 80,
height: 26,
alignment: 'right'
}]
]
},
layout: 'noBorders'
}]
},
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
You need to add a pageMargins and adjust the second parameter (top margin) to your total header size. You can try values until you get all header content visible.
For example:
In this case, I use 80 (pageMargin: [40,80,40,60]) to get the image with height 60
var dd = {
pageSize: 'LEGAL',
pageOrientation: 'landscape',
pageMargins: [40, 80, 40, 60],
header: {
margin: 8,
columns: [
{
table: {
widths: [ '50%','50%'],
body: [
[
{ image: 'sampleImage.jpg',
width: 80, height: 60,
},
{ image: 'sampleImage.jpg',
width: 80, height: 60,
alignment:'right'}
]
]
},
layout: 'noBorders'
}
]
},
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
The accepted answer for this is a good one, but I thought since I found one I believe might work better for others, especially if header content length may vary, I would share.
Tables in pdfmake have a nifty feature where the header row(s) are repeated on each page the table spans. So, you can create a table that wraps your entire document, and add as many header rows as you would like, and they will be sticky throughout all pages. Here's an example doc def.
var docDefinition = {
pageSize : 'LETTER',
pageMargins : [25, 25, 25, 35],
defaultStyle : {
fontSize : 12,
columnGap : 20
},
// Page Layout
content : {
// This table will contain ALL content
table : {
// Defining the top 2 rows as the "sticky" header rows
headerRows: 2,
// One column, full width
widths: ['*'],
body: [
// Header Row One
// An array with just one "cell"
[
// Just because I only have one cell, doesn't mean I can't have
// multiple columns!
{
columns : [
{
width : '*',
text : 'Delivery Company, Inc.',
fontSize : 12,
bold : true
},
{
width : '*',
text : [
{ text: 'Delivery Slip\n', fontSize: 12 },
{ text: 'Date ', bold: true },
'2/16/2015 ',
{ text: 'Arrived ', bold: true },
'11:05 AM ',
{ text: 'Left ', bold: true },
'11:21 AM'
],
fontSize : 10,
alignment : 'right'
}
]
}
],
// Second Header Row
[
{
columns: [
{
width: 'auto',
margin: [0,0,10,0],
text: [
{ text: 'CUSTOMER\n', fontSize: 8, bold: true, color: '#bbbbbb' },
{ text: 'John Doe', fontSize: 12 }
]
},
{
width: 'auto',
margin: [0,0,10,0],
text: [
{ text: 'INVOICE #\n', fontSize: 8, bold: true, color: '#bbbbbb' },
{ text: '123456', fontSize: 12 }
]
}
]
}
],
// Now you can break your content out into the remaining rows.
// Or you could have one row with one cell that contains
// all of your content
// Content Row(s)
[{
fontSize: 10,
stack: [
// Content
{ text:'this is content', pageBreak: 'after' },
{ text:'this is more content', pageBreak: 'after' },
{ text:'this is third page content' }
]
}],
[{
fontSize: 10,
stack: [
// Content
{ text:'this is content', pageBreak: 'after' },
{ text:'this is more content', pageBreak: 'after' },
{ text:'this is third page content' }
]
}]
]
},
// Table Styles
layout: {
hLineWidth: function(i, node) { return (i === 1 || i === 2) ? 1 : 0; },
vLineWidth: function(i, node) { return 0; },
hLineColor: function(i, node) { return (i === 1 || i === 2) ? '#eeeeee' : 'white'; },
vLineColor: function(i, node) { return 'white' },
paddingBottom: function(i, node) {
switch (i) {
case 0:
return 5;
case 1:
return 2;
default:
return 0;
}
},
paddingTop: function(i, node) {
switch (i) {
case 0:
return 0;
case 1:
return 2;
default:
return 10;
}
}
}
},
// Page Footer
footer : function(currentPage, pageCount) {
return {
alignment : 'center',
text : currentPage.toString() + ' of ' + pageCount,
fontSize : 8
}
},
};
I'm dealing with a panel that have several windows inside it.
Is there a way for the windows to not overlap each other when they are re-positioned by the user?
What class/es should I work on?
Here is a very discrete sample to work on. http://jsfiddle.net/jopantorilla/XFC6P/1/
Ext.onReady(function () {
var window1, window2;
var parentWindow = Ext.create('Ext.window.Window', {
title: 'Parent Window',
layout: 'fit',
width: 500,
height: 450,
items: [
window1 = Ext.create('Ext.window.Window', {
title: 'Window 1',
id: 'window1',
width: 150,
height: 150,
x: 50,
y: 100,
constrain: true
}),
window2 = Ext.create('Ext.window.Window', {
title: 'Window 2',
id: 'window2',
width: 150,
height: 150,
x: 300,
y: 100,
constrain: true
})]
}).show();
window1.show();
window2.show();
});
Use the WindowManager to control the behavior of the overlap.
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.WindowManager
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
Ext.onReady(function() {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
width: window.innerWidth,
height: window.innerHeight,
//title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
title: 'Message List',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},{
//title: 'Map',
region: 'center',
xtype: 'gmappanel',
center: {geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',marker: {title: 'Fenway Park'}}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
myMask.hide();
});
Question
Why can't load the gmappanel?
I'm trying to show the Loading Mask, when Page complete loaded only remove the loading mask? how to do it?
region: 'center', // center region is required, no width/height specified
xtype: 'gmappanel',
id : 'mygooglemap',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
zoomLevel: 2,
gmapType: 'map',
center: {geoCodeAddr: 'Malaysia'}
Try This code workable for u or not.