Threaded View

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    6
    Vote Rating
    0
    prd0000 is on a distinguished road

      0  

    Default Answered: Question about loading a view from modular Controller

    Answered: Question about loading a view from modular Controller


    Hi,
    Sorry if this is like another stupid question, but I am a newbie here and trying to create my first app.
    I have security based menu, which then generate module list based on user's allowed modules.
    So, to cut to the chase, here is my app.js


    Code:
    Ext.application({
        name:'My',
        autoCreateViewport:true,
        controllers: ['main.Menu']
    });
    
    
    function forbidden() {
        Ext.Msg.alert("Access", "Please login to access this system", function() {
            location.href = "/";
        })
    }

    and this is my main.Menu controller:
    Code:
    Ext.define('My.controller.main.Menu', {
        extend: 'Ext.app.Controller',
        views: ['Toolbar'],
        loadModule: function (module) {
            var controller = this.getController(module);
            controller.init();
        },
        init: function () {
            Ext.Ajax.request({
                url: '/system/menu',
                success: function (response) {
                    var items = Ext.decode(response.responseText);
                    var toolbar = Ext.getCmp('masterToolbar');
                    toolbar.add(items);
                },
                failure: function (response) {
                    if (response.status == 403) {
                        forbidden();
                    }
                }
            });
            this.control({
                'masterToolbar *': {
                    click: function (item) {
                        if (item.itemId) {
                            this.loadModule(item.itemId);
                        }
                    }
                }
            })
        }
    })
    ExtJS indeed load my controller, but didn't do init, so I did it manually at my main controller.
    And this is an example of what my menu json looks like:
    Code:
    [{
    	"text":"Marketing",
    	"menu":{
    		"items":[
    			{
    				"text":"Jadwal Meeting Room",
    				"itemId":"marketing.room.Meeting"
    			}
    		]
    	}
    }, {
    	"text":"Master",
    	"menu":{
    		"items":[
    			{
    				"text":"Daftar Kontak",
    				"itemId":"master.Contact"
    			}
    		]
    	}
    }]
    Now this is my module's controller. I put here my master.Contact controller:
    Code:
    Ext.define('My.controller.master.Contact', {
        views: ['master.Contact'],
        init: function () {
            var win = Ext.create('Ext.window.Window', {
                alias: 'widget.masterContact',
                title: 'Contact list',
                width: 500,
                height: 400,
                layout: 'border'
            }) win.show();
        }
    })

    and my view:
    Code:
    Ext.define('My.view.master.Contact', {
        extend: 'Ext.window.Window',
        xtype: 'masterContact',
        title: 'Contact list',
        width: 500,
        height: 400,
        layout: 'border',
        initComponent: function () {
            this.show();
        }
    })
    and I can see that the browser load this controller, but it doesn't load the view My.view.master.Contact.
    I've tried to create the window manually like the controller above, and it was working when I called init().
    But it doesn't load the view. Also, can someone please help me on displaying that view when it is loaded.

    I also considering to load all relevant controllers on Ext.application, but I don't know how to do that. Should I generate app.js from PHP file? Can someone please point me to the right direction?


    Thank you

  2. Most likely it would perform better to have everything load at startup.

Thread Participants: 1