在Sencha Touch中堆疊工具欄和Tabpanels

我正在與Sencha Touch練習。我創建了一個停靠在屏幕底部的簡單標籤欄。這裏是我的代碼：在Sencha Touch中堆疊工具欄和Tabpanels

Ext.setup({ 
    tabletStartupScreen: 'tablet_startup.png', 
    phoneStartupScreen: 'phone_startup.png', 
    icon: 'icon.png', 
    glossOnIcon: false, 
    onReady: function() { 
     Ext.regModel('ListItem', { 
      fields: [{name: 'text', type: 'string'}] 
     }); 

     var d1 = new Ext.data.TreeStore({ 
          model: 'ListItem', 
          root:{text:'D1',items:{}}, 
          proxy: { 
             type: 'ajax', 
             reader: { 
               type: 'tree', 
               root: 'items' 
              } 
          } 
     }); 
      var d2 = new Ext.data.TreeStore({ 
          model: 'ListItem', 
          root:{text:'D2',items:{}}, 
          proxy: { 
             type: 'ajax', 
             reader: { 
               type: 'tree', 
               root: 'items' 
              } 
          } 
     }); 
     tabBar = new Ext.TabPanel({ 
      id:'tabPanel', 
      fullscreen:true, 
      tabBar: { 
       dock: 'bottom' 
      }, 
      items:[ 
       new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}), 
       new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2}) 
      ] 
     }); 
    } 
});

我想接下來要做的就是直接在標籤欄的頂部創建一個工具欄。這個工具欄將打印一些文本（我最終將使用它來創建滾動新聞源）。如何直接在標籤欄頂部添加工具欄？

來源

2012-02-22 John

在這裏你去：

tabBar = new Ext.TabPanel({ 
      id:'tabPanel', 
      fullscreen:true, 
      tabBar: { 
       dock: 'bottom' 
      }, 
      items:[ 
       new Ext.NestedList({ 
        dock:'left', 
        title:'title', 
        iconCls:'home', 
        width:'350', 
        store:d1, 
        dockedItems: [{ 
         xtype: 'toolbar', 
         dock: 'bottom', 
         items: [{ 
          text: 'Docked to the bottom' 
         }] 
        }] 
       }), 
       new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2}) 
      ] 
     });

第一個選項卡現在有一個工具欄只是使用TabBar

來源

2012-02-22 01:28:16

哦，我以爲我得到它的工作。但是，如何讓該工具欄「持久」，以便它也顯示在tabbar中的第二個選項卡？ – John 2012-02-22 02:44:39

我想你需要添加一個dockedItems配置給你其他的NestedList。即使方式看起來多餘，我也想不到另一種方式。 – 2012-02-22 07:42:41

您是否找到更好的方法？ – 2012-02-24 20:37:13

我玩弄的東西今晚類似上面，嘗試添加標籤欄上方的信息欄。我發現了一個很好的方法來使用initComponent方法（我使用惰性實例化和Ext.extend來創建xtypes）。這裏是你的TabBar的代碼爲我工作的修改版本：

tabBar = new Ext.TabPanel({ 
     id:'tabPanel', 
     fullscreen:true, 
     tabBar: { 
      dock: 'bottom' 
     }, 
     items:[ 
      new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}), 
      new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2}) 
     ] 
     listeners: { 
       beforerender: function(){ 
        this.addDocked({ 
         html: 'hello world', 
         dock: 'bottom' 
        }); 
       } 
     } 
    });

來源

2012-04-10 05:31:01

在Sencha Touch中堆疊工具欄和Tabpanels

回答

相關問題