ExtJS 和 Sencha Touch:在底部添加第二个面板,其中的文本取决于函数调用
ExtJS and Sencha Touch: Adding a second panel at bottom with text that depends on a function call
我的 Sencha Touch 应用程序目前看起来像 this。顶部导航栏按预期正确显示,但我也想有一个底部栏。我还希望底部栏显示基于我从商店获得的值的文本。我正在使用 Sencha Touch 2.3。我怎样才能做到这一点?
以上页面的视图如下:
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}"
)
}
]
}
});
请注意,这不是我的原始代码库,我知道有些元素使用不当。重构整个代码库以遵守文档中的最新标准本身就是一项艰巨的任务,所以现在我只是想保持风格一致。
首先,您的 tabpanel
声明中存在语法错误,在 title
之前缺少一个逗号。但是我认为你想要实现的是一个位于视图底部的停靠工具栏,如下所示:-
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');
我的 Sencha Touch 应用程序目前看起来像 this。顶部导航栏按预期正确显示,但我也想有一个底部栏。我还希望底部栏显示基于我从商店获得的值的文本。我正在使用 Sencha Touch 2.3。我怎样才能做到这一点?
以上页面的视图如下:
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}"
)
}
]
}
});
请注意,这不是我的原始代码库,我知道有些元素使用不当。重构整个代码库以遵守文档中的最新标准本身就是一项艰巨的任务,所以现在我只是想保持风格一致。
首先,您的 tabpanel
声明中存在语法错误,在 title
之前缺少一个逗号。但是我认为你想要实现的是一个位于视图底部的停靠工具栏,如下所示:-
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');