Папки для инструментов и вкладки в Sencha Touch

Question

Я тренируюсь с Sencha Touch. Я создал простую панель, которая состыковалась в нижней части экрана. Вот мой код:

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}) 
      ] 
     }); 
    } 
}); 

Что я хочу сделать дальше, это создать панель инструментов непосредственно над панелью вкладок. Эта панель инструментов напечатает некоторый текст (который я в конечном итоге буду использовать для создания прокручиваемой ленты новостей). Как добавить панель инструментов непосредственно поверх панели вкладок?

Answer 1

Здесь вы идете:

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

Answer 2

Я играл с чем-то похоже сегодня вечером, пытаясь добавить панель сообщений выше панели вкладок , Я нашел хороший способ сделать это, используя метод 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' 
        }); 
       } 
     } 
    });