Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: How to init controller for a module of desktop?

  1. #1
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Answers
    1

    Default How to init controller for a module of desktop?

    Hi,
    I got an admin console show up in my desktop, but I can't find a way to hook it to its corresponding controller. Code below tries to use "afterreader: initController()" to init controller but errors out this:

    this.application is undefined
    this.application.control(selectors, listeners, this);


    Code:
    Ext.define("Iip.view.iip.adm.AdminConsole", {
        extend: "Ext.ux.desktop.Module",
    	controllers: ["iip.adm.AdminConsoles"],
    	...
    
        init : function(){
            this.launcher = {
                handler : this.createWindow,
                ...
            };
        },
    
        createWindow : function(){
            ...
            win = desktop.getWindow("admin-console") || this.createNewWindow(desktop);
            win.show();
            return win;
        },
    	
    	initController: function(westPanel, opts) {
    		var controller = Ext.create("Iip.controller.iip.adm.AdminConsoles");
    		controller.init();
    	},
    	
    	createNewWindow: function(desktop) {
    		return desktop.createWindow({
    			...
    			layout: "border",
    			items : [
    				{
    					region: "west",
    					....
    					layout: "accordion",
    					items: this.getMenu(),
    					afterrender: this.initController()
    				},
    				...
    			]
    		});
    	},
    	
    	getMenu: function() {
                    ...
    		return menu;// array of menu object from server
    	}
    });

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    Code:
    initController: function(westPanel, opts) {
        var controller = Ext.create("Iip.controller.iip.adm.AdminConsoles");
        controller.init();
    },
    You should not create controller this way, try to use <application>.getController().
    Code:
    initController: function(westPanel, opts) {
        var controller = <your application>.getController("Iip.controller.iip.adm.AdminConsoles");
        controller.init();
    },
    Let have a look at the Ext.application.getController() to see why you have to do this.
    Code:
    ...
    getController: function(name) {
        var controller = this.controllers.get(name);
    
    
        if (!controller) {
            controller = Ext.create(this.getModuleClassName(name, 'controller'), {
                application: this,
                id: name
            });
    
    
            this.controllers.add(controller);
        }
    
    
        return controller;
    },
    ...

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Answers
    1

    Default Controller cannot find menu item on accordion

    Thanks. That helped me get initController to call my controller, which, however, cannot find the menu item on in the accordion that sits in the left window. Thanks for any help. Here is my controller code:

    Code:
    Ext.define("Iip.controller.iip.adm.AdminConsoles", {
        extend: "Ext.app.Controller",
    	
        init: function() {
                   // All of the the following debugging (above this.control) show an empty array.
    		var el = Ext.ComponentQuery.query("Iip");
                   //var el = Ext.ComponentQuery.query("Iip panel[region=west] #acl");
                   //var el = Ext.ComponentQuery.query("Iip panel[region=west]");
    		console.log(el);
            this.control({
    			"Iip panel[region=west] #acl": /*No matches, thus no log shows*/ {
    				click: function() {
    					console.log("clicked...");
    				}
    			}
    		});
        }
    });

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    I don't think getting your controller in the way I suggested causes the problem of not finding the menu item. I think it should be other reasons. Right now I can't tell what it is because I don't know what your view looks like?

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    77

    Default

    I guess, just guess, you haven't creat your view, so you can't find it.
    You need to create that module manually.

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    77

    Default

    And is that ComponentQuery right?
    It should be "lip > panel[region=west] #cal" right?

  7. #7
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Answers
    1

    Default

    Thanks vietits and yAdEs.

    I think I should describe the linkage between the sencha desktop and my app before you can help me. Here it is: My "Start" menu has a menu called "Admin Console". When clicking it, a window shows up. Inside the window is a border layout. The left is an accordion which has one item called "Access Control Manager". The "center" pane is a tab panel. This much works. I can actually see the window with the border layout with "Access Control Manager" item inside the accordion on the left pane.

    The following does not work:

    - I want a tab to open a new tab in the "center" pane when "Access Control Manager" menu item in the accordion on the left is clicked. However, my controller is not able to find the "Access Control Manager" item. My previous codes showed that "Admin Console" is a module of the desktop (extending Ext.ux.desktop.Module)... For some reason, "Access Control Manager" menu item inside the accordion, which is inside the "Admin Console", which is inside a window, which is a module of the web desktop cannot be found.

    This is just a personal project to learn extjs. So, I can zip the whole app and upload if you need it to help me. Thanks again for your help.

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    @phamtranquocviet,

    I don't think you should zip and upload all your project but only post the code of 'Admin console' window then everybody can help you.

  9. #9
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Answers
    1

    Default

    Thanks vietits.

    Here is my "Admin Console" view file:
    Code:
    Ext.define("Iip.view.iip.adm.AdminConsole", {
        extend: "Ext.ux.desktop.Module",
    	controllers: ["Iip.controller.iip.adm.AdminConsoles"],
    	alias: "widget.admin-console",
    	
    	// Props or configs
    	id: "admin-console",
    	
    	// Create "Admin Console" menu item on start menu
        init : function(){
    		// Define launcher on the start menu
            this.launcher = {
                text: "Admin Console",
                iconCls:"icon-grid",
                handler : this.createWindow,
                scope: this
            };
        },
    
        createWindow : function(){
            var desktop, win;
    		
    		desktop = this.app.getDesktop();
    		win = desktop.getWindow("admin-console") || this.createNewWindow(desktop);
            win.show();
            return win;
        },
    	
    	initController: function() {
            Ext.each(this.controllers, function(control){
    			var controller = Iip.app.getController(control);
           		controller.init();     
            }, this);
    	},
    	
    	createNewWindow: function(desktop) {
    		return desktop.createWindow({
    			layout: "border",
    			title: "Admin Console",
    			border: false,
    			id: "admin-console",
    			animCollapse:true,
    			iconCls: "icon-grid",
    			constrainHeader:true,
    			maximized: true,
    			items : [
    				{
    					xtype: "panel",
    					region: "west",
    					id: "admin-console-west-panel",
    					stateId: "navigation-panel",
    					title: "Admin Menu",
    					split: true,
    					width: 200,
    					minWidth: 175,
    					maxWidth: 400,
    					collapsible: true,
    					animCollapse: true,
    					margins: "0 0 0 5",
    					layout: "accordion",
    					items: this.getMenu(),
    					afterrender: this.initController()
    				},
    				Ext.create("Ext.tab.Panel", {
    					region: "center",
    					id: "admin-console-center-panel",
    					deferredRender: true,
    					activeTab: 0,
    					items: [
    						{
    							title: "Instruction",
    							autoScroll: true,
    							html: "<p>Viet<p/>"
    						}
    					]
    				})
    			]
    		});
    	},
    	
    	getMenu: function() {
    		var menu = [];
    		
    		$.ajax({
    			url: "index.php",
    			async: false,
    			dataType: "json",
    			data: {c: "get_admin_console_menu"},
    			success: function(data) {
    				if(data.success == true ) {
    					menu = data.menu;
    				}
    			}
    		});
    		return menu;
    	}
    });
    Here is my "Admin Console" controller file:
    Code:
    Ext.define("Iip.controller.iip.adm.AdminConsoles", {
        extend: "Ext.app.Controller",
    	
        init: function() {
    		console.log("controller init...");
            this.control({
    			"Iip panel[region=west] #acl": {
    				click: function() {
    					console.log("clicked...");
    				}
    			}
    		});
        }
    });

  10. #10
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    With your code, you should modify Iip.controller.iip.adm.AdminConsoles as below:
    Code:
    Ext.define("Iip.controller.iip.adm.AdminConsoles", {
        extend: "Ext.app.Controller",
        
        init: function() {
            console.log("controller init...");
            this.control({
                "window[id=admin-console] panel[region=west] #acl": {
                    click: function() {
                        console.log("clicked...");
                    }
                }
            });
        }
    });
    However, I suggest you should use itemId instead of id as
    Code:
    createNewWindow: function(desktop) {
        return desktop.createWindow({
            layout: "border",
            title: "Admin Console",
            border: false,
            //id: "admin-console",
            itemId: "admin-console",
            animCollapse:true,
            iconCls: "icon-grid",
            constrainHeader:true,
            maximized: true,
            items : [
                {
                    xtype: "panel",
                    region: "west",
                    //id: "admin-console-west-panel",
    
                    itemId: "admin-console-west-panel",
    In this case, your controller will become
    Code:
    Ext.define("Iip.controller.iip.adm.AdminConsoles", {
        extend: "Ext.app.Controller",
        
        init: function() {
            console.log("controller init...");
            this.control({
                "#admin-console #admin-console-west-panel  #acl": {
                    click: function() {
                        console.log("clicked...");
                    }
                }
            });
        }
    });

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •