How to get user input value from Ext window textfield?

问题

I have a webpage with buttons designed in Extjs. When the user clicks 1 of these buttons, a window appears with a textfield and a next button. Clicking the next button will load another window with fieldsets, hiding the first one. The number of fieldsets in the second form is to be adjusted according to the user input in the first window. I am trying to use a for loop for this. The code I am using as follows:

var win1, win 2, j;

var win1items = new Ext.form.FormPanel({
    //snip
    items: [{
        xtype: 'fieldset',
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Number',
            allowBlank: false,
            name: 'Number',
            width: 110,
            cls:"txtfield"
        }]
    }],
    buttons: [{
        text: 'Next',
        handler: function(){
            if(!win2){
                winc2 = new Ext.Window({
                    //snip
                    items: [win2items]
                });
            }

            win2.show(this);
            win1.hide();
        }
    }]
});

j = Ext.getCmp('win1').getForm().findField("Number").getValue();
var fldComs = [];

for (i=0; i<=j; i++){
    fldComs[i] =  new  Ext.form.FieldSet({
        //snip
        items: [{
        //snip
        }]
    });
}

win2items = new Ext.form.FormPanel({
    //snip
    items: [fldComs]
});

Ext.onReady(function(){
    new Ext.Toolbar({
        renderTo: document.body,
        items: [{
            xtype: 'tbbutton',
            text: 'Start Here',
            cls: 'menu-icon',
            handler: function(){
                if(!win1){
                    win1 = new Ext.Window({
                        //snip
                        items: [win1items]
                    });
                }
                win1.show(this);
            }
        }]
    });
});

The error I am getting is

Uncaught TypeError: Cannot call method 'getForm' of undefined.

However if i am using a fixed value in the for loop, say 5 I am getting the desired output. I am using Ext 3.2.1

回答1:

Your code is full of reasons for it to not work - I'm not trying to be mean, but from a troubleshooting standpoint it's hard to tell where the real problem is with so much guess work - the things I'm seeing:

1) Your call to Ext.getCmp('win1') fails because there is nothing with the id of 'win1' - try:

    var win1items = new Ext.form.FormPanel({
        id: 'win1'
        ...

2) If you meant for the id of 'win1' to be on the window you create in the handler, you need to specify that there but, as pointed out by MMT, Ext.Window does not have the getForm() method (so I doubt this is what you're trying to do).

3) If you want the value of that text field, just do it the easy way and give the field an ID:

[{
    label: 'Number',
    xtype: 'textfield',
    id: 'MyNumberField'
}]
... 
var j = Ext.getCmp('MyNumberField').getValue();

回答2:

getCmp() accepts id as the parameter and not a variable. to solve the problem give id to the form panel and include that id in quotes inside getCmp().

It might work out but anyways your code is very unreadable as phat skat rightly pointed out

来源：https://stackoverflow.com/questions/10118350/how-to-get-user-input-value-from-ext-window-textfield

标签

extjs