Javascript Ext JS 4.0：视口自动滚动和can'；无法获取字段的值

我正在使用EXT-JS4.0编写一个简单的应用程序，用于创建快速调查。问题及其答案选项包含在JSON对象中，并通过JSON对象传输，然后动态显示。每个问题都有一个使用DisplayField实例（

xtype:'DisplayField'

）显示的文本，并与回答选项一起驻留在

Ext.form.Panel

实例中。根据JSON对象的不同，回答可能是通过自由文本（使用

TextAreaField

）、多选项（使用单选按钮）或多选项（使用复选框）

解码JSON对象后，我使用常规的

for

循环遍历问题，以动态创建必要的小部件（控制面板、问题文本、文本区域、复选框和单选按钮，以及用于测试的提交按钮）。循环之后，我将这些面板添加到具有

layout:'vbox'

的容器中，最后将容器添加到具有

layout:'fit'

的视口中

这是显示问题的JSON对象的格式：

{questions: [{
    question:'Do you know it?',
    comment: 'no',
    multiple: [],
    single: ['yes','no']
  }, {
    question:'In which seasons do you use it (add your comment with your selection)?',
    comment: 'yes',
    multiple: ['Winter','Spring','Summer','Fall'],
    single: []
  }
]}

这是我的代码：

Ext.onReady(function () {
    // Decode the received JSON object..
    var jsonObj = Ext.JSON.decode(jsonObjStr);

    // Array to hold the to-be-created panels for rendering in global container..
    var panels = new Array();

    for (i = 1; i <= jsonObj.questions.length; i++) {
        // Create a Panel to contain the question..
        var formPanel = Ext.create('Ext.form.Panel', {
            id: 'panel' + toString(i),
            frame: false,
            border: true,
            title: 'Question ' + i,
            width: '75%',
            margin: '10 0 0 0',
            fieldDefaults: {
                labelAlign: 'left',
                labelWidth: 90,
                buttonAlign: 'center',
                anchor: '100%'
            }
        });

        // Add the question text first..
        var questionText = {
            xtype: 'displayfield',
            name: 'questionTextTf' + i,
            value: '<b>' + jsonObj.questions[i - 1].question + '</b>'
        };
        formPanel.add(questionText);

        // Add the check boxes for many-of-many answers..
        var checkBoxes = new Array();
        for (imultiple = 0; imultiple < jsonObj.questions[i - 1].multiple.length; imultiple++) {
            var itemChk = {
                name: 'cb' + i,
                id: 'cb' + toString(i) + '-' + toString(imultiple),
                boxLabel: jsonObj.questions[i - 1].multiple[imultiple]
            };
            checkBoxes.push(itemChk);
        }
        if (jsonObj.questions[i - 1].multiple.length > 0) {
            var multipleFieldContainer = {
                xtype: 'checkboxgroup',
                name: 'multipleContainer' + i,
                id: 'multipleContainer' + toString(i),
                fieldLabel: 'Select all that match',
                items: checkBoxes
            };
            formPanel.add(multipleFieldContainer);
        }

        // Add the radio buttons for one-of-many answers..
        var radioBoxes = new Array();
        for (isingle = 0; isingle < jsonObj.questions[i - 1].single.length; isingle++) {
            var itemRdb = {
                name: 'rb' + i,
                id: 'rb' + toString(i) + '-' + toString(isingle),
                boxLabel: jsonObj.questions[i - 1].single[isingle]
            };
            radioBoxes.push(itemRdb);
        }
        if (jsonObj.questions[i - 1].single.length > 0) {
            var singleFieldContainer = {
                xtype: 'radiogroup',
                name: 'singleContainer' + i,
                id: 'singleContainer' + toString(i),
                fieldLabel: 'Select one',
                items: radioBoxes
            };
            formPanel.add(singleFieldContainer);
        }

        // Add the text area field for free text comments..
        if (jsonObj.questions[i - 1].comment == 'yes') {
            var commentArea = {
                xtype: 'textareafield',
                name: 'commentTa' + i,
                id: 'commentsTa' + toString(i),
                fieldLabel: 'Comment'
            };
            formPanel.add(commentArea);
        }

        // Add the submit button for each question (for testing)..
        var sendButton = {
            xtype: 'button',
            name: 'submitBtn' + i,
            id: 'submitBtn' + toString(i),
            text: 'Submit',
            handler: function () {
                Ext.Msg.alert('Info', Ext.getCmp('commentsTa' + toString(i)).getId() + ': ' + Ext.getCmp('commentsTa' + toString(i)).getValue());
            }
        };
        formPanel.add(sendButton);

        // Add panel to array of panels for later rendering..
        panels.push(formPanel);
    }

    // Create the global container to contain all the created panels..
    var mainContainer = Ext.create('Ext.container.Container', {
        html: 'First Set of Preliminary Questions: <br>',
        //renderTo: 'form-ct1',
        style: {
            borderColor: '#000000',
            borderStyle: 'solid',
            borderWidth: '2px'
        },
        layout: {
            type: 'vbox',
            align: 'center'
        },
        items: panels
    });

    // Create a viewport to render the global container to fill the body region of the page..
    var viewport = Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: mainContainer,
        autoScroll: true
    });
});

