Sencha觸摸幻燈片菜單

我想創建一個幻燈片菜單。如此這般在它

enter image description here

我希望它做的卻是滑出頂部（在標題下的容器），並在該菜單下，而不是將其推離：但是不喜歡Facebook的類型向右：

enter image description here

伊夫搜查，還沒有發現任何樣本。任何人都可以推薦一個網站或教程來做到這一點。

更新 - 5/24/2014 感謝所有的不同建議。唯一的是我不希望它看起來像FB滑塊。我見過那些。我希望它像我添加的第二個屏幕截圖一樣滑過。我能夠創造它。這裏是我的代碼：

Ext.define('Slider.view.Main', 
{ 
    extend: 'Ext.Container', 
    xtype: 'mainPage', 
    requires: 
    [ 
     'Ext.TitleBar', 
     'Ext.form.Panel', 
     'Ext.List', 
     'Ext.navigation.View', 
     'Ext.Component', 
     'Ext.Panel' 
    ], 

    config: 
    { 
     layout: 'fit', 
     items: 
     [ 
      { 
       xtype: 'titlebar', 
       docked: 'top', 
       title: 'Slider Test', 
       items: 
       [ 
        { 
         iconCls: 'list', 
         align: 'left', 
         handler: function() 
         { 

          var con1 = Ext.ComponentQuery.query('container > #container1')[0]; 
          var draggable = Ext.ComponentQuery.query('container > #navContainer')[0]; 

          if(con1.element.hasCls('out')) 
          { 

           draggable.hide({type: 'slideOut', direction: 'left', duration : 500}); 


           con1.element.removeCls('out').addCls('in'); 
          } 
          else 
          { 
           con1.element.removeCls('in').addCls('out'); 
           draggable.show({type:'slideIn', direction:'right', duration : 500}); 

          } 

         } 
        } 
       ] 
      }, 

      { 
       xtype: 'container', 
       layout: 'hbox', 
       itemId: 'container1', 
       items: 
       [ 

        { 
         xtype: 'container', 
         layout: 'card', 
         width: 250, 
         hidden: true, 
         itemId: 'navContainer', 
         style: 'position: absolute; top: 0; left: 0; height: 100%;z-index: 2', 
         zIndex : 1, 
         items: 
         [ 
          { 
           xtype: 'list', 
           itemTpl: '{title}', 
           data: 
           [ 
            { title: 'Item 1' }, 
            { title: 'Item 2' }, 
            { title: 'Item 3' }, 
            { title: 'Item 4' }, 
            { title: 'Item 2' }, 
            { title: 'Item 3' }, 
            { title: 'Item 4' }, 
            { title: 'Item 2' }, 
            { title: 'Item 3' }, 
            { title: 'Item 4' }, 
            { title: 'Item 2' }, 
            { title: 'Item 3' }, 
            { title: 'Item 4' }      
           ] 
          } 
         ] 
        }, 


        { 
         xtype: 'container', 
         itemId: 'mainContainer', 

         width: '100%', 
         html: 'Main content area' 
        } 



       ] 
      } 
     ] 
    } 
});

來源

2014-05-19 adviner

只需按照本教程中的步驟操作即可：http://innofied.com/simplest-slide-navigation-with-sencha-touch-2-2/ –

檢查該樣本Slide navigation with sencha touch

來源

2014-05-20 05:38:03

套裝cover爲true。

Ext.Viewport.setMenu(this.createMenu(), { 
    side: 'left', 
    cover: true 
});

這將使菜單滑出容器頂部。我不確定是否在導航欄下，但有些人可能會聰明的CSS可以解決這個問題。

來源

2014-05-20 13:52:23

謝謝大家的提示。我能夠創建我想要的內容並在更新後發佈代碼

來源

2014-05-26 04:10:22 adviner

Sencha觸摸幻燈片菜單

回答

相關問題