Question

我有一个简单的应用程序演示，其中包含带有sencha组件的一组窗口。当发生移动上一个窗口或移动下一个窗口的事件时，主控制器将其视为视图，将其清理并添加新组件以进行查看...

Ext.define('jsclient.view.main.MainVC', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main-view',

    config: {
        listen: {
            global: {
                eventNewWindow: 'eventNewWindow'
            }
        }
    },

    eventNewWindow: function (callback) {
        this.view.removeAll();
        this.view.add(callback());
    }
});

当我放置一个包含选项卡的面板组件时，会出现问题，这些组件会绘制所有窗口，绘制选项卡，但不会绘制包含每个选项卡的组件。如果我检查该窗口创建的组件，则它已创建但未呈现或显示。

Ext.define('jsclient.view.articleCheck.ArticleCheckV', {
    extend: 'Fwk.Panel',
    alias: 'widget.article-check',

    controller: 'article-check',
    viewModel: 'article-check',

    requires: [
        'Fwk.Panel',
        'Ext.TabPanel',
        'jsclient.view.articleCheck.ArticleCheckVM',
        'jsclient.view.articleCheck.ArticleCheckVC',
        'jsclient.view.articleCheck.articlePending.ArticlePendingV',
        'jsclient.view.articleCheck.articleChecked.ArticleCheckedV'
    ],

    cls: 'article-check',
    title: 'Mi ventana**',
    titleAlign: 'center',

    layout: {
        type: 'vbox',
        align: 'fit'
    },

    items: [{
        xtype: 'tabpanel',
        flex: 1,
        deferredRender: true,
        items: [{
            title: 'Pendientes',
            reference: 'pending',
            xtype: 'article-pending',
            width: "50%"
        }, {
            title: 'Chequeados',
            reference: 'checked',
            xtype: 'article-checked',
            width: "50%",
        }]
    }],

    tools: [{
        type: 'left',
        docked: 'left',
        listeners: {
            click: {
                element: 'element',
                fn: 'goPrevious'
            }
        }
    }, {
        type: 'plus',
        docked: 'right',
        margin: '0 20 0 0',
        listeners: {
            click: {
                element: 'element',
                fn: 'goNewArticle'
            }
        }
    }],

    listeners: {
        click: {
            element: 'element',
            fn: 'prueba'
        }
    },

    constructor: function (config) {
        this.callParent([config]);
    }
});

任何代码都有两个文件可以帮助viewmodel组件，我将在上面看到一个示例。

视图：

Ext.define('jsclient.view.main.MainV', {
    extend: 'Fwk.Panel',
    alias: 'widget.main-view',

    id: 'main-view',

    requires: [
        'Fwk.Panel',
        'jsclient.view.main.MainVM',
        'jsclient.view.main.MainVC',
        'jsclient.view.blockCheck.BlockCheckV',
        'jsclient.view.centerList.CenterListV',
        'jsclient.view.articleCheck.ArticleCheckV',
        'jsclient.view.articleCheck.articlePending.ArticlePendingV',
        'jsclient.view.articleCheck.articleChecked.ArticleCheckedV'
    ],
    viewModel: 'main-view',
    controller: 'main-view',

    layout: {
        type: 'vbox',
        align: 'fit'
    },
    margin: 'auto',
    items: [{
        xtype: 'center-list',
        flex: 1
    }],

    constructor: function (config) {
        this.callParent([config]);

        //Read url params and restore context if needed
        var urlParams = location.search;
        if (urlParams !== '') {
            Fwk.Context.restore(urlParams);
        }
    }
});

控制器：

Ext.define('jsclient.view.main.MainVM', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main-view',

    data: {},

    stores: {}
});

Answer 1

好吧，对于我的问题，我没有找到解决问题的方法……但是使用不同的观点，我可以解决。

我最古老的方法是在组件上创建项目：

此解决方案可能是正确的，但对于 tabpanel 而言...不起作用。我在视口中创建一个组件（主要组件），并在事件发生时在该组件中创建一个新组件。
```
-> Viewport
 |
  -> MainComponent
   |
    -> AnyComponent (event)
```
使用这段代码，我尝试通过回调返回返回 主视图中的新组件的构造方法：
```
/*
* Callback in other view
*/
callback: function(options){
 return new jsclient.view.mycomponent.MyComponentV(options);
}
/*-----------------------------*/
eventNewWindow: function (callback) {
 this.view.removeAll();
 this.view.add(callback());
}
```
我在视口上创建项目的新方法：

新解决方案类似，但使用视口代替主要组件，我们需要一些
事情很清楚。视口是一组争用主视图的视图（数组）（如果不是）在主视图上，这些组件位于第二个平面上，它们不可见，但是处于初始状态。

所以解决方案就这样了，取而代之的是使用主要组件，我们使用视口：

我们为N个视图创建N个控制器，当另一个视图发送全局事件时，该控制器捕获该事件并在视口中自行创建。

 Ext.define('jsclient.controller.main.MainController', {
        extend: 'Ext.app.Controller',

        requires: [
         'jsclient.view.main.i18n.Main_en_EN',
         'jsclient.view.main.i18n.Main_es_ES', 
         'jsclient.view.main.MainV',
        ],

        config: {
         listen: {
           global: {
             eventNewMain: 'eventNewMain'
           }
         }
        },

        eventNewMain : function(options) {
         Ext.Viewport.setActiveItem('main-view');       
        }
     });

在需要将参数传递给组件的情况下，我们可以执行以下代码：

Ext.define('jsclient.controller.articleCheck.ArticleCheckController', {
extend: 'Ext.app.Controller',

requires: [
    'jsclient.view.main.i18n.Main_en_EN',
    'jsclient.view.main.i18n.Main_es_ES',
    'jsclient.view.articleCheck.ArticleCheckV',
],

config: {
    listen: {
        global: {
            eventNewArticleCheck: 'eventNewArticleCheck'
        }
    }
},

eventNewArticleCheck: function (options) {
    if(options != undefined){
        Ext.Viewport.removeAll();
    }

    Ext.Viewport.add({
        xtype: 'article-check',
        options: { block: options }
    });

    Ext.Viewport.setActiveItem('article-check');
}
});

TabPanel不能渲染或不显示选项卡

1 个答案: