PDA

View Full Version : Ext.getCmp("myForm") is undefined issue



Anthony.Hall
9 Jan 2012, 7:49 AM
In one of my panels i have a form panel


xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
}



I wish to bind data to this and have the following code.


var form = Ext.getCmp('formJobSummary').getForm();
form.loadRecord(user);

I am getting:

Ext.getCmp("formJobSummary") is undefined

So obviously the loadRecord is out of scope. Given that my architecture is from the designer and has 2 files. Where do i put this loadRecord statement.

MyPanel.js


//Define a model with field names mapping to the form field name
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: ['quotedPrice', 'name']
});


//Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
quotedPrice: 'test',
name: 'test'
});




Ext.define('MyApp.view.MyPanel', {
extend: 'MyApp.view.ui.MyPanel',


initComponent: function () {
var me = this;
me.callParent(arguments);
me.down('button[text=Submit]').on('click',
me.onSubmitBtnClick, me);
me.down('button[text=Cancel]').on('click',
me.onCancelBtnClick, me);
},
onSubmitBtnClick: function () {


var conn = new Ext.data.Connection();


var est = Ext.getCmp('estimate');
alert(est.getValue());


conn.request({
method: 'POST',
url: 'tmp.php',
params: {
foo: "bar"},
success: function (responseObject) { alert(responseObject.responseText); },
failure: function () { alert(est); }
});
},
onCancelBtnClick: function () {

}
});


var form = Ext.getCmp('formJobSummary').getForm(); //returns form1
form.loadRecord(user);

ui/MyPanel.js



Ext.define('MyApp.view.ui.MyPanel', { extend: 'Ext.panel.Panel',


height: 600,
width: 950,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'JobPanel',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
flex: 1,
items: [
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'Job Summary',
items: [
{
xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
},
bodyPadding: 10,
title: '',
url: '/submit.html',
flex: 1,
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Submit'
},
{
xtype: 'button',
text: 'Cancel'
}
]
}
],
items: [
{
xtype: 'panel',
flex: 1,
items: [
{
xtype: 'radiogroup',
width: 400,
fieldLabel: 'Job Type',
items: [
{
xtype: 'radiofield',
boxLabel: 'Fix Price'
},
{
xtype: 'radiofield',
boxLabel: 'Production'
}
]
},
{
xtype: 'textfield',
id: 'quotedPrice',
name: 'quotedPrice',
fieldLabel: 'Quoted Price'
},
{
xtype: 'textfield',
id: 'clientPO',
name: 'clientPO',
fieldLabel: 'Client PO'
},
{
xtype: 'textfield',
id: 'jobQuantity',
name: 'jobQuantity',
fieldLabel: 'Job Quatity'
},
{
xtype: 'textfield',
id: 'filesOver',
name: 'filesOver',
fieldLabel: 'Files Over'
},
{
xtype: 'textfield',
id: 'previousJobId',
name: 'previousJobId',
fieldLabel: 'Previous JobId'
},
{
xtype: 'textfield',
id: 'estimate',
name: 'estimate',
fieldLabel: 'Estimate'
}
]
},
{
xtype: 'panel',
flex: 1
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1
}
]
}
]
},
{
xtype: 'panel',
title: 'Parts'
},
{
xtype: 'panel',
title: 'Process'
},
{
xtype: 'panel',
title: 'Invoice'
}
]
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'FooterPanel',
flex: 1
}
]
});


me.callParent(arguments);
}
});

mitchellsimoens
9 Jan 2012, 9:23 AM
Please wrap your code in code tags so it can be read easily. I wouldn't use the id config, I would use ComponentQuery to resolve components. id should only be used for debugging.

Anthony.Hall
9 Jan 2012, 10:53 AM
1) ok code reformatted.
2) do you think you can expand on your Component query. Any help would be must appreciate.

I've tried the following


var form = Ext.ComponentQuery.query('formJobSummary'); // formJobSummary is the id and name
form.loadRecord(user);


but i get the following.
form.loadRecord is not a function

Where should i be using ComponentQuery?

ero
12 Jan 2012, 9:17 AM
Using Ext.ComponentQuery you should be able to get it, but you need to put a # in front of the id you are querying.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery




var form = Ext.ComponentQuery.query('#formJobSummary');

slemmon
12 Jan 2012, 9:20 AM
To add to that, I've stopped using id and instead use itemId to reduce possible collisions.

Also, query will return all found components in an array. So, if you know you have one instance if '#jobFormSummary' you might include [0]:



var form = Ext.ComponentQuery.query('#formJobSummary')[0];

ero
12 Jan 2012, 9:37 AM
Good points.


To add to that, I've stopped using id and instead use itemId to reduce possible collisions.

Also, query will return all found components in an array. So, if you know you have one instance if '#jobFormSummary' you might include [0]:



var form = Ext.ComponentQuery.query('#formJobSummary')[0];