I have Sencha Touch application that currently looks like this. The top navigation bar is appearing correctly as intended, but I want to have a bottom bar as well. I also want the bottom bar to display text based on values I get from stores. I am using Sencha Touch 2.3. How might I accomplish this?
Here is the view for the above page:
Ext.define('App.view.Mod.Home', {
extend: 'Ext.navigation.View',
alias: 'widget.modHome',
config: {
navigationBar: {
docked: 'top',
items: [
{
text: 'Logout',
ui: 'back',
itemId: 'logoutBtn',
align: 'left'
},
{
align: 'right',
itemId: 'showMapBtn',
text: 'Show Map',
ui: 'action'
},
{
align: 'right',
itemId: 'modGraphBtn',
text: 'Stats'
},
{
align: 'right',
hidden: true,
itemId: 'submitBtn',
text: 'Submit',
ui: 'action'
},
{
xtype: 'button',
text: 'Role',
itemId: 'rolesBtnMod'
}
]
},
items: [
{
xtype: 'list',
title: 'Home',
store: 'modList',
disableSelection: true,
itemTpl: [
'<div class="x-container x-field-checkbox x-field x-label-align-left x-field-labeled" style="background: none">',
'<div class="x-form-label" style="background: none;padding: 0">',
'<div>{FirstName} {LastName}</div>',
'</div>',
'<div class="x-component-outer">',
'<div class="x-unsized x-field-input" style="border: 0; background: none;">',
'<input type="checkbox" <tpl if=\'modStatus != null && Accepted !== false\'>checked="checked"</tpl> class="x-input-el x-input-checkbox">',
'<div class="x-field-mask"></div>',
'</div>',
'</div>',
'</div>'
],
plugins: [{type: 'pullrefresh'}]
},
{
xtype: 'tabpanel', // <--- This is what I've tried so far, although I think that tabpanel is the wrong object to use. Panel does not work, however.
docked: 'bottom',
store: 'manageMods',
title: new Ext.XTemplate(
'tpl if="values.isActive == \'1\'">' + "{someStringValue}"
)
}
]
}
});
Please note that this is not my original code base, and I realize that some of the elements are being used incorrectly. Refactoring the entire codebase to adhere to the latest standards in the docs would be a huge undertaking in itself, so right now I am only trying to keep the style consistent.
First off there is a syntax error in your tabpanel declaration, missing a comma before title. However what I think you want to implement is a docked toolbar at the bottom of the view like this:-
Ext.define('App.view.Mod.Home', {
extend: 'Ext.navigation.View',
alias: 'widget.modHome',
config: {
navigationBar: {
docked: 'top',
items: [{
text: 'Logout',
ui: 'back',
itemId: 'logoutBtn',
align: 'left'
}, {
align: 'right',
itemId: 'showMapBtn',
text: 'Show Map',
ui: 'action'
}, {
align: 'right',
itemId: 'modGraphBtn',
text: 'Stats'
}, {
align: 'right',
hidden: true,
itemId: 'submitBtn',
text: 'Submit',
ui: 'action'
}, {
xtype: 'button',
text: 'Role',
itemId: 'rolesBtnMod'
}]
},
items: [{
xtype: 'list',
title: 'Home',
store: 'modList',
disableSelection: true,
itemTpl: ['<div class="x-container x-field-checkbox x-field x-label-align-left x-field-labeled" style="background: none">', '<div class="x-form-label" style="background: none;padding: 0">', '<div>{FirstName} {LastName}</div>', '</div>', '<div class="x-component-outer">', '<div class="x-unsized x-field-input" style="border: 0; background: none;">', '<input type="checkbox" <tpl if=\'modStatus != null && Accepted !== false\'>checked="checked"</tpl> class="x-input-el x-input-checkbox">', '<div class="x-field-mask"></div>', '</div>', '</div>', '</div>'],
plugins: [{
type: 'pullrefresh'
}]
}, {
xtype: 'toolbar', // <--- This is what I've tried so far, although I think that tabpanel is the wrong object to use. Panel does not work, however.
docked: 'bottom',
itemId:'myToolbar',
title:'Test',
//store: 'manageMods',
//title: new Ext.XTemplate('tpl if="values.isActive == \'1\'">' + "{someStringValue}")
}]
}
});
var homeContainer = Ext.create('App.view.Mod.Home', {renderTo:Ext.getBody(), fullscreen:true});
// Now you can get a reference to the toolbar and change it's title to whatever you want e.g.:-
homeContainer.getComponent('myToolbar').setTitle('The 2nd test');