Sencha Touch 2 : 양식 패널에 탭 추가

다음 패널을 패널의 위쪽 및 아래쪽 도구 모음 사이에 추가하려고합니다. 이것이 가능하며 두 파일을 결합하는 방법에 대한 예를 제공해 주시겠습니까?Sencha Touch 2 : 양식 패널에 탭 추가

도움 주셔서 감사합니다.

패널 :

Ext.define('Myapp.view.Product', { 
    extend: 'Ext.form.Panel', 
    id: 'productCard', 

    config: { 
     modal: true, 
     hideOnMaskTap: false, 
     centered: true, 
     height: '95%', 
     width: '98%', 
     items: [ 
      { 
       docked: 'top', 
       xtype: 'toolbar', 
       title: '', 
       id: 'productTitle' 
      }, 
      { 
       docked: 'bottom', 
       xtype: 'toolbar', 
       items: [ 
        { 
         text: 'Close', 
         ui: 'back', 
         id: 'closeProductCard' 
        } 
       ] 
      } 
     ] 
    } 
});

탭

Ext.define('Myapp.view.Tabs', { 
extend: 'Ext.tab.Panel', 
    requires: [ 
     'Ext.field.Toggle' 
    ], 

    config: { 
     activeItem: 0, 
     tabBar: { 
      docked: 'top', 
      autoScroll: 'auto', 
      ui: 'neutral', 
      layout: { 
       pack: 'center' 
      } 
     }, 
     items: [ 
      { 
       title: 'Tab 1', 
       xtype: 'formpanel', 
       items: [ 
        { 
         xtype: 'fieldset', 
         defaults: { 
          labelWidth: '35%', 
          labelAlign: 'top' 
         }, 
         items: [ 
          { 
           xtype: 'togglefield', 
           name: 'toggle', 
           label: 'Toggle' 
          } 
         ] 
        } 
       ] 
      }, 
      { 
       title: 'Tab 2', 
       xtype: 'formpanel', 
       items: [ 
        { 
         xtype: 'fieldset', 
         defaults: { 
          labelWidth: '35%', 
          labelAlign: 'top' 
         }, 
         items: [ 
          { 
           xtype: 'togglefield', 
           name: 'toggle', 
           label: 'Toggle' 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    } 
});

출처

2012-04-05 Arkady

Ext.define('Myapp.view.Product', { 
    extend: 'Ext.tab.Panel', 
    requires: [ 
    'Ext.field.Toggle' 
    ], 

    config: { 
     activeItem: 0, 
     tabBar: { 
      docked: 'top', 
      autoScroll: 'auto', 
      ui: 'neutral', 
      layout: { 
       pack: 'center' 
      } 
     }, 
     items: [{ 
      xtype:'toolbar', 
      docked:'top' 
     }, { 
      docked: 'bottom', 
      xtype: 'toolbar', 
      items: [ 
      { 
       text: 'Close', 
       ui: 'back', 
       id: 'closeProductCard' 
      } 
      ] 
     }, 
     { 
      title: 'Tab 1', 
      xtype: 'formpanel', 
      items: [{ 
       xtype: 'fieldset', 
       defaults: { 
        labelWidth: '35%', 
        labelAlign: 'top' 
       }, 
       items: [{ 
        xtype: 'togglefield', 
        name: 'toggle', 
        label: 'Toggle' 
       } 
       ] 
      } 
      ] 
     },{ 
      title: 'Tab 2', 
      xtype: 'formpanel', 
      items: [{ 
       xtype: 'fieldset', 
       defaults: { 
        labelWidth: '35%', 
        labelAlign: 'top' 
       }, 
       items: [{ 
        xtype: 'togglefield', 
        name: 'toggle', 
        label: 'Toggle' 
       } 
       ] 
      } 
      ] 
     } 
     ] 
    } 
});

좋아 나는 제품보기에 두 개의 뷰를 합병했다. 도구 모음이 위와 아래에있는 탭 패널이 표시됩니다. 다행히도 세부 사항 페이지 인 다이나믹스와 함께 작동합니다.

출처

2012-04-05 21:55:55 fuzzyLikeSheep

효과가 있습니다. 그러나 각 탭의 토글 필드가 나타나지 않습니다. 각 탭의 내용을 패널에 추가하는 추가 단계가 있습니까? 도움을 주셔서 감사합니다 – Arkady

그게 문제가 될 수 있습니다. 도구 막대를 탭보기에 추가하여 두보기를 함께 결합하지 마십시오. – fuzzyLikeSheep

탭을 제품보기에 병합하려고 시도했지만 올바르게 작동하지 않습니다 (탭이 표시되지 않음). 궁극적으로 제품보기가 세부 정보 페이지가되기를 원합니다. 앞의 목록 선택에 따라 탭으로 구성된 제품 정보가 표시됩니다. 제품보기를 열려고하는 목록 선택이 있지만이 시점에서 멈추었습니다. 이것이 가능한 접근법으로 보이면 알려주십시오. 당신의 도움을 주셔서 감사합니다! – Arkady

Sencha Touch 2 : 양식 패널에 탭 추가

답변

관련 문제