Ext-JS 4.0 : ViewPort 자동 스크롤 및 필드 값을 얻을 수 없습니다.

Question

빠른 설문 조사를 만들기 위해 EXT-JS 4.0을 사용하는 간단한 응용 프로그램을 작성하고 있습니다. 질문과 응답 옵션은 포함 된 JSON 객체를 통해 동적으로 표시됩니다. 각 질문에는 DisplayField 인스턴스 (xtype: 'displayfield')를 사용하여 표시된 텍스트가 있으며 응답 옵션과 함께 Ext.form.Panel 인스턴스에 있습니다. JSON 객체에 따라 응답은 자유 텍스트 (TextAreaField 사용), 선택 사항 1-many (라디오 버튼 사용) 또는 다수 (many-of-many) (확인란 사용) 일 수 있습니다.

JSON 객체를 디코딩 한 후 일반 for 루프가있는 질문을 반복하여 필요한 위젯 (패널, 질문 텍스트, 텍스트 영역, 확인란 및 라디오 버튼을 포함하고 테스트를위한 제출 버튼)을 동적으로 만듭니다. . 루프가 끝나면이 패널을 컨테이너에 layout: 'vbox'으로 추가하고 마지막으로 컨테이너를 뷰포트에 layout: 'fit'으로 추가합니다. 이제 문제는

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

:

이

는 질문을 표시하는 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: [] 
    } 
]} 

을 그리고 내 코드가

1. 페이지에 표시 할 패널이 너무 많으면 autoscrol l의 뷰포트가 모든 후속 패널을 포함하지는 않습니다. 즉, 나는 그들 모두를 볼 수 없다!

2. 위의 코드를 다음 패턴에 따라 설정된 위젯 (예 : id: 'commentsTa'+toString(i))으로 실행하면 각 유형의 마지막 위젯 만 표시됩니다. 이것은 표현식 toString(i)이 [object DOMWindow]으로 해석되기 때문에 모두 동일한 값을 갖는 것으로 보여지기 때문입니다. toString()을 사용하지 않으면 id이 전혀 인식되지 않으므로 Ext.getCmp() 메서드를 사용할 수 없습니다.

이 문제에 대한 귀하의 도움에 감사드립니다.

Answer 1

첫 번째 문제의 경우 vBox 레이아웃을 가진 컨테이너의 경우 수직 스크롤 막대가 만들어지지 않습니다. 이러한 레이아웃의 목적은 포함 된 모든 요소를 ​​포함 된 상자에 보관하는 것입니다. 이 레이아웃을 제거하고 기본 레이아웃을 사용하면이 문제를 해결할 수 있습니다. 1은 다음 문자열을 INT로 변환하려면 :

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

2 다음 int로 문자열로 변환하려면 다음 두 번째 문제에 관해서는

는

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