Question

我正在使用EXT-JS 4.0编写一个简单的应用程序来创建快速调查。问题及其回答选项包含在内，并通过JSON对象传输，然后动态显示。每个问题都有一个使用DisplayField实例（xtype: 'displayfield'）显示的文本，并与Ext.form.Panel实例中的应答选项一起驻留。根据JSON对象，可以通过自由文本（使用TextAreaField），多次选择（使用单选按钮）或多次使用（使用复选框）来回答。

解码JSON对象后，我使用常规for循环遍历问题，以动态创建必要的小部件（保持面板，问题文本，文本区域，复选框和单选按钮，以及提交按钮）用于检测）。循环之后，我将这些面板添加到layout: 'vbox'的Container中，最后将容器添加到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
    });
});

现在的问题是：

如果页面上显示的面板太多，则视口的自动滚动不会覆盖所有后续面板。也就是说，我看不到所有这些！
如果我使用根据以下模式设置的小部件的id执行上面的代码，例如id: 'commentsTa'+toString(i)，则只显示每种类型的最后一个小部件。这是因为它们似乎都采用相同的值，因为表达式toString(i)被解释为[object DOMWindow]。如果我不使用toString()，则根本无法识别id，并且无法使用Ext.getCmp()方法。

我真的很感谢你对这些问题的帮助！

Answer 1

对于第一个问题，不为具有vBox布局的容器创建垂直滚动条。这种布局的目的是将所有包含的元素保留在包含框内。删除此布局并使用默认布局可以解决此问题。

至于第二个问题： 1-要从int转换为String，然后：

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

2-要从String转换为int，然后：

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

Ext-JS 4.0：ViewPort自动滚动并且无法获取字段的值

1 个答案: