通过Ext.app.Application设置应用程序主视图,launch()方法与Ext.app.Application,主视图配置

8qgya5xd  于 2022-09-26  发布在  其他
关注(0)|答案(1)|浏览(138)

根据文档,当使用sencha cmd构建通用应用程序时,可以使用mainView config或在Ext.app的launch()方法中设置应用程序的主视图。应用程序(使用setMainView方法)如下:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var app = this.getApplication();
        //app.setMainView('MyApp.view.main.Main');
        //app.setMainView({xtype: 'app-main'});

    },
    mainView: 'MyApp.view.main.Main'
});
...

这里有小提琴:Sencha fiddle
而且,它可以与经典工具包一起使用,但当使用现代工具包时,可能会出错。
如果您使用的是mainView配置,它会按预期工作(在执行sencha generate app时,这是默认情况)。
但是,如果您使用的是setMainView()方法,它取决于您传递的参数类型:

  • 当您将视图的全名作为字符串('MyApp.view.main.main')传递时,您将得到空白屏幕。视图已创建(可通过控制台内的Ext.ComponentQuery.query('app-main')访问),但不可见
  • 当您传递视图的配置对象({xtype:'appmain'})时,您将得到错误

您可以在上面的Fiddle中通过注解/取消注解第7、8、11行来尝试它(确保在点击Run之前选择了一个现代工具箱)。
你知道怎么解决这个问题吗?使用启动方法逻辑的能力至关重要——例如,如果您试图实现具有登录功能的应用程序。

zfciruhq

zfciruhq1#

如果是现代的,将主视图添加到视口中,否则只需设置主视图

Ext.application({
    name: 'Fiddle',

    launch: function () {
        if (Ext.isModern) {
            Ext.Viewport.add([{
                xtype: 'app-main'
            }]);
        } else {
            var app = this.getApplication();
            app.setMainView('MyApp.view.main.Main');
        }
    },
});

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',
    title: 'Panel Title',
    html: 'panel body data...'
});

相关问题