基于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
增加配置：没有选中效果
使用示例：
