Sencha Touch의 중첩 패널/도구 모음

Question

위의 패널을 제어하는 ​​상수 도구 모음을 만들려고합니다. 그런 다음 위에있는 패널에는 도구 모음이 있어야합니다 (맨 위). 거의 작동하는 아래 코드를 시도했지만 하위 페이지 내부 패널의 html을 볼 수 없습니다. 나는 그것이 패널이 나머지 높이를 차지하지 않기 때문에 그것이라고 생각한다. 그러나 나는 이유를 모른다.

누구든지 아이디어가 있습니까? 감사!

Ext.setup({ 
    onReady: function() { 


    // Sub-page sections 
    var blah = { 
     style: "background-color: #B22222; color:#FF0000;", 
     title: "one", 
     html: "Why can't I see this html", 
     layout:"fit", 
     flex: 1 
    }; 
    var blah2 = { 
     style: "background-color: #404040; color:#000000;", 
     title: "one", 
     html: "Why can't I see this html", 
     layout:"fit", 
     flex: 1 
    }; 

    // Main portion of the page, which includes top toolbar and content 
    var page1 = new Ext.TabPanel({ 
     dock: "bottom", 
     layout: "card", 
     items: [blah, blah2, blah], 
     title: "one", 
     flex: 1 
    }); 

    // This is the outer panel with the bottom toolbar 
    var wrapper = new Ext.Panel({ 
     fullscreen: true, 
     items: page1, 
     dockedItems: [ 
      { 
      xtype: "toolbar", 
      dock: "bottom", 
      items: [ 
       { 
       iconMask: true, 
       iconCls: "download" 
       }, 
       { 
       iconMask: true, 
       iconCls: "favorites" 
       }, 
       { 
       iconMask: true, 
       iconCls: "search" 
       }, 
       { 
       iconMask: true, 
       iconCls: "user" 
       } 
      ] 
      } 
     ] 
     }); 
    } 
}); 

Answer 1

은을 사용하여 수행 할 수 있습니다 래퍼 패널에 배치 툴바가 아닌 TabPanel. TabBar를 아래쪽으로 도킹하면 각 tabButton에 아이콘을 적용 할 수 있습니다.

나는 당신이하려고하는,하지만이 도움이 될 것입니다 무엇을 오해 할 수 있습니다

Ext.setup({ 
    onReady: function() { 


     // Sub-page sections 
     var blah = { 
      style: "background-color: #B22222; color:#FF0000;", 
      title: "one", 
      html: "Why can't I see this html", 
     }; 
     var blah2 = { 
      style: "background-color: #404040; color:#000000;", 
      title: "one", 
      html: "Why can't I see this html", 
     }; 

     // Main portion of the page, which includes top toolbar and content 
     var page1 = new Ext.TabPanel({ 
      items: [blah, blah2, blah], 
      title: "one", 
      iconMask: true, 
      iconCls: "download", 
     }); 

     // This is the outer panel with the bottom toolbar 
     var wrapper = new Ext.TabPanel({ 
      fullscreen: true, 
      tabBar: { 
       dock: 'bottom', 
       layout: { 
        pack: 'center' 
       } 
      }, 
      items: [ 
       page1, 
       { 
        iconMask: true, 
        iconCls: "favorites" 
       }, 
       { 
        iconMask: true, 
        iconCls: "search" 
       }, 
       { 
        iconMask: true, 
        iconCls: "user" 
       } 
      ] 
     }); 
    } 
}); 

나는 스크린 캐스트에 대한 building a user interface in sencha touch using tabs and toolbars했다. live demo 및 code is on github이 있으므로 참조 용으로 사용해보십시오.

Answer 2

은 PAGE1의 탭 패널을 밖으로

layout: "card",

을, 대신

그것은 당신이 뭘 하려는지 같은 소리