I am facing a challenge in adding a "Print PDF" option to my website because it is built using Ext.js, and therefore the code is not in HTML. Despite searching for ways to print a PDF from the site, all solutions I found involve using HTML. Is there any library or method available that allows me to manually specify what content I want to print rather than extracting it from the HTML code?
Below is how I have defined the table that I intend to print out in a PDF file:
const store = Ext.create('Ext.data.Store', {
storeId:'hotelsStore',
fields:['name', 'Best price', 'Price1', 'Price2', 'Price3'],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
const grid = Ext.define('KitchenSink.view.grid.CellEditing', {
extend: 'Ext.grid.Panel',
xtype: 'cell-editing',
initComponent: function() {
Ext.apply(this, {
store: Ext.data.StoreManager.lookup('hotelsStore'),
columns: [
{
header: 'Name',
dataIndex: 'name',
width: 300
}, {
header: 'Best price',
dataIndex: 'bestPrice',
width: 105
},
{
header: 'Price1',
dataIndex: 'priceSite1',
width: 200
},
{
header: 'Price2',
dataIndex: 'priceSite2',
width: 200
},
{
header: 'Price3',
dataIndex: 'priceSite3',
width: 200
},
{
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
id: 'delete-column',
items: [{
icon: '/assets/img/delete.png',
tooltip: 'Delete',
scope: this,
handler: this.onRemoveClick
}],
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
scope: this,
handler: this.add
}, {
text: 'Print values',
scope: this,
hander: this.printValues
}, {
text: 'Logout',
scope: this,
handler: this.logout
}]
}],
});
this.callParent();
},
The array containing the values I wish to include in the PDF is as follows:
function fillData()
for(var i = 0; i<hotelNames.length; i++) {
dataArray.push({ 'name': names[i], 'bestPrice': results[i2], 'Price1':
results[i4], 'Price2': results[i5], 'Price3': results[i6]})
i2 = i2 + 4;
i3 = i3 + 4;
i4 = i4 + 4;
i5 = i5 + 4;
i6 = i6 + 4;
}
}
Lastly, here is how I populate the table:
fillData();
store.getProxy().data = dataArray;
store.load();
Given that Ext.js uses JavaScript instead of HTML, I am unsure about how to proceed with achieving the desired functionality. Any guidance on this matter would be greatly appreciated.
Thank you in advance.