Get textfield value which is inside the custom fieldcontainer

[nil5286]

I am using extjs 4.1 and have a custom field i.e within the fieldcontainer i have a img and textfield, How to get the value of textfield which i need to pass in a ajax request on the change of textfield value.



Ext.define('PTextField', {
extend: 'Ext.form.FieldContainer',
alias: 'widget.ptextfield',
requires: ['Ext.form.TextField', 'Ext.Component'],
alias: 'widget.ptextfield',
height: 20,
width: 70,
layout: {
type: 'hbox'
},
BLANK_IMAGE_URL: '',
items: [{
xtype: 'component',
height: 20,
width: 20,
autoEl: { tag: 'img', src: Ext.BLANK_IMAGE_URL }
}, {
xtype: 'textfield',
fieldLabel: '',
labelAlign: 'top',
width: 50
}]
});




Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: [{
xtype: 'ptextfield',
id: 'pcontainer1',
listeners: {
change: {
element: 'el', //bind to the underlying el property
fn: function () {
var me = this;
Ext.Ajax.request({
waitMsg: 'Saving changes...',
url: '/Services/SaveChanges',
jsonData: { id: this.id, value: "textfieldValue" },
failure: function (response, options) {
Ext.MessageBox.alert('Warning', 'Oops...');
},
success: function (response, options) {
var text = response.responseText;
// process server response here
console.log('Changes saved successfully.');
}
});


}
}
}
}, {
xtype: 'ptextfield',
id: 'pcontainer2'
}]
}).show();



How can i fetch the textfield Value to be passed in the ajax request for the below line:
jsonData: { id: this.id, value: textfieldValue },

Any help is appreciated.

[arthurakay]

Have you looked at the ComponentQuery?
- http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery

[nil5286]

I am not sure whats wrong with the below componentquery.

jsonData: { id: this.id, value: this.down('textfield').getRawValue() },

But what i get is the error in firebug saying:

Uncaught TypeError: cannot call method getRawValue of null.

this.down('textfield'): null

Am i doing anything wrong any help is appreciated.

[scottmartin]

Try giving it an itemId and then use down('#itemid') to be more specific

Scott.

[nil5286]

Tried but no luck.


{
xtype: 'textfield',
itemId: 'textid',
width: 50
}



jsonData: { id: this.id, value: this.down('#textid').getRawValue() }

i am getting the same error : this.down('#textid') is null

[scottmartin]

In looking at your define, you need to add your items inside initComponent()



Ext.define('PTextField', {
extend: 'Ext.form.FieldContainer',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [ .. ]
});

me.callParent(arguments);
}

});

Scott.

[nil5286]

I appreciate for your time Scott but the thing is still not working the same error again:

Uncaught TypeError: Cannot call method 'getRawValue' of null CustomTextField:66
Ext.create.items.listeners.change.fn CustomTextField:66
(anonymous function)
Ext.apply.createListenerWrap.wrap

Below is my code for your reference:



Ext.onReady(function () {


Ext.define('PTextField', {
extend: 'Ext.form.FieldContainer',
alias: 'widget.ptextfield',
requires: ['Ext.form.TextField', 'Ext.Component'],
alias: 'widget.ptextfield',
height: 20,
width: 170,
fieldLabel: 'A',
labelAlign: 'top',
layout: {
type: 'hbox'
},
BLANK_IMAGE_URL: '',


initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'component',
height: 20,
width: 20,
autoEl: { tag: 'img', src: Ext.BLANK_IMAGE_URL }
}, {
xtype: 'textfield',
itemId: 'textid',
width: 100
}]
});
this.callParent(arguments);
}
});




Ext.create('Ext.window.Window', {
title: 'Hello',
height: 400,
width: 400,
//layout: 'fit',
items: [{
xtype: 'ptextfield',
fieldLabel: 'First Name',
id: 'pcontainer1',
listeners: {
change: {
element: 'el', //bind to the underlying el property
fn: function () {
var me = this;
Ext.Ajax.request({
waitMsg: 'Saving changes...',
url: '/Home/SaveChanges',
jsonData: { id: this.id, value: this.down('#textid').getRawValue() },
failure: function (response, options) {
Ext.MessageBox.alert('Warning', 'Oops...');
},
success: function (response, options) {
var text = response.responseText;
// process server response here
console.log('Changes saved successfully.');
}
});




}
}
}
}, {
xtype: 'ptextfield',
fieldLabel: 'Last Name',
id: 'pcontainer2'
}]
}).show();
});

[scottmartin]

Place the itemId in the create, not the define.

{
xtype: 'ptextfield',
itemId: 'textid', // create id (itemid) for this instance
fieldLabel: 'First Name',
// id: 'pcontainer1', // do not use id
}

Scott.

[nil5286]

I am not sure how this will work but my ptextfield is created by extending a "FieldContainer" which has items img and textfield and what i want is to access the textfield value from ptextfield which is fieldcontainer.

jsonData: { id: this.id, value: this.down('#textid').getRawValue() },

where "this.down(#textid').getRawValue()" should give me textfield value, which i am not getting i am not able to traverse.

{
xtype: 'ptextfield',
itemId: 'textid', // create id (itemid) for this instance
fieldLabel: 'First Name',
// id: 'pcontainer1', // do not use id
}


so setting the itemId for ptextfield and doing "this.down('#textid')" is giving me null as "this" and "#textid" both represent "fieldcontainer" and i want to access the textfield value inside the fieldcontainer.


In the below line i am getting "ptextfield" fieldcontainer in "this" and "this.id" is giving me "pcontainer1"
but i am not able to figure out how to get the "value" of textfield which is sitting inside the "ptextfield" fieldcontainer.


jsonData: { id: this.id, value: this.down('#textid').getRawValue() }