我在 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",
}
]
}]
}
});
这些按钮看起来像这样
单击橙色按钮时,我想显示一个新视图。
我已经尝试过 ext.Navigation 视图,但这不是我想要的。我是否必须向按钮添加事件侦听器或者我必须做其他事情请建议
我在控制器文件夹 main.js 中创建了一个新控制器
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'
});
}
});
和我的新视图 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': 'touch/src', 'ov_app': '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();
}
}
);
}
});
`