2013-08-13 2 views
0

나는 아래와 같이 보이는 JS를 사용하여 여러 탭이있는 양식을 만들고 각 탭 아래에 레이블, 필드, 방사선 그룹 등을 추가하고 싶습니다. 아직 시작 단계이지만 문제가 발생했습니다. 탭은 모든 경우에 잘 표시되지만 '연락처 번호' 라벨 바로 아래에 항목이 보이지 않지만 은 주소 탭을 볼 수 있습니다. 아무도 내가 잘못 알고있는 곳을 보여줄 수 있습니까 !! '연락처 번호'를 원합니다. 레이블은 모바일, 집, 호출기 및 전자 메일 텍스트 필드의 제목으로 작동합니다. 당신이 가져올 당신이 레이블 Contact No과 같은 수준으로 그의 자녀 수없는 텍스트 필드 Mobile 필요에 대한javascript 폼을 표시 할 수 없습니다.

this.buildForm = function(){ 
     this.myForm = new Ext.form.FormPanel({ 
      layout:'column', 
      border: false, 
      labelWidth: labelWidth, 
      anchor: "100%", 
      items:[{ 
       columnWidth: 1, 
       xtype:'tabpanel', 
       activeTab: 0, 
       height:420, 
       enableTabScroll: true, 
       deferredRender: false, 
       bodyStyle:'padding:10px', 
       items: [ 
        { 
         title: 'Contact No. & Address', 
         i18nTitle: 'Person.contactNoAndAddress.title', 
         border: false, 
         items: [ 
          { 
           xtype:'label', 
           text: 'Contact No.', 
           i18nTitle: 'Person.contactNo.title', 
           id: 'contactNo', 
           layout: 'column', 
           items: [ 
            { 

             columnWidth: 0.33, 
             layout: 'form', 
             items:[ 
              { 
               xtype:'textfield', 
               fieldLabel: 'Mobile', 
               tabIndex:101, 
               colwidth: 40 
              } 
             ] 
            },{ 
             columnWidth: 0.33, 
             layout: 'form', 
             items:[ 
              { 
               xtype:'textfield', 
               fieldLabel: 'Home', 
               tabIndex:102, 
               colwidth: 40 
              } 
             ] 
            },{ 
             columnWidth: 0.33, 
             layout: 'form', 
             items:[ 
              { 
               xtype:'textfield', 
               fieldLabel: 'Office', 
               tabIndex:103, 
               colwidth: 40 
              } 
             ] 
            },{ 
             columnWidth: 0.33, 
             layout: 'form', 
             items:[ 
              { 
               xtype:'textfield', 
               fieldLabel: 'Pager', 
               tabIndex:104, 
               colwidth: 40 
              } 
             ] 
            },{ 
             columnWidth: 0.33, 
             layout: 'form', 
             items:[ 
              { 
               xtype:'textfield', 
               fieldLabel: 'Fax', 
               tabIndex:105, 
               colwidth: 40 
              } 
             ] 
            },{ 
             columnWidth: 1, 
             layout: 'form', 
             items:[ 
              { 
               xtype:'textfield', 
               fieldLabel: 'Email', 
               width:200, 
               tabIndex:106, 
               width: 200 
              } 
             ] 
            } 
           ] 
          },{ 
           xtype:'tabpanel', 
           id: 'addressTab', 
           permission:'person:responsibleAdmin', 
           activeTab: 0, 
           height:220, 
           enableTabScroll: false, 
           deferredRender: false, 
           bodyStyle:'padding:10px', 
           layoutOnTabChange: true, 
           items: [ 
            { 
             title: 'Home Address', 
             i18nTitle: 'Person.homeAddress.title', 
             border: false, 
             // hideMode: "offsets", 
             items:[{}] 
            },{ 
             title: 'Work Address', 
             i18nTitle: 'Patient.workAddress.title', 
             border: false, 
             // hideMode: "offsets", 
             items:[{}] 
            } 
           ] 
          } 
         ] 
        },{ 
         title:'Next of Kin', 
         i18nTitle: 'Person.nextOfKin.title', 
         layout: 'column', 
         labelWidth: 100, 
         items:[{ 

         }] 
        } 
       ] 
      }] 
     }); 
     return this.myForm; 
    } 
+0

당신이 이것에 대한 jsfiddle을 게시 할 수 있습니다 : http://jsfiddle.net/zWdXf/6/ 여기

는 당신이 필요로하는 코드 부분의 세부 사항입니다 :

내가 jsfiddle 수정 방법에 대해 살펴 있나요? –

+0

@MaurizioIndenmark 나는 전에 바이올린을 사용하지 않았지만 지금은 운이 없다. (바이올린 출력 없음) –

+0

당신이 여기에 게시 할 수있는 사람들이 당신의 코드를 테스트 할 수 있도록 더 나은 당신을 도울 수 –

답변

0

내가 제대로 이해한다면.

  items: [{ 
       xtype: 'label', 
       text: 'Contact No.2', 
       i18nTitle: 'Person.contactNo.title', 
       id: 'contactNo', 
       layout: 'column', 
       items: [{}] 
      },{ 
       xtype: 'textfield', 
       fieldLabel: 'Mobile', 
       i18nTitle: 'Person.contactNo.title', 
       id: 'contactNo2', 
       layout: 'column', 
       items: [{}] 
      }, { 
       xtype: 'tabpanel', 
       id: 'addressTab', 
       permission: 'person:responsibleAdmin', 
       activeTab: 0, [...] 
+0

당신의 예제가 작동 할 수 있지만 나는 휴대폰, 홈, 페이지, 팩스 중 ... 여러 텍스트 필드의 부모가 될 lable 연락처 번호를 원한다. –

+0

텍스트 필드를 레이블의 자식으로 사용할 수 없습니다. 레이블은 컨테이너 요소가 아닙니다. 연락처 번호가 다른 유형의 개체가 될 수 없습니까? –

+0

아, 그래, 네 말이 맞아. 그래서 레이블을 제목으로 바꿨고 내가 원하는 것을 얻었 어. 하지만 왜 [이] (http://jsfiddle.net/lee_rooy/zWdXf/8/)가 작동하지 않는지 이해할 수 없습니다. 필드 레이블 '홈'을 항목에 넣은 후입니다. 태그 –

관련 문제