I am trying to download pdf with jquery but when I download pdf it showing content
for that I have make below code
{
extend: 'pdfHtml5', title: 'Customer Sales Rep Sales Totals', orientation: 'landscape',
footer: true,
action: newPDFAction,
exportOptions: {
columns: ':visible',
order: 'applied',
modifier: {
pageMargins: [ 0, 0, 0, 0 ], // try #3 setting margins
margin: [ 10,0 ], // try #4 setting margins
alignment: 'center'
},
body : {
margin:[10,0],
pageMargins: [ 0, 0, 0, 0 ],
alignment: 'center'
} // try #5 setting margins
,columns: [0,1,2,3,4,5,6,7] //column id visible in PDF
},customize: function (doc)
{
doc.content[1].table.widths = [ '15%', '15%', '10%','10%','10%', '15%', '15%' ,'10%'];
doc.content[1].borders = ['2px solid'];
doc.content[1].fillColor = '#ccc';
doc.content.splice(0,0);
}
}
I don't know why it is showing like this. html is showing properly while I am hitting this html in browser
can anybody help me in this?
Related
I am creating a QuickChart.io using Chart.JS within a PowerApps canvas and am having some issues with formatting. Everything works on the visualization (filtering, rendering, etc.) but I am trying to remove the gridlines and resize the display area but the formatting options are not showing up. Any idea what's causing this?
"https://quickchart.io/chart?c="&EncodeUrl("{
'type': 'bar',
'data': {
'labels': ["&Concat(Filter(Table2,Scenario=_code),"'"&'X-Axis'&"',")&"],
'datasets': [
{
'label': 'Dataset 2',
'backgroundColor': 'rgba(54, 162, 235, 0.5)',
'borderColor': 'rgb(54, 162, 235)',
'borderWidth': 1,
'data': ["&Concat(Filter(Table2,Scenario=_code),"'"&DataSet1&"',")&"]
}
]
},
'options':
{
'elements': {
'rectangle': {
'borderWidth': 2
}
},
'responsive': true,
'maintainAspectRatio': false,
'legend': {
'display': false
},
'grid': {
display: false
},
'title': {
'display': true,
'text': 'Revenue'
}
}
}")
Your config is invalid, there is no grid option in the root of the options.
Depending on if quick chart is using chartjs V2 or v3 you need to configure it in the scales section
V2: options.scales.xAxes[0].gridLines.display
V3: options.scales.x.grid.display
And then you replace x by y to remove the y grid
I have a problem using the Quill Editor. I want to show the inserted content of the Quill editor in another HTML Tag.
I tried to use the following code:
configureQuill() {
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'align': [] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['image', 'formula']
];
const options = {
modules: {
toolbar: toolbarOptions,
formula : true,
imageResize: {}
},
placeholder: 'Hier goes the content...',
theme: 'snow'
};
this.q = new Quill('#editor2', options);
this.q.on('editor-change', (eventName, ...args) => {
if (eventName === 'text-change') {
this.contentHtml = this.q.root.innerHTML;
}
});
}
And I am using the contentHTML variable to put the HTML content into a div Container:
<div [innerHTML]="contentHtml">
The content is shown but I think the css styles are not used for the content in the div container:
Everything works fine except the formula, the text-alignment and the text size.
I have solved the problem by adding the following css-class to my div-container: ql-editor.
Furthermore I changed the way of pasting the HTML content as follows:
this.q.on('editor-change', (eventName, ...args) => {
if (eventName === 'text-change') {
const justHtmlContent = document.getElementById('contentHtml');
this.contentHtml = this.q.root.innerHTML;
justHtmlContent.innerHTML = this.contentHtml;
}
});
Is there a way to create a table footer in pdfMake? I have a big table that only fits on multiple pages. I want to repeat the table footer on each page.
Seems like it is still not implemented: https://github.com/bpampuch/pdfmake/issues/620
Add this to your document:
footer: {
columns: [
'',
{
alignment: 'right',
text: 'Footer text'
}
],
margin: [10, 0]
}
I finally figured out how to do this.
(1.) Increase your current "headerRows" count by 1.
(2.) Put the footer row between your header row and data rows.
(3.) Set marginTop of footer row to a little less than the height of the page.
(4.) Set marginBottom of footer row to ((marginTop + height of row) * -1).
This pushes the table footer outside the space of the table into the footer space of the page.
Example:
table: { headerRows: 2, widths: [700], body: [
[{ text: 'My Header' }],
[{ marginTop: 480, marginBottom: -490, text: 'My Footer' }], //480 roughly fits Landscape-Letter
[{ text: 'My Data Row 1' }],
[{ text: 'My Data Row 2' }],
// more data rows
[{ text: 'My Data Row N' }]
]}
try this footer
footer: function (currentPage, pageCount) {
return currentPage.toString() + " of " + pageCount;
},
or
footer: {
columns: [
'Report generated on 8/30/2021 6:02:31PM',
{ text: 'Page 1 of 2', alignment: 'right' },
// { text: 'Developed by KRATOS Fitness Software ', alignment: 'left' },
],
},
footer: {
columns: [
'Report generated on 8/30/2021 6:02:31PM',
'Developed by XYZ Fitness Software',
{
alignment: 'right',
text: 'Page 1 of 2'
},
{
alignment: 'right',
text: 'www.xyz.com'
},
],
margin: [60, 10, 60, 10 ]
},
It's work
I have a Panel where in I wish to add two text fields in 'hbox' layout for every entry in the json data.
For e.g. : Suppose I have a json like this:
{
..
ids : [
{
'name' : 'first name',
'surname' : 'first surname',
},
{
'name' : 'second name',
'surname' : 'second surname'
}
]
}
In this example the panel will consist of two rows of two textfields each with the labels being 'name' and 'surname'
So in the for loop I need to know how to insert the two textfields in 'hbox' layout inside the Panel. Had it been a grid it would be easy to add to the store.
Here's what I have done.
Ext.getCmp('panelid').items.add(Ext.create('Ext.container.Container', {
layout: {
type: 'hbox'
},
defaults: {
bodyPadding: 10,
margin: '10 0 10 10',
height: 100
},
items: [
{
fieldLabel: 'Name',
id: 'idFieldName',
name : 'Data',
margin:'0 10 10 0',
width:225,
labelWidth: 40
},
{
fieldLabel: 'Datatype',
name : 'Type',
id: 'idFielddataType',
margin: '0 10 10 0',
width:225,
labelWidth:55
}
]
}));
EDIT1: Added my progress.
EDIT2: I have found half the solution to the problem. The problem was that I don't need to add to the items but rather I can just add to the panel itself. So this is working :
Ext.getCmp('panelid').add(....)
But now the issue is that in the second iteration of the loop the next hbox formatted text fields come on TOP of the existing ones, i.e., instead of adding a row below this line is adding on top of the panel. Kindly advise how to get rid of this issue.
EDIT 3:
I have found the solution as to why it was adding elements on top of the existing ones. It's because whenever I was adding elements in the loop the id of the added elements was same. So in effect it was replacing the two textfields I had already put in the previous iteration.
So, I have just altered the id name as follows:
id: 'idFieldName' + i
I think you should use the "form" layout instead (or an Ext.form.Panel), and use a Ext.form.FieldContainer to group your 2 text field.
Example :
Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'first line',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
},
{
xtype: 'fieldcontainer',
fieldLabel: 'second line',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
}
]
});
If you want to do it dynamically you can do :
Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
addRow : function(rowLabel) {
this.add({
xtype: 'fieldcontainer',
fieldLabel: rowLabel,
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
});
}
});
and then in your loop you can use :
myPanel.addRow('test');
You should use different names for each field too, to be able to retrieve the form values later.
name: 'Data' + i
EDIT
Besides, I would use itemId instead of id, as stated here: https://stackoverflow.com/a/18472598/2085604
You can then use Ext.ComponentQuery.query(..) to get components by their itemId:
https://stackoverflow.com/a/24407896/2085604
What version of ExtJS are you using for this example? 3, 4 or 5? I ask this because changes the solution of your problem (more or less) depending on the version.
EDIT
Seems that you found a solution. I don't know if you are doing this in the view, but if that's the case, you should use a controller linked to that particular view. In this way your code will look better, more clear and another important reason, the following versions of ExtJS(5), use this kind of structure.
I am using Sencha Architect 2. I am trying to generate a generic UI element with a text search and a table displaying the results. Generic means I want to use it for several different type of searches, e.g. for users, or roles or still something else.
So what I definitely like in this context about Sencha Architect 2 is that it always generates classes. Here is my generated class:
Ext.define('ktecapp.view.ObjSearchPanel', {
extend: 'Ext.container.Container',
alias: 'widget.objsearchpanel',
height: 250,
id: 'UserSearchPanel',
itemId: 'UserSearchPanel',
width: 438,
layout: {
columns: 3,
type: 'table'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
itemId: 'txtSearchText',
fieldLabel: 'Search Text',
colspan: 2
},
{
xtype: 'button',
id: 'searchObj',
itemId: 'searchObj',
text: 'Search',
colspan: 1
},
{
xtype: 'gridpanel',
height: 209,
itemId: 'resultGrid',
width: 430,
store: 'UserDisplayStore',
colspan: 3,
columns: [
{
xtype: 'gridcolumn',
width: 60,
dataIndex: 'ID',
text: 'ID'
},
{
xtype: 'gridcolumn',
width: 186,
dataIndex: 'DISPLAYNAME',
text: 'Displayname'
},
{
xtype: 'gridcolumn',
width: 123,
dataIndex: 'JOBTITLE',
text: 'Job Title'
},
{
xtype: 'actioncolumn',
width: 35,
icon: 'icons/zoom.png',
items: [
{
icon: 'icons/zoom.png',
tooltip: 'Tooltip'
}
]
}
],
viewConfig: {
},
selModel: Ext.create('Ext.selection.CheckboxModel', {
})
}
]
});
me.callParent(arguments);
}
});
The problem I am having is that everything needs to be pretty customizable, dataIndexes of the columns, the store, ...
So how can I get a constructor like function for the class ObjSearchPanel where I pass all that information? In the code above all this looks pretty much hardcoded...
Thanks in advance
Kai
use config,
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-config
Ext.define('SmartPhone', {
config: {
hasTouchScreen: false,
operatingSystem: 'Other',
price: 500
},
constructor: function(cfg) {
this.initConfig(cfg);
}
});
var iPhone = new SmartPhone({
hasTouchScreen: true,
operatingSystem: 'iOS'
});
iPhone.getPrice(); // 500;
iPhone.getOperatingSystem(); // 'iOS'
iPhone.getHasTouchScreen(); // true;
iPhone.hasTouchScreen(); // true
Actually (in ExtJS 4), when you pass a config object to the constructor, this config object is assigned to this.initialConfig variable and still available to other functions of the class. So you can use it in the initComponent.
You still can find code in ExtJS 3.3 like this Ext.apply(this, Ext.apply(this.initialConfig, config)); in the initComponent of classes. However, use it at your own risk because this is not in the document of ExtJS 4, only found it in the source code.