Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    73
    Vote Rating
    1
    Peter Tierney is on a distinguished road

      0  

    Default Login Window: More Difficult Than It Should Be

    Login Window: More Difficult Than It Should Be


    Simply put ,a login window that does exactly that with a controller doing the leg work. Maybe I'm missing something simple, but the docs are of little help.


    Login Window
    Code:
    Ext.define('SomeApp.view.LoginWindow', {
        extend: 'Ext.window.Window',
    
    
        autoShow: true,
        frame: false,
        height: 262,
        id: 'loginWindow',
        itemId: 'loginWindow',
        width: 412,
        shadowOffset: 5,
        resizable: false,
        layout: {
            type: 'absolute'
        },
        bodyBorder: false,
        closable: false,
        title: 'Login',
        modal: true,
        plain: true,
        y: 50,
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'form',
                        x: 0,
                        y: 0,
                        height: 230,
                        id: 'loginForm',
                        itemId: 'loginForm',
                        layout: {
                            align: 'center',
                            pack: 'center',
                            type: 'vbox'
                        },
                        bodyPadding: 10,
                        paramsAsHash: true,
                        items: [
                            {
                                xtype: 'textfield',
                                id: 'loginUserName',
                                itemId: 'loginUserName',
                                padding: 5,
                                width: 253,
                                fieldLabel: 'User Name',
                                labelAlign: 'right',
                                allowBlank: false,
                                minLength: 5,
                                selectOnFocus: true
                            },
                            {
                                xtype: 'textfield',
                                id: 'loginPassword',
                                itemId: 'loginPassword',
                                padding: 5,
                                width: 253,
                                inputType: 'password',
                                fieldLabel: 'Password',
                                labelAlign: 'right',
                                allowBlank: false,
                                selectOnFocus: true
                            },
                            {
                                xtype: 'button',
                                id: 'appLoginBtn',
                                itemId: 'appLoginBtn',
                                width: 80,
                                text: 'Login'
                            }
                        ]
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });

    Controller
    Code:
    Ext.define('SomeApp.controller.LoginController', {
        extend: 'Ext.app.Controller',
    
    
        refs: [
            {
                ref: 'loginwin',
                selector: '#loginWindow',
                xtype: 'window'
            },
            {
                ref: 'loginform',
                selector: '#loginForm',
                xtype: 'form'
            },
            {
                ref: 'search',
                selector: '#searchPanel'
            },
            {
                ref: 'username',
                selector: '#loginUserName',
                xtype: 'textfield'
            }
        ],
    
    
        onButtonClick: function(button, e, options) {
    
    
            var thisForm = this.getLoginform();
            var thisField = Ext.ComponentQuery.query('textfield#loginUserName');
    
    
            var refOption = this.getUsername().wasValid;
    
    
            alert("ref valid: " + refOption + "\nquery valid: " + thisField.wasValid + "\n\nref username: " + this.getUsername().value + "\nquery username: " + thisField.value);
            alert(thisForm.isValid());
    
    
        },
    
    
        init: function(application) {
            this.control({
                "button#appLoginBtn": {
                    click: this.onButtonClick
                }
            });
        }
    
    
    });

    So the questions:
    According to the docs, the reference and the ComponentQuery should be retrieving the same object, but they are different?
    If the reference for the form is accurate then why does isValid() get "is not a valid function"?


    It seems like getting the fields of a form shouldn't be so painful. For example, after a getValues(), you have to get the value by referencing it like
    values["loginPassword-inputEl"]
    What's up with the '-inputEl'?


    I realize I'm still learning ExtJs and Architect, but Sencha sure doesn't make it easy. Any helpful comments will be greatly appreciated.


    Cheers

  2. #2
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    73
    Vote Rating
    1
    Peter Tierney is on a distinguished road

      0  

    Default


    After more messing around and no answers here, I am answering my own questions in the hope it will save someone else time.


    First, you don't have to use a controller reference or Ext.ComponentQuery.query to get the specific field object. Use instead
    button.up('form').getForm().findField('loginUserName');


    Second, when using getForm().getValues(), the fields don't pay attention to the id or the itemId properties, but rather the name property. I currently have all 3 id, itemId and name set to identical values so I can reference it in whichever manner is needed. Using the name property allows getForm.getValues().loginUserName; to actually return the value of the field. If you don't have the name property, you will end up with some generated name or like what I had loginUserName-inputEl.


    Below is the new controller and in the loginWindow just added the name property to both text inputs.

    Code:
    Ext.define('SomeApp.controller.LoginController', {
        extend: 'Ext.app.Controller',
    
    
        refs: [
            {
                ref: 'loginwin',
                selector: '#loginWindow',
                xtype: 'window'
            }
        ],
    
    
        onButtonClick: function(button, e, options) {
    
    
            var loginform = button.up('form').getForm();
    
    
            if (loginform.findField('loginUserName').wasValid && loginform.findField('loginPassword').wasValid)
            {
                //call your middle tier authentication service
            }
    
    
        },
    
    
        init: function(application) {
            this.control({
                "button#appLoginBtn": {
                    click: this.onButtonClick
                }
            });
        }
    
    
    });