CODEWITHSUNDEEP
extjsextjs6extjs6-classic
bigopon
bigopon

Reputation: 1964

How to specify view controller for Ext js 6 window

In extjs, how to create view controller for a window, and how to make a window a child of a panel similar like this:

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

The reason is I want to enable the same view controller to handle both panel and window actions. But Panel doesn't seem to accept window as its child.

A work around for this is to have in controller init:

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

But doing it this way will have the window's view controller pointed to global app controller, which is unwanted. So to work around this, I can add a bunch of listeners to the window, but this is not preferred.

Is there anyway I can achieve this without those ugly workarounds?

Upvotes: 1

Views: 2939

Answers (3)

A. Llorente
A. Llorente

Reputation: 1162

But Panel doesn't seem to accept window as its child.

Window is a floating panel, having a window as a child of a panel makes no sense, why don't you use a panel or a container directly instead? You can open windows programatically if you want. See docs for window.

I would recommend you to have a ViewController per View. If you have common methods for several controllers you can have a superclass with those methods and then extend the other controllers from that one:

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

Upvotes: 0

UDID
UDID

Reputation: 2423

Creating a view controller for a window I will suggest something here. You can create window and attach the all component which associate to the window. Sample code for this will something look like.

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

Since we assigned a controller newWindowController in window definition then we can use a controller separately. Sample code will follow this

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

Now the second part is how to make a window a child of a panel, afte a bit research i found this > Panel as item you can try this concept. I created a fiddle where you can play around Fiddle.

Note In your case instead of creating window inside panel you can directly use xtype : 'newWindow'

Upvotes: 2

Marc Rambow
Marc Rambow

Reputation: 86

Binding one controller to different views is kind of against the idea of MVC.. But you could try just to assign one, many times. You can give controller to the window in the definition, like: http://examples.sencha.com/extjs/6.0.1/examples/classic/window/window.html

Upvotes: 0

Related Questions