Question

I have a popup window with a form text field in it. How can I access the text field? Here is my attempt:

function foo(){
    bar = Ext.Viewport.add({
    xtype: 'panel',
    scrollable: true,
    centered: true,
    width: 400,
    height: 300,
    items:[{
            xtype: 'textfield',
            name: 'name',
            label: 'Name'
        }, {
            docked: 'bottom',
            xtype: 'titlebar',
            items:[{
                    xtype: 'button',
                    ui: 'normal',
                    text: 'Send',
                    go: 'testsecond',   
                    handler:function(){
                        alert(bar.getValues().name);
                    }  
            }]
        }]
    });
}

Answer 1

Nope. You need not do this way. Setting xtype:'panel' will prevent you from accessing form values using form.getValues() method.

Instead, do the following way.

Give your panel xtype as formpanel.

See this below :

bar = Ext.Viewport.add({
    xtype: 'formpanel',
    scrollable: true,
    centered: true,
    width: 400,
    height: 300,
    items:[{
            xtype: 'textfield',
            name: 'name',
            label: 'Name'
        }, {
            docked: 'bottom',
            xtype: 'titlebar',
            items:[{
                    xtype: 'button',
                    ui: 'normal',
                    text: 'Send',
                    go: 'testsecond',   
                    handler:function(){
                        Ext.Msg.alert("Name: "+bar.getValues().name);
                    }  
            }]
        }]
    });

Your output should be :