煎茶上的按钮

Question

我在煎茶触摸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", 
         } 
        ] 
      }] 
    } 
}); 

thees按钮创建的索引页的标签显示不同的视图看起来像这样

点击橙色按钮我想显示一个新的视图。

我已经试过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.s etPath（{'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(); 
      } 
     } 
    ); 
} 
}); 

`

Answer 1

您可以添加action到您的按钮参考

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 
    }); 
} 

---

编辑

你需要把y我们control内config块：

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根据您的所有发布的代码。

Answer 2

上的一个按钮，你必须添加一个处理这样的：

{ 
xtype:'button', 
cls:"main_navigation", 
handler: function() { 
     Ext.create('Ext.window.Window', { 
      title: 'Works', 
      height: 300, 
      width: 300, 
      html: 'Create whatever view you want.' 
     }).show(); 
    } 
} 

你想创建一个按钮点击什么看法？

编辑：添加show()来显示窗口。但你可以在那里做任何动作。在您的控制器

{ 
    xtype: 'button', 
    action: 'push-view' 
} 

然后，你可以把新的观点，当用户点击这样的按钮：