I am using the function to export PDF from jquery DataTables. It works but it repeats the header like the image below:
Does anyone know of any way to export not repeating the header?
$("#table").DataTable({
buttons: [
{
text: '<i class="fas fa-file-pdf"></i> PDF',
extend: 'pdf',
className: 'btn btn-danger',
orientation: 'landscape',
title: 'My table to PDF',
pageSize: 'A3',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
}
}
],
responsive : true,
paging : true,
searching : true
});
It is not so well documented, but after googling around in the pdfmake universe I realized there is a headerRows attribute that defines how many pages the header should be repeated on. This can be manipulated through DataTables' customize(doc) callback :
buttons: [{
extend: 'pdfHtml5',
customize: function(doc) {
doc.content[1].table.headerRows = 0
}
}]
This will prevent the headers from being repeated, i.e only be included on the first page "0".
Demo -> https://jsfiddle.net/mzaudL7c/
Note: The structure of doc.content can vary depending on your setup. So if it not work for you 1:1, investigate doc to find the correct index.
Related
I am trying to extend a tinymce pluggin and need to add an input element of type=file.
(I am new to such an exercise so please pardon my ignorance.. Also could not find examples/samples to work with..)
It seems you can do the following to show elements to a container that opens in a panel :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
];
win = editor.windowManager.open({
title: 'Insert/edit image',
data: data,
bodyType: 'tabpanel',
body: [
{
title: 'General',
type: 'form',
items: generalFormItems
},
],
onSubmit: onSubmitForm });
I am interested in adding an input html of type=file (<input type="file".../>). So there should be the usual html button that will show the 'file dialog' on the browser to allow the user to pick a file. So something like this I am hoping :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
---> {name: 'fileSelect', type: 'file', label: 'Select a File to Upload'},
];
Is it possible to do this and how?
Managed to figure this out and want to leave the answer here for others trying to do something similar.
There is a 'subtype' on each of the UI form elements that will get added to the DOM as is. So doing the below did the trick for me :
{name: 'file', type: 'textbox', subtype: 'file', label: 'Upload', onchange: uploadFile},
In TinyMCE 3.x all dialogs where HTML pages that got loaded into a iframe or window. This was changed in TinyMCE 4 to make it easier to make plugins and fully support CDN:s. But you can still load HTML based pages into TinyMCE dialogs by using the WindowManager.
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Insert/edit image',
url: 'dialogTemplate.html',
width: 700,
height: 600
});
Also you can inline HTML:
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Upload a file to attach',
html: '<input type="file" class="input" name="file" id="file_attach" style="font-size: 14px; padding: 30px;" />',
width: 450,
height: 80,
buttons: [{
text: 'Attach',
subtype: 'primary',
onclick: function() {
// TODO: handle primary btn click
(this).parent().parent().close();
}
},
{
text: 'Close',
onclick: function() {
(this).parent().parent().close();
}
}]
});
I have created a toolbar with menu item in it:
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
padding: '30 0 0 0',
width : '100%',
items: [
{
xtype: 'splitbutton',
text : 'File',
menu: Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [
{
text: 'Import',
// code here
}
]
})
}
]
});
So what I am trying to do is to be able to use Import button just like File->Open.
I know that I can add xtype: 'filebutton', but it shows the browse button with the text field.
Also I want to let the user to choose only certain file extensions. After file is selected (we click open), I want to add it to my file tree in my viewport.
Thanks for any help.
I figured it out by using xtype: 'fileuploadfield' and hiding the file name/text field.
xtype: 'fileuploadfield',
buttonText : 'Open',
buttonOnly: true,
It is as simple as it gets. Just create a toolbar and have this code in its item field.
In Rally App SDK 2.0, I would like to show a dropdown and button in line, and a chart below. The button would export (save as) the chart as a jpeg.
1) how do I specify the div to render objects to? The below code ignores the renderTo
2) is there sample code for exporting a jpeg image? using Canvas generates error
this.add({
xtype: 'rallycombobox',
fieldLabel: 'Select an Enterprise Release',
width: '500px',
renderTo: Ext.get("dropdownDiv"),
storeConfig: {
autoLoad: true,
model: 'Program',
fetch: 'Name,Releases,ReleaseStartDate,ReleaseDate',
sorters: [
{
property: 'Name',
direction: 'ASC'
}
]
},
listeners: {
select: this._onSelect,
scope: this
}
});
this.add({
xtype: 'rallybutton',
text: 'Export',
renderTo: Ext.get("buttonDiv"),
handler: function() {
var canvas = document.getElementById("chartDiv");
var img = canvas.toDataURL("image/jpeg");
// .toDataURL generates error, TypeError: canvas.toDataURL is not a function
document.write('<img src="'+img+'"/>');
}
});
this.add({
id: 'chartCmp',
xtype: 'rallychart',
renderTo: Ext.get("chartDiv"),
flex: 1,
chartConfig: chartConfig
});
// here is the body statement, removed <> so it will show
body
table
tr
td
div id="dropdownDiv" style="height:50px; width:500px;"/div
/td
td
div id="buttonDiv" style="height:50px; width:50px;"/div
/td
/tr
/table
div id="chartDiv"/div
/body
In Ext there are two ways to get a component rendered. The first is by adding a config object with an xtype to a container. That would be the this.add(); lines in your app. The second is by instantiating the component using Ext.create and specifying a renderTo in its config.
this.add({xtype: 'component', html: 'hello world'});
Ext.create('Ext.Component', { html: 'hello world', renderTo: 'aDiv' });
The preferred way is the first since then your component participates in the layout of the app. Also the preferred way for creating dom elements in an app (especially for initial layout) is through the items config rather than static html in the app body.
So:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{ xtype: 'container' itemId: 'dropdownDiv' },
{ xtype: 'container', itemId: 'chartDiv' }
]
});
And then you can add content in the launch method like so:
this.down('#chartDiv').add(chartConfig);
As far as your canvas question goes I'm not sure. You may want to post that as a separate question with more details on the specific error.
I have two questions regarding component layout using Sencha Touch 2:
How can you right align text in a container?
How can you concatenate different bits of dynamic data intermixed with static data into a component that needs to line wrap?
I have a view that I want to render like this:
Where the "Seen:" text is static and right aligned, and the text on the right is a concatenated string with 3 dynamic pieces of text and two pieces of static text.
I have something that works, but it doesn't feel right.
xtype:'container',
layout:{
type:'hbox'
},
items:[
{
xtype:'container',
flex:1,
layout:{
type:'hbox'
},
items:[
{
xtype:'spacer',
layout:'fill'
},
{
xtype:'label',
layout:'fit',
html:'Seen:'
}
]
},
{
xtype:'label',
name:'contentLabel',
flex:5,
html:'[BUILD A STRING AND SET THE HTML HERE]'
}
]
Right-aligning
So to right-align the text, I basically used an hbox container with a spacer component on the left and a label on the right. There's got to be an easier way.
Concatenating
I am able to build the string that I want to place on the right, but I'd rather have multiple labels that I can map one-to-one with my model. It doesn't feel like MVC for me to have to write code to concatenate strings.
I tried breaking apart the right side into an hbox, but there were problems with line wrapping. Each label wants to render itself individually, so if there were wrapping, it would happen within its own container.
Are there easier ways of doing what I am attempting?
Right aligning: it can be done with the text-align CSS property. In the example below I use the style property for simplicity, but using the cls property would be more flexible - it adds a CSS class to the component, so you can style it in the .sass file.
Concatenating: you can use the standard join() Javascript function. It concatenates all elements of an array into a string using the given separator. In my example dynamic1 and dynamic2 are variables.
So the result code:
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
flex: 1,
html: 'Seen:',
style: 'text-align:right'
},
{
xtype: 'container',
flex: 5,
html: ['static1', 'static2', dynamic1, 'static3', dynamic2].join('')
}
]
EDIT
You can also use the tpl property to define a template that renders data property. You can update it programatically calling container.setData()
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
flex: 1,
html: 'Seen:',
style: 'text-align:right'
},
{
xtype: 'container',
flex: 5,
data: {
name: 'Harry Potter',
day: 'Saturday',
date: 'October 21, 2011'
},
tpl: [
'{name} on {day} {date}'
]
}
]
I have an sample application where i am binding the store data to the list using itemtpl, I have little confusion on how to change the color and size of first two list items when i am dynamically binding data to list from store.
This my sample code :
Ext.define('Sample.view.SearchResultView', {
extend: 'Ext.Panel',
requires: [
'Ext.List',
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.Toolbar',
'Ext.TitleBar'
],
alias: "widget.searchresultpage",
config: {
scrollable: true,
items: [
{
xtype: 'list',
layout:'fit',
height:500,
title: 'Search Results',
store: 'MySearchStore',
itemTpl: '<table><td><tr height=10%>{BlockNo}</tr><tr height=90%><p>{ShortDescription}</p></tr></td></table>'
)
}
]
},
});
You need to add a cls attributes to your list like :
cls:'myList'
and then add this in your CSS File :
.myList .x-list-item:nth-child(1),
.myList .x-list-item:nth-child(2) {
color: #CCC;
font-size:14px;
}
Hope this helps
you can set font and color in itemTpl itself.
itemTpl: '<table><td><tr height=10%><font size="12" color="#990000">{BlockNo}</font></tr>
<tr height=90%><p><font size="8" color="#990000">{ShortDescription}</font></p></tr></td>
</table>'