我在 sencha touch 2 中创建了一个索引页面,其中我在容器内创建了一些自定义按钮
Ext.define('ov_app.view.Main', {
extend: 'Ext.Container',
requires:[
'ov_app.view.Eligibelity',
],
xtype: 'main',
css:[{
"path": "default-theme.css",
}],
config:{
scrollable: true,
items: [
{ xtype: 'panel',
margin:10,
items:[
{
xtype:'button',
margin: '0 0 8 0',
cls:"main_navigation",
style:'background-color:#000',
action: 'push-view',
},{
xtype:'button',
margin: '0 0 8 0',
cls:"main_navigation",
},{
xtype:'button',
cls:"main_navigation",
}
]
}]
}
});
这些按钮看起来像这样
单击橙色按钮后,我想显示一个新 View 。
我尝试过 ext.Navigation View ,但这不是我想要的。 我是否必须向按钮添加事件监听器,或者我必须做其他事情,请建议
我在 Controller 文件夹 main.js 中创建了一个新 Controller
Ext.define('ov_app.controller.Main', {
extend: 'Ext.app.Controller',
config:{
control: {
'button[action=push-view]': {
tap: 'pushViewFunction'
}
},
},
pushViewFunction: function() {
Ext.Viewport.add({
xtype: 'Eligibelity'
});
}
});
和我的新 View Eligibelity.js 代码
`
Ext.define('ov_app.view.Eligibelity', {
xtype : 'Eligibelity',
config: {
layout: 'vbox',
cls: 'big',
items: [
{
xtype: 'title',
title: 'Twitter Search'
}
]
}
});
` 还有我的 app.js 代码
` Ext.Loader.setPath({ 'Ext': '触摸/src', 'ov_app': '应用程序' });
Ext.application({
name: 'ov_app',
requires: [
'Ext.MessageBox'
],
views: ['Main', 'Eligibelity'],
controllers: ['Main'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('ov_app.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
`
最佳答案
您可以向按钮添加操作
以供引用:
{
xtype: 'button',
action: 'push-view'
}
然后在您的 Controller 中,当用户点击按钮时,您可以推送新 View ,如下所示:
control: {
'button[action=push-view]': {
tap: 'pushViewFunction'
}
},
pushViewFunction: function() {
Ext.Viewport.add({
xtype: 'newView' // This is the xtype of new view you want to push
});
}
编辑
您需要将control
放入config
block 中:
config: {
control: {
'button[action=push-view]': {
tap: 'pushViewFunction'
}
}
},
pushViewFunction: function() {
Ext.Viewport.add({
xtype: 'newView' // This is the xtype of new view you want to push
});
}
编辑2:
您可以使用setActiveItem
或animateActiveItem
:
pushViewFunction: function() {
Ext.Viewport.animateActiveItem({xtype: 'Eligibelity'}, {type:'slide', direction: 'left'});
}
这是 Working Demo 基于您所有发布的代码。
关于javascript - sencha 在按钮选项卡上显示不同的 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16142871/