1. #1
    Sencha User
    Join Date
    Oct 2012
    Location
    Poland
    Posts
    70
    Vote Rating
    5
    Answers
    4
    szimek is on a distinguished road

      0  

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

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


    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:

    Code:
    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?

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Location
    England
    Posts
    135
    Vote Rating
    7
    Answers
    11
    george.m is on a distinguished road

      1  

    Default


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

    Code:
    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.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Location
    Poland
    Posts
    70
    Vote Rating
    5
    Answers
    4
    szimek is on a distinguished road

      0  

    Default


    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:

    Code:
    Ext.define('ux.signaturefield.Panel', {    
        extend: 'Ext.Panel',
        xtype: 'signaturefieldpanel',
        config: {
            name: null
        }
    });
    
    Ext.define('ux.signaturefield', {
        ...
        config: {
            component: {xtype: 'signaturefieldpanel'}  
        }
        ...
    });
    Code:
    ...
    config: {
        items: [{
            xtype: "signaturefield",
            name: "signature_data_uri"
        }]
    }

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Location
    England
    Posts
    135
    Vote Rating
    7
    Answers
    11
    george.m is on a distinguished road

      0  

    Default


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

    Code:
    sigHeight: Ext.get(Ext.DomQuery.select('body')[0]).getHeight() * 0.5
    Change the multiplier value at the end to whatever size you want.

Thread Participants: 1

Tags for this Thread