Adding a new field to Print Dialog

Community plugins and extensions
Post Reply
User avatar
kevinvdheuvel
Posts: 96
Joined: Mon Mar 09, 2015 3:31 pm

Adding a new field to Print Dialog

Post by kevinvdheuvel »

Hi

we have a requirement like we need to add a field in print plugin dialog.

We tried by adding a Custom ExportDialog, ExportDialogForm but we are facing some issue

like :
Uncaught TypeError: Cannot read property 'DPI' of undefined
at constructor.createFields (sch-all-ver-1542289715528.js:2)
at constructor.initComponent (sch-all-ver-1542289715528.js:2)
at constructor.callParent (ext-all-ver-1542289715528.js:2)

Code:

Code: Select all

Ext.define('MyExportForm', {
    extend : 'Sch.widget.ExportDialogForm',

    initComponent : function () {
        var me = this;

        me.callParent();

        // append one more extra field
        me.checkboxdesc = Ext.create('Ext.form.field.Text', {
            fieldLabel: 'Save Export'
        });

        me.checkboxfield = new Ext.form.field.Checkbox({
            margin: '0 0 0 5',
            width: 100,
            xtype: 'checkbox',
            boxLabel: 'newfield',
            name: 'checkboxfield',
            id : 'checkboxfield',
            inputValue: '1'
        });

        // append new fields
        me.add(me.checkboxdesc, me.checkboxfield);
    }
});

Code: Select all

Ext.define('MyExportDialog', {
    extend : 'Sch.widget.ExportDialog',

    // override buildForm to use our custom MyExportForm
    buildForm: function (config) {
        console.log("MyExportDialog buildForm hit.");
        return new MyExportForm({
            progressBar  : this.progressBar,
            dialogConfig : config
        });
    }
});

Code: Select all

plugins : [ 
                                Ext.create('Sch.plugin.CurrentTimeLine', {
                                    updateInterval : 30000,
                                    showHeaderElements : false
                                }), 
                                Ext.create("Sch.plugin.DragSelector"),
                                Ext.create('Sch.plugin.Printable', {
                                 
                                    // default values
                                    exportDialogClassName:'MyExportDialog',
                                    defaultConfig: {
                                        format: "A3",
                                        orientation: "landscape",
                                        range: "complete",
                                        showHeader: true,
                                        singlePageExport: true
                                    },
                                    docType             : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
                                    autoPrintAndClose   : true
                                    
                                })
                           ]

While debugging we found the value of config which is passing as a parameter to buildForm method is empty.
Please help us

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2996
Joined: Fri Apr 01, 2016 11:08 am

Re: Adding a new field to Print Dialog

Post by pmiklashevich »

Please try it in examples/print/app/view/Scheduler.js

Code: Select all

Ext.define('MyExportForm', {
    extend : 'Sch.widget.ExportDialogForm',

    alias : 'widget.myexportform',

    createFields : function () {
        var me    = this,
            items = me.callParent(arguments);

        // append one more extra field
        me.checkboxdesc = Ext.create('Ext.form.field.Text', {
            fieldLabel : 'Save Export'
        });

        me.checkboxfield = new Ext.form.field.Checkbox({
            margin     : '0 0 0 5',
            width      : 100,
            xtype      : 'checkbox',
            boxLabel   : 'newfield',
            name       : 'checkboxfield',
            id         : 'checkboxfield',
            inputValue : '1'
        });

        return items.concat([me.checkboxdesc, me.checkboxfield]);
    }
});

Code: Select all

plugins : [
        // Plugin that enables printing
        {
            ptype              : 'scheduler_printable',
            pluginId           : 'printable',
            exportDialogConfig : {
                defaultFormXType : 'myexportform',
                format           : "A3",
                orientation      : "landscape",
                range            : "complete",
                showHeader       : true,
                singlePageExport : true
            },
            docType            : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
            autoPrintAndClose  : true
        }
    ],
Pavel Miklashevich - Core Developer

User avatar
kevinvdheuvel
Posts: 96
Joined: Mon Mar 09, 2015 3:31 pm

Re: Adding a new field to Print Dialog

Post by kevinvdheuvel »

Thanks for your information, It is working fine now.

We are trying to use that value in headerTpl,
We are trying to override beforeExport method but it is not calling.

Code: Select all

 {
                                    ptype              : 'scheduler_printable',
                                    pluginId           : 'printable',
                                    exportDialogConfig : {
                                        defaultFormXType : 'myexportform',
                                        format           : "A3",
                                        orientation      : "landscape",
                                        range            : "complete",
                                        showHeader       : true,
                                    },
                                    docType             : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
                                    autoPrintAndClose   : true,
                                    DPI:'144',
                                    exportConfig :{showHeader: true, showFooter: true,showName:true,showSinglePageExport: true},
                                    headerTpl:"<H1> Hello</H1>",
                                  
                                    beforeExport : function (scheduler,ticks) {
                                        console.log('beforeExport'); // this is never printing, 
                                        }
                                    
                                }
                           ]
Please help us to resolve this issue.

User avatar
mats
Core Developer
Core Developer
Posts: 16407
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Adding a new field to Print Dialog

Post by mats »

Please provide a simple runnable test case that we can inspect, use one of our samples as a base.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
kevinvdheuvel
Posts: 96
Joined: Mon Mar 09, 2015 3:31 pm

Re: Adding a new field to Print Dialog

Post by kevinvdheuvel »

Thanks for the replay, Will try to provide sample code.
How can we access the value of newly added field in beforePrint Method.
We are trying to add that value in PDF Header like title in PDF.

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2996
Joined: Fri Apr 01, 2016 11:08 am

Re: Adding a new field to Print Dialog

Post by pmiklashevich »

We are trying to use that value in headerTpl,
We are trying to override beforeExport method but it is not calling.
How can we access the value of newly added field in beforePrint Method.
We are trying to add that value in PDF Header like title in PDF.
Please try it in examples/print/app/view/Scheduler.js

Code: Select all

Ext.define('MyExportForm', {
    extend : 'Sch.widget.ExportDialogForm',

    alias : 'widget.myexportform',

    createFields : function () {
        var me    = this,
            items = me.callParent(arguments);

        // append one more extra field
        me.myfield = Ext.create('Ext.form.field.Text', {
            fieldLabel : 'Export title',
            // need to give a field name, so when form gets submitted you can find your data
            name       : 'exportTitle',
            value      : 'My title'
        });

        return [me.myfield].concat(items);
    }
});

Code: Select all

plugins : [
        // Plugin that enables printing
        {
            ptype              : 'scheduler_printable',
            pluginId           : 'printable',
            exportDialogConfig : {
                defaultFormXType     : 'myexportform',
                showDPIField         : true,
                showColumnPicker     : true,
                dateRangeRestriction : false,
                stateful             : true,
                modal                : true
            },
            headerTpl          : '<H1>Hello</H1>',
            beforePrint        : function (scheduler, ticks) {
                console.log('beforePrint');
            },
            listeners          : {
                beforeexport : function (scheduler, exporter, config) {
                    console.log('beforeexport handler');
                    console.log(this.$className); // Sch.plugin.Printable
                    console.log(exporter.$className); // Sch.plugin.exporter.MultiPage

                    exporter.setHeaderTpl('<h2>' + config.exportTitle + '</h2>');
                }
            }
        }
    ],
Pavel Miklashevich - Core Developer

Post Reply