Results 1 to 9 of 9

Thread: Ext.getCmp('userForm') is undefined

  1. #1
    Ext User
    Join Date
    Aug 2007
    Posts
    212

    Default Ext.getCmp('userForm') is undefined

    I have extended FormPanel as a preconfigured class as follows:

    Code:
    App.userForm = Ext.extend(Ext.form.FormPanel, {
    	initComponent : function() {
    		Ext.apply(this, {
    			layout : 'form',
    			id : 'userForm',
    			url : 'users-update.php',
    			monitorValid : true,
    			width : 350,
    			frame : true,			
    			defaults : {
    				xtype : 'textfield',
    				width : 200,
    				allowBlank : false,
    				msgTarget : 'side'
    			},
    			items    : [{
    				fieldLabel : 'First Name',
    				name : 'firstname',
    
    
    ...
    ...
    ...
    The form renders fine when I create an instance, however I am unable to reference it via the id. Am I missing something? I've searched the forum many times for this error and haven't found any indication as to why I might be unable to find it with Ext.getCmp. One similar issue was solved because the OP was using the 'name' attribute instead of 'id', however I'm clearly not doing that. When inspected with firebug, it's in the DOM. Any ideas? Might it have something to do with where I'm defining the id in the class extension?

    Thanks!

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You programatically set the id to 'userForm' in every instance?

    Anyway, you just can't do that. The id is set in the constructor.

    Just another instance of the extend to configure virus that afflicts the Ext community.

  3. #3
    Ext User
    Join Date
    Aug 2007
    Posts
    212

    Default

    Quote Originally Posted by Animal View Post
    You programatically set the id to 'userForm' in every instance?

    Anyway, you just can't do that. The id is set in the constructor.

    Just another instance of the extend to configure virus that afflicts the Ext community.
    I will never have more than one instance at a time, so I didn't conceptually see that as an issue.

    I'm open to suggestions about the right way to structure it, i.e. in opposition to "extend to configure". My approach comes from saki's tutorials, which are universally pointed to by both the admins on this board (including you, if you take a look at your signature) AND the authors of EXTJS that post here, when questions arise on structuring an application. On the surface, it seems like a good way to logically separate code and avoid having 10k lines of javascript in one file. Care to elaborate on why this approach is bad?

    Also, thanks for the solution. I'll try it right now.

  4. #4
    Sencha User bclinton's Avatar
    Join Date
    Nov 2007
    Posts
    305

    Default

    Quote Originally Posted by Animal View Post
    Just another instance of the extend to configure virus that afflicts the Ext community.
    I know I've got a flaming case of that myself. When I started learning, it just seemed like Ext.Cmp was a thing to avoid and it was so easy to make everything a member of the component I was extending and using 'this' and '.createDelegate(this)' everywhere.

    Is there a recommended path towards recovery?

  5. #5
    Ext User
    Join Date
    Aug 2007
    Posts
    212

    Default

    As an answer to my own question, for others that might stumble on this, here is a good thread about extending vs. factory patterns. The distinction to be drawn is that if you're extending only to configure (as Animal clearly frowns upon), you might consider a factory pattern instead.

    http://www.extjs.com/forum/showthrea...901#post259901

    3rd post - lots of other info in there on app design as well.

  6. #6
    Sencha User bclinton's Avatar
    Join Date
    Nov 2007
    Posts
    305

    Thumbs up

    Thanks for the link - bookmarked.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Quote Originally Posted by djfiii View Post
    I will never have more than one instance at a time...
    So what are you doing creating class?

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

  9. #9
    Ext User
    Join Date
    Aug 2007
    Posts
    212

    Default

    So, I switched all of my "extend to configure" classes to factory methods, and I'm still getting the Ext.getCmp is undefined error.

    I start with a grid as follows, which works fine. In the rowselect handler, I'm creating a userWindow and passing the record object, among other stuff. :

    Code:
    cr = Ext.getCmp('centerRegion');
    cr.removeAll();
    ug = App.userGrid();
    ug.getSelectionModel().on('rowselect',function(sm, rowIndex, record){
    	if(typeof(uw) != 'undefined') {
    		uw.destroy();
    	}
    	record.action = 'edit';
    	uw = App.userWindow({ title : 'Edit User', iconCls : 'user', record : record});
    	uw.items.items[0].getForm().loadRecord(record);
    	uw.show();
    });	
    cr.add( ug );
    cr.doLayout();

    userWindow defined here, which contains a userForm, and passes along config.record which is the record object for the selected row coming through from the grid:

    Code:
    App.userWindow = function(config) {
    	return new Ext.Window(Ext.apply({
    		layout : 'fit',
    		width : 500,
    		height : 300,
    		closeAction : 'destroy',
    		plain : true,
    		items : App.userForm(config.record)
        }, config));
    }

    Then userForm, where I set the ID programatically, for the sole purpose of getting reference to the form component in my submit handler (better way to do that??) :

    Code:
    App.userForm = function(config){
        return new Ext.form.FormPanel(Ext.apply({
    		id : 'userForm',
    		url : 'users-update.php',
    		monitorValid : true,
    		width : 350,
    		frame : true,			
    		defaults : {
    			xtype : 'textfield',
    			width : 200,
    			allowBlank : false,
    			msgTarget : 'side'
    		},
    		items    : [{
    			fieldLabel : 'First Name',
    			name : 'firstname',
    			emptyText : 'Enter a First Name'
    		},{
    			fieldLabel : 'Last Name',
    			name : 'lastname'	
    		},{
    			fieldLabel : 'User Name',
    			name : 'username'		
    		},{
    			fieldLabel : 'Email',
    			name : 'email',
    			vtype : 'email'
    		},{
    			fieldLabel : 'Phone Number',
    			name : 'phone'			
    		},{
    			xtype: 'combo',
    			id : 'role', 
    			fieldLabel : 'Role',
    			displayField : 'role',
    			valueField : 'roleid',
    			hiddenName : 'roleid',
    			store : new Ext.data.JsonStore({
    				root : 'records',
    				fields : [
    					{ name : 'roleid', mapping : 'roleid' },
    					{ name : 'role', mapping : 'role'},
    				],
    				proxy : new Ext.data.HttpProxy({
    					url : 'includes/json/roles.php'
    				})
    			})
    		}],
    		buttons : [{
    			text : 'Submit',
    			scope : this,
    			formBind : true,
    			handler : function(){
    				console.log(this.userForm);
    				Ext.getCmp('userForm').getForm().submit({ action : config.action});
    			}
    		}]	
        }, config));
    }

    Any idea why I'm getting undefined for Ext.getCmp('userForm')?

Posting Permissions

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