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