Sencha Touch Update 버튼이있는 탭 패널의 내용

나는 Sencha Touch를 배우려고 노력해 왔으며 나는 꽤 명백한 무언가에 붙어 있습니다. 단추 이벤트로 tabPanel을 업데이트하려고합니다. 첫 번째 버튼을 탭하여 'maptestPanel'을 같은 패널에로드하고 싶습니다. 이것은 자신의 js 파일에서로드 된 맵입니다.Sencha Touch Update 버튼이있는 탭 패널의 내용

지도 패널 자체에 의해 확인 같습니다

maptestPanel = new Ext.Panel({ 
         layout: 'fit', 
         fullscreen: true, 
         items: [map] 
        });

하지만 제대로 탭 패널에 배치하는 방법을 확인할 수 없습니다

코드는 다음과 같습니다에 대한

Ext.setup({ 
    icon: 'icon.png', 
    tabletStartupScreen: 'tablet_startup.png', 
    phoneStartupScreen: 'phone_startup.png', 
    glossOnIcon: false, 
    onReady: function() { 

    var navBar = new Ext.Toolbar({ 
     dock : 'top', 
     title: 'Some App Name', 
    }); 

    var topPanel = new Ext.Panel({ 
     dockedItems: [navBar], 
     fullscreen : true, 
     //html: 'Test Panel' 
    }); 


    var tapHandler = function(button, event) { 
      btnPanel.update(maptestPanel); //I'm sure part of the problem is here 
    } 


    var SomeDate1 = new Ext.Button({ 
     text:"Some date", 
     minWidth:200, 
     height: 45, 
     cls:"listButtonTop", 
     handler:tapHandler     
     }); 

    var SomeDate2 = new Ext.Button({ 
     text:"Another Date", 
     minWidth:200, 
     height: 45, 
     cls:"listButton" 
    }); 

    var SomeDate3 = new Ext.Button({ 
     text:"And Another Date", 
     minWidth:200, 
     height: 45, 
     cls:"listButtonBottom" 
    }); 


    var btnPanel = new Ext.Panel ({ 
     id: 'date', 
     items: [SomeDate1,SomeDate2,SomeDate3],   
    }); 

    var tabpanel = new Ext.TabPanel({ 
     layout: 'card', 
     tabBar: { 
      dock: 'bottom', 
      layout: { 
       pack: 'center' 
      } 
     }, 
     fullscreen: true, 
     ui: 'dark', 
     cardSwitchAnimation: { 
      type: 'slide', 
      cover: true 
     }, 
     defaults: { 
      scroll: 'vertical' 
     }, 
     items: [{ 
      title: 'Maps', 
      //html: '<h1>Place holder</h1>', 
      iconCls: 'maps', 
      cls: 'card1', 
      items: [btnPanel]    
     }, { 
      title: 'Favs', 
      html: '<h1>Place holder</h1>', 
      iconCls: 'favorites', 
      cls: 'card2', 
      badgeText: '4', 
      layout: 'fit' 
      //items: [SomeList, SomeOtherList, AnotherList] 
     }, { 
      title: 'Info', 
      html: '<h1>Place holder</h1>', 
      cls: 'card4', 
      iconCls: 'info' 
     }] 
    }); 
    } 
});

감사합니다 조언이나 올바른 방향으로 조종하십시오.

출처

2011-05-01 jpw

당신이 그 코드까지 해결해야 할 몇 가지있다 :

1) '지도'에는 레이아웃이 없습니다. 자식 항목이 하나이므로 레이아웃 : 'fit'이 여기에 적합합니다.

2) 가장 바깥 쪽 항목에 대해서만 전체 화면을 사용하십시오. 다른 컨테이너의 하위 항목이므로 다른 항목을 전체 화면으로 보이기를 원하지 않습니다.

3) 항목을 컨테이너에 동적으로 추가하려면 컨테이너에서 add() 메소드를 사용하십시오. 또한 컨테이너의 레이아웃을 트리거하려면 doLayout()을 호출해야합니다.

btnPanel.add(maptestpanel); 
btnPanel.doLayout();

그러나이 경우지도에 패널을 추가하는 이유가 표시되지 않습니다. 추가 기능을 제공하지 않습니다. 대신지도를 btnPanel에 직접 추가합니다.

4) btnPanel에도 레이아웃이 없으므로 적절한 레이아웃 (예 : vbox 레이아웃)도 선택해야합니다.

출처

2011-05-01 14:14:10

덕분에 큰 도움을 카드 레이아웃을 사용하기 때문에! 그것은 이치에 맞기 시작합니다. 나는 그 변화를 만들었고 btnPanel.add (maptestpanel)을 추가했다. btnPanel.doLayout(); 및 btnPanel.setActiveItem (3); 핸들러에. 이것은 아주 가깝다. 지도를 새 탭에 표시하지만 도구 모음에 밝은 회색 사각형이 있습니다 (빈 아이콘처럼). 쉽게 제거 할 수 있습니까? – jpw

"클래식"sencha 만 알지만 같은 방식으로 작동해야합니다. tabPanel에 mapPanel (하지만 숨김)을 추가하고 버튼 패널을 숨기는 동안 버튼 핸들러에 표시 할 수 있습니다.

게다가, 레이아웃의 말하기, 당신이 정확한 레이아웃에 필요가 있다고 생각하지 않습니다 탭 패널에서 '카드'는 정의에 의해

출처

2011-05-01 14:14:14 Jad

Sencha Touch Update 버튼이있는 탭 패널의 내용

답변

관련 문제