如何从Ext窗口文本框中获取用户输入值？ [英] How to get user input value from Ext window textfield?

问题描述

我有一个带有Extjs设计的按钮的网页。当用户点击这些按钮中的1时，会出现一个带有文本框和下一个按钮的窗口。单击下一个按钮将加载另一个窗口与fieldsets，隐藏第一个。根据第一窗口中的用户输入来调整第二种形式的字段集合的数量。我试图为此使用for循环。
我使用的代码如下：

  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
}] 
}]，
按钮：[{
 text：'Next'，
处理程序：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 = []; （i = 0; i< = j; i ++）
 
 {
 fldComs [i] = new Ext.form.FieldSet（{
 // snip 
项目：[{
 // snip 
}] 
}）; 
} 
 
 win2items = new Ext.form.FormPanel（{
 // snip 
 items：[fldComs] 
}）; 
 
 Ext.onReady（function（）{
 new Ext.Toolbar（{
 renderTo：document.body，
 items：[{
 xtype： 'tbbutton'，
文本：'从这里开始'
 cls：'menu-icon'，
处理函数：function（）{
 if（！win1）{
 win1 = new Ext.Window（{
 // snip 
 items：[win1items] 
}）; 
} 
 win1.show（this）; 
} 
}] 
}）; 
}）; 
  

我得到的错误是

未捕获TypeError：无法调用未定义的方法getForm。

但是，如果我使用固定值在for循环中，说5我得到了所需的输出。我正在使用Ext 3.2.1

解决方案

你的代码充满了它的原因不行 - 我不是想是平均值，但是从故障排除的角度来看，很难确定真正问题在哪里有如此大的猜测 - 我看到的东西：

1）您对Ext.getCmp（'win1'）的调用失败，因为win1的id没有任何内容 - 尝试：

  var win1items = new Ext.form.FormPanel（{
 id：'win1'
 ... 
  

2）如果您的意思是win1的id位于您在处理程序中创建的窗口上，则需要指定那里，但是，如MMT所指出的那样，Ext.Window没有getForm（）方法（所以我怀疑这是你想要做的）。

3）如果你想要该文本字段的值，只需做简单的方法并给该字段一个ID：

  [{
 label：'Number'，
 xtype：'textfield'，
 id：'MyNumberField'
}] 
 ... 
 var j = Ext.getCmp（'MyNumberField'）。getValue（）; 
  

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

解决方案

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();

这篇关于如何从Ext窗口文本框中获取用户输入值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！