Question

在extjs中，如何为窗口创建视图控制器，以及如何使窗口成为类似这样的面板的子窗口：

Ext.define('App.view.Main', {
    items: [
        { xtype: 'textfield' },
        { xtype: 'window' }
    ]
});

原因是我想启用相同的视图控制器来处理面板和窗口操作。但小组似乎并不接受窗户作为其孩子。

解决这个问题的方法是在控制器init中进行：

//...
init: function(view) {
    this.myWindow = new Ext.window.Window();
}

但是这样做会让窗口的视图控制器指向全局app控制器，这是不需要的。所以要解决这个问题，我可以在窗口中添加一堆监听器，但这不是首选。

无论如何，如果没有那些丑陋的变通方法，我能做到这一点吗？

Answer 1

为窗口创建视图控制器我将在此处提出建议。您可以创建窗口并附加与窗口关联的所有组件。这个示例代码看起来像。

Ext.define("App.view.NewWin.NewWint", {
    extend: "Ext.window.Window",
    alias: 'widget.newWindow',
    layout: 'fit',
    scrollable: true,
    layout: 'fit',
    modal: true,
    requires: [
      'App.view.NewWin.NewWintController'
    ],
    controller: 'newWindowController',
    initComponent: function() {
        var me = this, 
        // Code for attributes if in case any required  
        me.tbar = [
          // Code for TBar
        ];
        me.items = [{
          // Code for WindowItem 
        }];
        me.buttons = ['->', { // some code for tbar
            text: Save,
            name: "Save",
            hidden: me.readOnly,
            disabled: true
        }, {
            text: Cancle,
            name: "cancel"
        }];
        me.callParent(arguments);
    }
})

由于我们在窗口定义中分配了控制器newWindowController，因此我们可以单独使用控制器。示例代码将遵循此

Ext.define('App.view.NewWin.NewWintController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.newWindowController',

    init: function() {
        var me = this;
        me.control({
        // You can write the control for your component which is in window.
        });
    },


    /*
     * The code below will work on click of save.
     */
    onSaveBtns: function(btn) {
        var me = this,
        // You code for save 
    },
    onClose: function(btn) {
        var window = btn.up("window");
        window.close();
    }
});

现在第二部分是如何使一个窗口成为一个面板的孩子，经过一番研究我发现了这个＆gt; Panel as item你可以尝试这个概念。我创造了一个小提琴，你可以玩Fiddle。

注意在您的情况下，您可以直接使用xtype : 'newWindow'

而不是在面板内创建窗口

Answer 2

将一个控制器绑定到不同的视图有点违背MVC的想法。但你可以尝试分配一次，多次。您可以在定义中为控制器提供控制器，例如： http://examples.sencha.com/extjs/6.0.1/examples/classic/window/window.html

Answer 3

但Panel似乎并不接受窗口作为它的孩子。

窗口是一个浮动面板，窗口作为面板的子窗口是没有意义的，为什么不直接使用面板或容器？如果需要，可以以编程方式打开窗口。请参阅window的文档。

我建议你为每个View都有一个ViewController。如果你有几个控制器的通用方法，你可以使用这些方法的超类，然后从那个控制器扩展其他控制器：

Ext.define('My.SuperController', {
    init : function() {
        this.getView().on('event', this.myHandler);
    }
});
Ext.define('My.PanelController', {
     extend : 'My.SuperController'
});
Ext.define('My.WindowController', {
     extend : 'My.SuperController'
});

如何为Ext js 6窗口

3 个答案: