sencha touch はタブパネルのナビゲーションバーを模倣します TabBar サンプルコード_JavaScript スキル

sencha touch 2.2 に基づいて書かれています

コード:

コードをコピー コードは次のとおりです:

/*
*タブパネルのナビゲーションを模倣しますbar
*/
Ext.define('ux.TabBar', {
alterClassName: 'tabBar',
extend: 'Ext.Toolbar',
xtype: 'tabBar',
config : {
docked: 'bottom',
cls: 'navToolbar',
layout: {
align: 'stretch'
},
デフォルト: {
フレックス: 1
);
//ボタンクリックイベントをリッスン
me.on({
delegate: '> button',
範囲: 私、
タップ: 'onButtonTap'
}) ;
},
//選択したボタンを更新します
updateSelectButton: function (newItem, oldItem) {
console.log(oldItem);
if ( oldItem) {
oldItem.removeCls('x-tabBar-pressing');
}
if (newItem) {
} newItem.addCls('x-tabBar-pressing');
}
},
//ボタンがクリックされたとき
onButtonTap: function (button) {
this.setSelectButton(button);
},
/**
* @private
* 追加された項目を実行し、add メソッド呼び出し後に自動的に実行します
*/
onItemAdd: 関数 (アイテム、インデックス) {
);
}
});



必須CSS:





コードをコピー

コードは次のとおりです:

.navToolbar { パディング:0 ;}.navToolbar .x-button { border:0; margin:0; border-right:1px Solid #585B5B;

border-radius:0;

パディング:0;
}
.navToolbar .x-button .x-button-label {
font-weight:normal;
color:White;
font-size: 0.6em;
}
.navToolbar .x-tabBar-pressing {
背景画像:なし;
背景色:#0f517e;
背景画像:-webkit-gradient(リニア,50 % 0%,50% 100%,カラーストップ(0%,#0a3351),カラーストップ(10%,#0c4267),カラーストップ(65%,#0f517e),カラーストップ(100) %,# 0f5280));
背景画像:-webkit-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
背景画像:-moz- Linear-gradient (top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
背景画像:-o-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65 %,# 0f5280);
背景画像:linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
}



使用:





コードをコピー

コードは次のとおりです:

Ext.define('app.view.MyBar', {
alterClassName: 'myBar',
extend: 'ux.TabBar',
xtype: 'myBar',
config: {
items: [
selected : true
xtype: 'button',
text: '宝くじホール'
},
{
xtype: 'ボタン',
テキスト: 'ラッキー ナンバー'
},
{
xtype: 'ボタン ',
テキスト: '詳細'
}]
}
} );



レンダリング: