如何在单击按钮时路由到视图(ExtJS 6.2)

在ExtJS 6.2中，要在单击按钮时路由到视图，需要使用Ext路由。Ext路由是ExtJS提供的一种机制，用于管理URL与应用程序的视图之间的映射关系。

下面是实现在单击按钮时路由到视图的步骤：

首先，确保你已经在应用程序中定义了路由器。你可以在应用程序的启动方法中创建路由器实例，并设置路由规则。以下是一个示例代码片段：

Ext.application({
  name: 'MyApp',

  launch: function() {
    // 创建路由器实例
    var router = Ext.create('Ext.route.Router');

    // 设置路由规则
    router.connect('home', {
      controller: 'home',
      action: 'index'
    });

    // 启动应用程序
    Ext.Viewport.add(Ext.create('MyApp.view.Main'));
  }
});

在你的视图中添加一个按钮，并为其添加一个事件处理程序。事件处理程序将通过路由器导航到指定的视图。以下是一个示例代码片段：

Ext.define('MyApp.view.Home', {
  extend: 'Ext.Panel',
  xtype: 'home',

  items: [{
    xtype: 'button',
    text: 'Go to Another View',
    handler: function() {
      // 通过路由器导航到指定的视图
      Ext.route.Router.redirectTo('another');
    }
  }]
});

创建要导航到的另一个视图，并在应用程序的启动方法中添加其路由规则。以下是一个示例代码片段：

Ext.define('MyApp.view.Another', {
  extend: 'Ext.Panel',
  xtype: 'another',

  // 视图的配置项...

  // ...

  // 路由规则
  routes: {
    'another': 'showAnotherView'
  },

  // 路由处理方法
  showAnotherView: function() {
    Ext.Viewport.setActiveItem(this);
  }
});

// 在应用程序的启动方法中添加路由规则
router.connect('another', {
  controller: 'another',
  action: 'showAnotherView'
});

以上是在ExtJS 6.2中实现在单击按钮时路由到视图的基本步骤。具体根据你的应用程序的需求和架构可能会有所不同。对于更多关于ExtJS的信息和文档，请参考ExtJS官方文档。如果你在使用腾讯云的云计算产品，你可以在腾讯云官网了解更多相关信息。