sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)

基于sencha touch 2.2所写

代码：

 1 /*

 2 *模仿tabpanel导航栏

 3 */

 4 Ext.define('ux.TabBar', {

 5     alternateClassName: 'tabBar',

 6     extend: 'Ext.Toolbar',

 7     xtype: 'tabBar',

 8     config: {

 9         docked: 'bottom',

10         cls: 'navToolbar',

11         layout: {

12             align: 'stretch'

13         },

14         defaults: {

15             flex: 1

16         },

17         //被选中的按钮

18         selectButton: null

19     },

20     initialize: function () {

21         var me = this;

22         me.callParent();

23         //监听按钮点击事件

24         me.on({

25             delegate: '> button',

26             scope: me,

27             tap: 'onButtonTap'

28         });

29     },

30     //更新被选中按钮

31     updateSelectButton: function (newItem, oldItem) {

32         if (oldItem) {

33             oldItem.removeCls('x-tabBar-pressing');

34         }

35         if (newItem) {

36             newItem.addCls('x-tabBar-pressing');

37         }

38     },

39     //当按钮被点击时

40     onButtonTap: function (button) {

41         if (!button.getInitialConfig('noSelect')) {

42             this.setSelectButton(button);

43         }

44     },

45     /**

46     * @private 

47     *执行添加项，调用add方法后自动执行

48     */

49     onItemAdd: function (item, index) {

50         if (!this.getSelectButton() && item.getInitialConfig('selected')) {

51             this.setSelectButton(item);

52         }

53         this.callParent(arguments);

54     }

55 });

 

需要的css：

 1 .navToolbar {

 2     padding:0;

 3 }

 4 .navToolbar .x-button {

 5     border:0;

 6     margin:0;

 7     border-right:1px solid #585B5B;

 8     border-radius:0;

 9     padding:0;

10 }

11 .navToolbar .x-button .x-button-label {

12     font-weight:normal;

13     color:White;

14     font-size:0.6em;

15 }

16 .navToolbar .x-tabBar-pressing {

17     background-image:none;

18     background-color:#0f517e;

19     background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#0a3351),color-stop(10%,#0c4267),color-stop(65%,#0f517e),color-stop(100%,#0f5280));

20     background-image:-webkit-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);

21     background-image:-moz-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);

22     background-image:-o-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);

23     background-image:linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);

24 }

 

使用：

 1 Ext.define('app.view.MyBar', {

 2     alternateClassName: 'myBar',

 3     extend: 'ux.TabBar',

 4     xtype: 'myBar',

 5     requires: ['app.view.About'],

 6     config: {

 7         items: [

 8         {

 9             xtype: 'button',

10             text: '首页',

11             //只有第一个设置的属性有效

12             selected: true,

13             action: 'redirect',

14             redirect: 'home'

15         },

16         {

17             xtype: 'button',

18             text: '关于',

19             action: 'redirect',

20             redirect: 'about'

21         },

22         {

23             xtype: 'button',

24             text: '其他',

25             //没有选中效果

26             noSelect:true,

27             action: 'other'

28         }]

29     }

30 });

 

效果图：

2013.11.7

增加配置：没有选中效果

 

使用示例：

http://www.cnblogs.com/mlzs/p/3382229.html