How to set modal panel size to 80% of the screen size?

[szimek]

Hi,

I'm trying to modify Signature Pad plugin that requires to specify modal panel size in pixels to use percents instead, so that it can be displayed better on various screen sizes.

The code for modal looks like this:

Ext.define('ux.signature.Canvas', {
    extend: 'Ext.Component',
    xtype: 'signaturefieldcanvas',
    template: [{
        reference: 'canvas',
        tag: 'canvas',
        classList: [Ext.baseCSSPrefix + 'canvas']
   }]
});

this.actionOverlayCanvas = Ext.create('ux.signature.Canvas', {});

this.actionOverlay = Ext.create('Ext.Panel', {
    modal: true,
    hidden:true,
    hideOnMaskTap:true,
    centered:true,
    items:[
        this.actionOverlayCanvas,
        {
            xtype:'toolbar',
            docked:'bottom',
            items:[
               {xtype: 'spacer'},
               this.resetButton,
               this.saveButton,
               {xtype: 'spacer'}
           ]
        }
    ]
});

Right now the plugin sets width and height in pixels of ux.signature.Canvas element and on canvas HTML element. How can I set size of the modal window so that the whole modal takes 80% of screen width and height and all available space inside modal, except for toolbar at the bottom, is taken by ux.signature.Canvas element?

[george.m]

I've just had the same task. If you go to the ux/signaturefield.js file, near the top you will see:

this.actionOverlay = Ext.create('Ext.Panel', {
			modal: true,
			hidden:true,
			hideOnMaskTap:true,
			height: '60%',
			width: '60%',
			showAnimation: {
				type:'popIn',
				duration:300,
				easing:'ease-out'
			},
			hideAnimation: {
				type:'popOut',
				duration:300,
				easing:'ease-out'
			},
			centered:true,
			items:[this.actionOverlayCanvas,
			{
				xtype:'toolbar',
				docked:'bottom',
				items:[{xtype: 'spacer'},this.resetButton,this.saveButton,{xtype: 'spacer'}]
			}]
		});

Add the lines of code that are in bold, of course you'd have to set the sigWidth and sigHeight accordingly for it to fit in the panel.

[szimek]

Thanks, I'll try that. Is it possible in this case to just use 100% for sigWidth and sigHeight to fill the whole available space or do you have to calculate it somehow?

BTW. I made a small improvement to signature field, so that form.getValues() returns value of signature field as well:

Ext.define('ux.signaturefield.Panel', {    
    extend: 'Ext.Panel',
    xtype: 'signaturefieldpanel',
    config: {
        name: null
    }
});

Ext.define('ux.signaturefield', {
    ...
    config: {
        component: {xtype: 'signaturefieldpanel'}  
    }
    ...
});

...
config: {
    items: [{
        xtype: "signaturefield",
        name: "signature_data_uri"
    }]
}

[george.m]

I've written this line of code that will get the actual value of '100%' as the plugin will not accept percentages as height:

sigHeight: Ext.get(Ext.DomQuery.select('body')[0]).getHeight() * 0.5

Change the multiplier value at the end to whatever size you want.