Results 1 to 3 of 3

Thread: Newbie: Show my panel in the viewport ?

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    24

    Default Newbie: Show my panel in the viewport ?

    Hi all,

    Actually I try to do a login/pass connection (with php, mysql, ext js4) and show a panel named UserBorder.
    I managed to do the part "check log/pass" by using a window.

    Ok now my problem !
    I done controller/view/Userborder.js files and I would like to show in the viewport
    the Userborder panel but I can't find how to do that !?

    what I must to write in the place of :
    HERE WHAT MUST I DO TO SEE MY DEFINED USERBORDER panel in viewport ????
    in controller/UIdentification.js

    Another question: concerning log/pass window, do you think it's the right way to do this kind of process ?
    I mean, as specialist you will do like that ?

    Below my codes !

    My viewport that launch the window login/pass
    Code:
    Ext.define('MPortal.view.Viewport', {
        extend: 'Ext.container.Viewport',
    
        initComponent: function() {
            Ext.apply(this, {
                layout:'fit',
                items: [{
                   xtype: 'uidentification',
                   title: 'User Identification'
                }]
            });
                   
            this.callParent(arguments);
        }
    });
    UIdentification.js controller, i done:
    Code:
    Ext.define('MPortal.controller.UIdentification',{
        extend: 'Ext.app.Controller',
        views: [
            'UIdentification'
        ],
        refs: [
            {ref: 'UIdentification', selector: 'viewport uidentification' },
            {ref: 'UserLogin',       selector: 'viewport > uidentification #ulogin' },
            {ref: 'UserPwd',         selector: 'viewport > uidentification #upwd' }
        ],
    
        init: function() {
             this.control({
                 'viewport > uidentification #btnlogin': {
                     click: this.OnClickLogin
                 }
             });
        },
        OnClickLogin:function(button){
            var myLogin = this.getUserLogin();
            var myPwd   = this.getUserPwd();
    
            Ext.Ajax.request({
                            url: 'data/xxxxx.php',
                            params: {
                                login: myLogin.value,
                                pwd  : myPwd.value
                            },
                            success: function(response){
                                    var res = Ext.JSON.decode(response.responseText);
    
                                    // Test si on a bien Login/pass trouv
                                    if (res.success === true) 
                                    {
                                        switch (res.data[0]["levelID"]) {
                                            case "0":
                                                alert('Admin Account');
                                                Ext.WindowMgr.getActive().close();
                                                break;
                                            case "99":
                                                alert('Reader Account');
                                                Ext.WindowMgr.getActive().close();
                                                break;
                                            default:
                                                alert('Supervisor/Normal/Low Account');
                                                // Test si la licence est active ou pas (Mysql 0 false, 1 true
                                                if (res.data[0]["active"] === '1')
                                                {
                                                    // Fermer la fentre login si bonne rponse, sinon message
                                                    Ext.WindowMgr.getActive().close();
                                                    
                  HERE WHAT MUST I DO TO SEE MY DEFINED USERBORDER panel in viewport ????                                  
                                                    // 2. garder les donnes durant la session
    
                                                    // 3. Afficher la bonne View
                                                }
                                                else
                                                    alert('Sorry your licence has been disabled');
    
                                        }
                                    }
                                    else
                                    {
                                        alert('Your Login/Password seems to be wrong, please retry');
                                    }    
                            },
                                failure: function(response)
                                {
                                    var text = response.responseText;
                                    alert('User Verification Failure: ' + text);
                                } 
                        });
        }
    });
    My view/Userborder.js

    Code:
    Ext.define('MPortal.view.UserBorder', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.userborder',
        layout: 'border',
        autoShow:   true,
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me,{
    
                items: [{
                   xtype: 'panel',
                   region: 'north',
                   height: 50,
                   html: '<table width="100%">'+
                         '<tr>'+
                         '<td align="right"><a href="logout.php">Logout</A></td>'+
                         '</tr>'+
                         '</table>'
                  },
                  {
                   xtype: 'panel',
                   region: 'west',
                   name: 'panelsolrquery',
                   width: 200,
                   items: [{
                       xtype: 'container',
                       layout: {
                                type: 'table',
                                columns: 2,
                                tableAttrs: {
                                    style: {
                                                width: '100%',
                                                borderSpacing: '1px 1px'
                                           }
                                },
                                tdAttrs: { style: 'padding: 2px 2px;' }
                               },
                        
                               items: [{
                                            xtype: 'textfield',
                                            itemId: 'solrquery',
                                            fieldLabel: '',
                                            value: ''                                    
                                        }, 
                                        {
                                            xtype: 'button',
                                            text: 'Go !',
                                            itemId: 'btnGo'
                                        }
                                      ]
                        }]
                 },
                  {
                    xtype: 'panel',
                    region:'center'
                  }]
            });
            me.callParent(arguments);
        }
    });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    Have a look at the following changes: (wrong xtype)


  3. #3
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    24

    Default

    Since I posted my quesiton, I found the solution but thanks a lot for your answer !

Tags for this Thread

Posting Permissions

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