Based on the Sencha Touch 2.2 write
Code:
Copy Code code as follows:
/*
* Imitate TabPanel navigation bar
*/
Ext.define (' UX. Tabbar ', {
Alternateclassname: ' Tabbar ',
Extend: ' Ext.toolbar ',
Xtype: ' Tabbar ',
Config: {
Docked: ' Bottom ',
CLS: ' Navtoolbar ',
Layout: {
Align: ' stretch '
},
Defaults: {
Flex:1
},
The button that was selected
Selectbutton:null
},
Initialize:function () {
var me = this;
Me.callparent ();
Listener button Click event
Me.on ({
Delegate: ' > button ',
Scope:me,
Tap: ' Onbuttontap '
});
},
Update is selected button
Updateselectbutton:function (NewItem, Olditem) {
Console.log (Olditem);
if (Olditem) {
Olditem.removecls (' x-tabbar-pressing ');
}
if (newitem) {
Newitem.addcls (' x-tabbar-pressing ');
}
},
When the button is clicked
Onbuttontap:function (Button) {
This.setselectbutton (button);
},
/**
* @private
* Execute Add Item, call the Add method automatically
*/
Onitemadd:function (item, index) {
if (!this.getselectbutton () && item.getinitialconfig (' selected ')) {
This.setselectbutton (item);
}
This.callparent (arguments);
}
});
CSS Required:
Copy Code code as follows:
. navtoolbar {
padding:0;
}
. Navtoolbar. X-button {
border:0;
margin:0;
border-right:1px solid #585B5B;
border-radius:0;
padding:0;
}
. Navtoolbar. X-button. X-button-label {
Font-weight:normal;
Color:white;
Font-size:0.6em;
}
. Navtoolbar. x-tabbar-pressing {
Background-image:none;
Background-color: #0f517e;
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));
Background-image:-webkit-linear-gradient (Top, #0a3351, #0c4267 10%, #0f517e 65%, #0f5280);
Background-image:-moz-linear-gradient (Top, #0a3351, #0c4267 10%, #0f517e 65%, #0f5280);
Background-image:-o-linear-gradient (Top, #0a3351, #0c4267 10%, #0f517e 65%, #0f5280);
Background-image:linear-gradient (Top, #0a3351, #0c4267 10%, #0f517e 65%, #0f5280);
}
Use:
Copy Code code as follows:
Ext.define (' App.view.MyBar ', {
Alternateclassname: ' Mybar ',
Extend: ' UX. Tabbar ',
Xtype: ' Mybar ',
Config: {
Items: [
{
Xtype: ' button ',
Text: ' Survey ',
Only the first setting has a valid property
Selected:true
},
{
Xtype: ' button ',
Text: ' My points '
},
{
Xtype: ' button ',
Text: ' Lottery Hall '
},
{
Xtype: ' button ',
Text: ' Lucky number '
},
{
Xtype: ' button ',
Text: ' More '
}]
}
});
Effect Chart:
