Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Extjs MVC Problem

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    13

    Default Extjs MVC Problem

    I am creating project using Extjs 4.1.1 MVC. initComponent function of panel is not called..

    This is my app.js
    Code:
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'Ezdi.admin.fileAllocation': 'js/admin/fileAllocation'
        }
    });
    
    
    Ext.require('Ezdi.admin.fileAllocation.view.adminFileAllocationMainPanel');
    Ext.application({
    	name:'Ezdi',
    	//autoCreateViewport: true//,
    	/*requires:['Ext.container.Viewport',
    	          'Ezdi.admin.fileAllocation.view.adminFileAllocationMainPanel'],*/
    		//models: [],    //Model part 
    	  //  stores: [], //stores 
    	   // controllers: [],//controler
    		launch: function() {
    	        Ext.create('Ext.container.Viewport', {
    	        	layout:'fit',
    	        	//requires:['Ezdi.admin.fileAllocation.view.adminFileAllocationMainPanel'],
    	        	items:[{
    	        		//xtype:'adminFileAllocationMainPanel'
    	        	}],
    	        	listeners:{
    	        		afterrender:function()
    	        		{
    	        			console.log(Ext.getCmp('adminFileAllocationMainPanelId'));
    	        		}
    	        	}
    	        });
    	      
    	    }
    		
    	
    });
    and this is my panel file..
    Code:
    Ext.define('Ezdi.admin.fileAllocation.view.adminFileAllocationMainPanel',{
    	extend:'Ext.panel.Panel',
    	alias:'widget.adminFileAllocationMainPanel',
    	//id:'adminFileAllocationMainPanelId',
    	/*requires:[
    	          'Ezdi.button.CoderAllocationButton',
    	          'Ezdi.button.AutoAllocationButton',
    	          'Ezdi.button.ReportsButton',
    	          'Ezdi.button.MessagingButton',
    	          'Ezdi.button.DashboardButton'
    	],*/
    	initComponent:function(){
    		this.id='adminFileAllocationMainPanelId';
    		console.log("inside initComponent of adminFileAllocationMainPanel");
    		this.callParent(arguments);
    	}
    		
    });
    in this console is not displayed.. file is loaded successfully..

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    Answers
    759

    Default

    Aside from other errors in your code, you never create it:

    Code:
    //xtype:'adminFileAllocationMainPanel'
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    13

    Default

    Now i have this app fule
    Code:
    ]
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'Ezdi.admin.fileAllocation': 'js/admin/fileAllocation',
            'Ezdi.admin.adminCommon':'js/admin/adminCommon'
        }
    });
    
    
    Ext.require('Ezdi.admin.fileAllocation.view.adminFileAllocationMainPanel');
    Ext.application({
    	name:'Ezdi',
    		//models: [],    //Model part 
    	  //  stores: [], //stores 
    	   // controllers: [],//controler
    		launch: function() {
    			alert('launched');
    	        Ext.create('Ext.container.Viewport', {
    	        	height:800,
    	        	width:800,
    	        	items:[{
    	        		xtype:'adminFileAllocationMainPanel'
    	        	}],
    	        	listeners:{
    	        		afterrender:function()
    	        		{
    	        			console.log(Ext.getCmp('adminFileAllocationMainPanelId'));
    	        		}
    	        	}
    	        });
    	      
    	    }
    });
    and my another file is like this:

    Code:
    Ext.define('Ezdi.admin.fileAllocation.view.adminFileAllocationMainPanel',{
    	extend:'Ext.panel.Panel',
    	alias:'widget.adminFileAllocationMainPanel',
    	height:800,
    	width:800,
    	//id:'adminFileAllocationMainPanelId',
    	requires:[
    	          'Ezdi.admin.adminCommon.view.coderAllocationButton',
    	          'Ezdi.admin.fileAllocation.view.autoAllocationButton',
    	          'Ezdi.admin.adminCommon.view.reportsButton',
    	          'Ezdi.admin.adminCommon.view.messagingButton',
    	          'Ezdi.admin.adminCommon.view.dashboardButton'
    	],
    	initComponent:function(){
    		console.log("inside admin file allocation main Panel");
    		this.id='adminFileAllocationMainPanelId';
    		//this.layout='border';
    		this.items=[/*{
    			region:'north',
    			height:35,
    			layout:'border',
    			items:[{
    				region:'center',
    				layout:{
    					type:'hbox',
    					pack:'center'
    				},
    				items:[{
    					xtype:'coderAllocationButton',
    					id:'adminFileAllocationCoderAllocationButtonMainaPnelId'
    				},{
    					xtype:'autoAllocationButton',
    					id:'adminFileAllocationAutoAllocationButtonMainPanelId'
    				},{
    					xtype:'reportsButton',
    					id:'adminFileAllocationReportsButtonMainPanelId'
    				},{
    					xtype:'messagingButton',
    					id:'adminFileAllocationMessagingButtonMainPanelId'
    				},{
    					xtype:'dashboardButton',
    					id:'adminFileAllocationDashboardButtonMainPanelId'
    				}]
    			},
    			{
    				region:'east',
    				width:200,
    				items:[{
    					xtype:'welcomePanel',
    					id:'welcomePanelId',
    					listeners:{
    						afterrender:function()
    						{
    							Ext.getCmp('welcomePanelNameId').update('Welcome Admin');
    						}
    					}
    				}]
    			}]
    				
    		},{
    			region:'center'
    		},{
    			region:'south',
    			height:getWindowHeight()-40,
    			items:[{
    				html:'<span style="cursor:pointer;" onclick="displaySerachParameterOnClickFunction();">Display Search Parameter</span>'
    			},{
    				xtype:'searchParameterPanel',
    				margin:'5 0 0 10',
    				id:'searchParameterPanelId'
    			},{
    				xtype:'adminSearchResultPanel',
    				margin:'5 0 0 10',
    				id:'searchResultPanelId',
    				hidden:true
    			}]
    		}*/];
    		this.callParent(arguments);
    	}
    		
    });
    In this all files are loaded perfectly bt application is not launched.
    Now what should i do??

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    13

    Default

    I have controller like this:
    Code:
    Ext.define('Ezdi.admin.fileAllocation.controller.adminFileAllocationAppLaunchController', {
            extend: 'Ext.app.Controller',
            stores:['Ezdi.admin.adminCommon.store.adminSearchParameterHospitalComboStore'],
                     
                     
                     refs: [{
                                 ref: 'adminSearchParameterHospitalComboStore',
                                 selector: 'Ezdi.admin.adminCommon.store.adminSearchParameterHospitalComboStore'
                         }],
    
    
                     onLaunch: function() {
                             console.log(this.getAdminSearchParameterHospitalComboStore());
                      }
    });
    here getAdminSearchParameterHospitalComboStore() gives undefined.
    bt when i use getEzdiAdminFileAllocationStoreAdminSearchParameterHospitalComboStoreStore() method it gives me right store..
    Why i dont get store using getAdminSearchParameterHospitalComboStore() method??

  5. #5
    Sencha User metalinspired's Avatar
    Join Date
    Apr 2012
    Posts
    98
    Answers
    4

    Default

    you don't get it because getter method is created to include path from stores definition.

    Ex:
    Code:
    stores: ['storeOne', 'storeTwo']
    generates getStoreOneStore() and getStoreTwoStore() getter methods


    Code:
    stores: ['folder.storeOne', 'folder.another.storeTwo']
    generates setFolderStoreOneStore() and getFolderAnotherStoreTwoStore() methods

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    13

    Default

    Then what is the use of refs???

  7. #7
    Sencha Premium Member
    Join Date
    Dec 2012
    Location
    Seattle, WA
    Posts
    423
    Answers
    34

    Default

    Refs give you easy access to view components using componentQuery for the selector.

    For example to get access to your panel you could use the alias as the selector.

    HTML Code:
    {
        ref: 'MyPanel',
        selector:'adminFileAllocationMainPanel'
    }
    Which produces getMyPanel();

    You could just use componentQuery to do the same thing but refs have additional config values that make them more powerful http://docs.sencha.com/ext-js/4-2/#!/api/Ext.app.Controller-cfg-refs



  8. #8
    Sencha User metalinspired's Avatar
    Join Date
    Apr 2012
    Posts
    98
    Answers
    4

    Default

    @charvee: You are mixing refs and automatically generated getter methods.
    As MikeRH noted "Refs give you easy access to view components using componentQuery for the selector."
    Code:
    {
        ref: 'MyPanel',
        selector: 'window#edit > toolbar >button#new'
    }
    will select button with itemId "new" who is direct child of toolbar which is direct child of window with itemId "edit".
    Automated getter methods are, as name suggests, automatically generated by controller, for example defining this in your controller:
    Code:
    views: ['view1', 'user.view2'],
    stores: ['store1', 'store2']
    will create getView1View(), getUserView2View(), getStore1Store(), getStore2Store() methods that you can use inside your controller.
    So basically you're mixing apples and oranges.

    Code:
    Ext.define('Ezdi.admin.fileAllocation.controller.adminFileAllocationAppLaunchController', {
            extend: 'Ext.app.Controller',
            stores:['Ezdi.admin.adminCommon.store.adminSearchParameterHospitalComboStore'],
                     
                     // you don't need this because controller already created getEzdiAdminAdminCommonStoreAdminSearchParameterHospitalComboStoreStore() method
                    // but you should consider changing your naming scheme in order for controller to generate shorter method names
                    // refs: [{
                    //             ref: 'adminSearchParameterHospitalComboStore',
                   //              selector: 'Ezdi.admin.adminCommon.store.adminSearchParameterHospitalComboStore'
                   //      }],
    
    
    
    
                     onLaunch: function() {
                             // console.log(this.getAdminSearchParameterHospitalComboStore());
                             // try this instead
                             console.log(this.getEzdiAdminAdminCommonStoreAdminSearchParameterHospitalComboStoreStore());
                      }
    });
    You can find all this information in API documentation

  9. #9
    Sencha User
    Join Date
    Jul 2012
    Posts
    13

    Default

    when i use this.getEzdiAdminFileAllocationViewAdminFIleAllocationViewMainPanelView();

    i get function i(){return this.constructor.apply(this,arguments)||null} answer so i cant access its property..

    How can i access propoerties of panel using this getter method?

  10. #10
    Sencha Premium Member
    Join Date
    Dec 2012
    Location
    Seattle, WA
    Posts
    423
    Answers
    34

    Default

    Okay that method is ludicrous...you are going to get to a point where you wont be able to understand your own code with an app structure like that.

    Also you should become familiar with using Firefox with Firebug or I highly recommend the Illuminations plugin for firebug. Or chrome developer tools. This will allow you great insight into the code that Ext automatically generates i.e. console.log(this.getStore()) will open up a whole new world for you to understanding the way Ext works.

    You have over complicated your code and I would suggest just creating a very simple app to learn how to do all the things you are trying to do.

Page 1 of 2 12 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
  •