Sencha Touch使用按鈕更新tabPanel的內容

我一直在嘗試學習Sencha Touch，並且我被困在可能非常明顯的東西上。我試圖用按鈕事件更新tabPanel。我想點擊第一個按鈕在同一個面板中加載'maptestPanel'。這是從它自己的js文件加載的地圖。Sencha Touch使用按鈕更新tabPanel的內容

地圖面板看起來不錯本身：

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

但我沒有看到如何正確地將其放置在一個tabpanel

的代碼是：

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 2011-05-01 22:31:34

我只知道「經典」煎茶，但這應該以同樣的方式工作：所以你可以只添加mapPanel（但隱藏）到你的tabPanel，並在按鈕處理程序顯示它，而隱藏按鈕面板。

此外，佈局來講，我不認爲你需要精確的佈局：在一個tabpanel「卡」，因爲它被定義使用卡片佈局

來源

2011-05-01 14:14:14 Jad

Sencha Touch使用按鈕更新tabPanel的內容

回答

相關問題