Results 1 to 2 of 2

Thread: Show panel in viewport after press button

  1. #1

    Default Show panel in viewport after press button

    Hello guys, after reading several posts I ask you a favor. I put a panel in a region of a viewport after I press a button in the toolbar region of the north. How can I do? thanks

    this is my code :

    <html>
    <head>
    <title >PRGIS WebTree Attributi</title>
    <link rel="stylesheet" type="text/css" href="ext-3/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-3/ext-all.js"></script>
    </head>
    <script type="text/javascript">
    Ext.QuickTips.init();
    Ext.apply(Ext.form.VTypes, {
    password: function(val, field) {
    if (field.initialPassField) {
    var pwd = Ext.getCmp(field.initialPassField);
    return (val == pwd.getValue());
    }
    return true;
    },
    passwordText: 'What are you doing?<br/>The passwords entered do not match!'
    });
    var signupForm = { xtype: 'form',
    id: 'register-form',
    labelWidth: 125,
    bodyStyle: 'padding:15px;background:transparent',
    border: false,
    url: 'save-form.php',
    items: [
    { xtype: 'box',
    autoEl: { tag: 'div',
    html: '<div class="app-msg"><img src="img/businessmanadd.png" class="app-img" />Register for The Magic Forum</div>'
    }
    },
    { xtype: 'textfield', id: 'email', fieldLabel: 'Email',
    allowBlank: false, minLength: 3,
    maxLength: 64,anchor:'90%', vtype:'email'
    },
    { xtype: 'textfield', id: 'pwd', fieldLabel: 'Password',
    inputType: 'password',allowBlank: false, minLength: 6,
    maxLength: 32,anchor:'90%',
    minLengthText: 'Password must be at least 6 characterslong.'
    },
    { xtype: 'textfield', id: 'pwd-confirm',
    fieldLabel: 'Confirm Password', inputType: 'password',
    allowBlank: false, minLength: 6,
    maxLength: 32,anchor:'90%',
    minLengthText: 'Password must be at least 6 characterslong.',
    vtype: 'password', initialPassField: 'pwd'
    }
    ],
    buttons: [{
    text: 'Register',
    handler: function() {
    Ext.getCmp('register-form').getForm().submit();
    }
    },
    {
    text: 'Cancel',
    handler: function() {
    win.hide();
    }
    }]
    }


    Ext.onReady(function() {
    win = new Ext.Window({
    layout: 'form',
    width: 340,
    autoHeight: true,
    closeAction: 'hide',
    items: [signupForm]
    })

    toolbar = new Ext.Toolbar({
    //renderTo:'form-ct',
    items:[{
    xtype:'tbbutton',
    text:'Bottone Ricerca',
    handler: function(){
    win.show();
    ///insert here de code for call the panel and insert it into center region

    }
    }]
    })

    var viewport = new Ext.Viewport({
    layout: 'border',

    renderTo: Ext.getBody(),
    items: [{
    region: 'north',
    split:false,
    items:[toolbar],
    xtype: 'panel',
    height: 29,
    //html: 'North'
    },{
    region: 'west',
    split:false,
    xtype: 'panel',
    split: true,
    width: 0,
    html: 'West'
    },{
    region: 'center',
    xtype: 'panel',
    html: '<div> </div>'
    },{
    region: 'east',
    xtype: 'panel',
    split: true,
    width: 0,
    html: '0'
    },{
    region: 'south',
    xtype: 'panel',
    html: 'South'
    }]
    });





    })

    </script>


    <body>
    <div id="form-ct">

    </div>
    </body>
    </html>

  2. #2

    Exclamation with format code

    Hello guys, after reading several posts I ask you a favor. I put a panel in a region of a viewport after I press a button in the toolbar region of the north. How can I do? thanks
    Code:
    Ext.QuickTips.init();
    Ext.apply(Ext.form.VTypes, {
        password: function (val, field) {
            if (field.initialPassField) {
                var pwd = Ext.getCmp(field.initialPassField);
                return (val == pwd.getValue());
            }
            return true;
        },
        passwordText: 'What are you doing?<br/>The passwords entered do not match!'
    });
    var signupForm = {
        xtype: 'form',
        id: 'register-form',
        labelWidth: 125,
        bodyStyle: 'padding:15px;background:transparent',
        border: false,
        url: 'save-form.php',
        items: [{
            xtype: 'box',
            autoEl: {
                tag: 'div',
                html: '<div class="app-msg"><img src="img/businessmanadd.png" class="app-img" />Register for The Magic Forum</div>'
            }
        },
        {
            xtype: 'textfield',
            id: 'email',
            fieldLabel: 'Email',
            allowBlank: false,
            minLength: 3,
            maxLength: 64,
            anchor: '90%',
            vtype: 'email'
        },
        {
            xtype: 'textfield',
            id: 'pwd',
            fieldLabel: 'Password',
            inputType: 'password',
            allowBlank: false,
            minLength: 6,
            maxLength: 32,
            anchor: '90%',
            minLengthText: 'Password must be at least 6 characterslong.'
        },
        {
            xtype: 'textfield',
            id: 'pwd-confirm',
            fieldLabel: 'Confirm Password',
            inputType: 'password',
            allowBlank: false,
            minLength: 6,
            maxLength: 32,
            anchor: '90%',
            minLengthText: 'Password must be at least 6 characterslong.',
            vtype: 'password',
            initialPassField: 'pwd'
        }],
        buttons: [{
            text: 'Register',
            handler: function () {
                Ext.getCmp('register-form').getForm().submit();
            }
        },
        {
            text: 'Cancel',
            handler: function () {
                win.hide();
            }
        }]
    }
    
    Ext.onReady(function () {
        win = new Ext.Window({
            layout: 'form',
            width: 340,
            autoHeight: true,
            closeAction: 'hide',
            items: [signupForm]
        })
    
        toolbar = new Ext.Toolbar({
            //renderTo:'form-ct',
            items: [{
                xtype: 'tbbutton',
                text: 'Bottone Ricerca',
                handler: function () {
                    win.show();
                    ///insert here de code for call the panel and insert it into center region
                }
            }]
        })
    
        var viewport = new Ext.Viewport({
            layout: 'border',
    
            renderTo: Ext.getBody(),
            items: [{
                region: 'north',
                split: false,
                items: [toolbar],
                xtype: 'panel',
                height: 29,
                //html: 'North'
            },
            {
                region: 'west',
                split: false,
                xtype: 'panel',
                split: true,
                width: 0,
                html: 'West'
            },
            {
                region: 'center',
                xtype: 'panel',
                html: '<div> </div>'
            },
            {
                region: 'east',
                xtype: 'panel',
                split: true,
                width: 0,
                html: '0'
            },
            {
                region: 'south',
                xtype: 'panel',
                html: 'South'
            }]
        });
    
    })

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •