2012-09-17 28 views
0

我正在创建一个sencha触摸应用程序,并且设计需要在选项卡栏中有一个分段按钮。如何将一个分段按钮集成到一个tabbar?

是否有一个简单的方法来做到这一点与sencha内置功能,或者我必须自己创建(添加一个带有分段按钮的工具栏作为一个项目,并创建所有控件,以实际获得相同的东西) ?

extend: 'Ext.TabPanel', 
requires: [ 
    'Ext.SegmentedButton', 
], 
xtype: 'album', 
id: 'album', 
fullscreen: true, 
config: { 
    tabBar: { 
     layout: { 
      pack: 'center', 
     }, 
     items: { 
      xtype: 'segmentedbutton', 
      allowDepress: false, 

      listeners: { 
       initialize: function() { 
        Ext.SegmentedButton.implement({ 
         setActive: function(activeItem) { 
          this.setActiveItem(activeItem); 
         } 
        }); 
       } 
      } 
     } 
    }, 
    autoDestroy: true, 
    activeItem: 1, 
    items: [ 
     { 
      title: 'HIGHLIGHTS', 
      xtype: 'highlightview', 
      id: 'highlightView' 
     }, 
     { 
      title: 'KATEGORIEN', 
      xtype: 'categoryView', 
      id: 'categoryView', 
     }, 
     { 
      title: 'SUCHE', 
      xtype: 'searchView', 
      id: 'searchView', 
     } 
    ], 
} 

这就是我到目前为止的尝试。听众在那里解决[Object] Object has no method 'setActive'的错误,但不会导致我想要的行为。

+0

你将需要添加一个分段按钮,标签栏的项目。 – blessenm

+0

然后框架抱怨,没有方法setActive。对于分段按钮,这种方法被称为setActiveItem – wiseveri

+0

把你的代码加起来。其他人可能会理解什么是错误的。 – blessenm

回答

0
//take a tap panel and inside the tap panel create panel as a xtype 
//give item id to each button in segmented button to create listener and later on assign a //function to it 


extend: 'Ext.TabPanel', 

requires: [ 

    'Ext.SegmentedButton' 

], 

xtype: 'album', 

id: 'album', 

    enter code here`enter code here` 

fullscreen: true, 

    config: { 
    cls:[ 
      'styles' 
     ], 
     scrollable: 'vertical', 

     items: [ 


      { 
       xtype: 'panel', 
       title: 'Close Case', 

       items: [ 

      { 
         xtype: 'segmentedbutton', 
         allowDepress: true, 
         height: 50, 
         items: [ 
          { 
           text: 'Option 1', 
           pressed: true, 
           handler: function() { 
           console.log("Picked #1"); 
           alert("foo"); 
           itemId: "newButton11" 
           } 
          }, 
          { 
           text: 'Option 2', 
           handler: function() { 
           alert("foo"); 


           } 
          }, 
          { 
           text: 'Option 3', 
           handler: function() { 
           alert("foo"); 
           } 
          } 
         ] 
        } 
       ] 
      } 

     ], 

     listeners: [ 

     { 

      delegate: "#newButton", 
      event: "tap", 
      fn: "onNewButtonTap" 
     } 
    ] 

    }, 

onNewButtonTap: function() { 
     //write your function here and it will work 
    } 




//This is working for me just let me know if it works for you. 

enter image description here

+0

谢谢你的帮助 – wiseveri

相关问题