Ext.onReady（函数（）{
//解码接收到的JSON对象。。
var jsonObj=Ext.JSON.decode（jsonobjsr）；
//数组，用于保存要在全局容器中渲染的待创建面板。。
var panels=新数组（）；
对于（i=1；i 0）{
var multipleFieldContainer={
xtype:“checkboxgroup”，
名称：“multipleContainer”+i，
id:'multipleContainer'+toString（i），
fieldLabel:“选择所有匹配项”，
项目：复选框
};
添加（multipleFieldContainer）；
}
//添加多个答案之一的单选按钮。。
var radiobox=新数组（）；
对于（isingle=0；isingle0）{
var singleFieldContainer={
X类型：“放射组”，
名称：'singleContainer'+i，
id:'单容器'+toString（i），
fieldLabel:“选择一个”，
物品:无线电信箱
};
添加（singleFieldContainer）；
}
//添加自由文本注释的文本区域字段。。
if（jsonObj.questions[i-1].comment=='yes'）{
变量面积={
xtype:'textareafield'，
名称：'commentTa'+i，
id:'commentsTa'+toString（i），
fieldLabel:“评论”
};
formPanel.add（注释区域）；
}
//为每个问题添加提交按钮（用于测试）。。
变量sendButton={
xtype:'按钮'，
名称：'submitBtn'+i，
id:‘submitBtn’+toString（i），
文本：“提交”，
处理程序：函数（）{
Ext.Msg.alert（'Info'，Ext.getCmp（'commentsTa'+toString（i））.getId（）+'：'+Ext.getCmp（'commentsTa'+toString（i））.getValue（）；
}
};
formPanel.add（发送按钮）；
//将面板添加到面板阵列以供以后渲染。。
面板。推（模板面板）；
}
//创建全局容器以包含所有已创建的面板。。
var mainContainer=Ext.create（'Ext.container.container'{
html:“第一组初步问题：
”，
//renderTo:'form-ct1'，
风格：{
边框颜色：'#000000'，
边框样式：“实心”，
边框宽度：“2px”
},
布局：{
键入：“vbox”，
对齐：“居中”
},
项目：面板
});
//创建视口以渲染全局容器以填充页面的主体区域。。
var viewport=Ext.create（'Ext.container.viewport'{
布局：“适合”，
项目:主要货柜,，
自动滚动：对
});
});

现在的问题是：

如果页面上显示的面板太多，则视口的自动滚动不会覆盖所有后续面板。就是说，我看不到所有的

如果我使用根据以下模式设置的小部件id执行上述代码，例如

id:'commentsTa'+toString（I）

，则只显示每种类型的最后一个小部件。这是因为它们似乎都采用相同的值，因为表达式

toString（i）

被解释为

[object DOMWindow]

。如果我不使用

toString（）

，则根本无法识别

id

，无法使用

Ext.getCmp（）

方法

---

我非常感谢你在这些问题上的帮助

对于第一个问题，没有为具有

vBox

布局的容器创建垂直滚动条。这种布局的目的是将所有包含的元素保持在包含框内。删除此布局并使用默认布局可以解决此问题

至于第二个问题： 1-要将int转换为String，则：

var myInt=5;
var myString=myInt+'';

2-要将字符串转换为int，则：

var myInt=parseInt(new String("5"));

---

我设法解决了第二个问题！！问题似乎出在toString（）函数中。我所需要做的就是声明一个变量，并使用另一种方法将数字转换为字符串（例如，var x=1+'，然后id:'commentsTa'+x），它就像id和itemId配置的符咒一样工作。