PDA

View Full Version : Populate data on change of text field



jenis35@yahoo.co.in
6 Aug 2012, 9:56 PM
Hi,

I have 3 text fields in a form panel. If I add text in one of the text field, the other should populate data from database. How do I do this? Could anyone please help me out ?

Thanks.
J.M.

Farish
6 Aug 2012, 10:53 PM
you can add a listener on the change event of the textfield.


textfield.on('change', function() {
// get data from server here and use setValue() method to set the values to the other fields.
});

jenis35@yahoo.co.in
6 Aug 2012, 11:10 PM
Hi Farish,

I do have added listeners as mentioned below, but how will I get server data and pass the parameter?



{
xtype : 'textfield',
name : 'studentId',
fieldLabel : 'Student Id',
listeners : {
'change' : function() {
//alert('you changed the text of this input field');

}
}


}, {
xtype : 'textfield',
name : 'stdFirstName',
fieldLabel : 'Student First Name'


}, {
xtype : 'textfield',
name : 'stdLastName',
fieldLabel : 'Student Last Name'


}

evant
6 Aug 2012, 11:16 PM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Connection-method-request

Farish
6 Aug 2012, 11:24 PM
see the documentation at the link posted above. you can send an AJAX request and from the response, fill in data to the other text fields.

wozsoft
6 Aug 2012, 11:46 PM
The full answer to your question depends on a few things about your application, including;
What type of database do you have ?
Are you using a store on the client side ?
Do you have an understanding of the Ext.ComponentManager ?
If you are sending a request to a data server then it might be worth populating a combobox with the keys you will be using to retrieve your data set. Then you can use 'select' instead 'change' in your listener to fire your update of your other two fields.

If you have your server side set up correctly, your model and your store and your combobox all working then you can select your chosen option in your combo box, fire a 'select' in your listeners and then use something like this to populate your other fields;




Ext.ComponentManager.get('stdFirstName').setValue(records['0'].data.StudentFirstName);
Ext.ComponentManager.get('stdLastName').setValue(records['0'].data.StudentLastName);



Provide some extra info and I can post some code for all the elements you need.

evant
6 Aug 2012, 11:59 PM
There's several things in your code I wouldn't recommend doing:

1) Ext.ComponentManager.get (FYI an alias Ext.getCmp exists) is probably overkill here. A ComponentQuery would probably be more suitable.

2) Array indexes should certainly not be strings.

3) Accessing model data should go through get().

jenis35@yahoo.co.in
7 Aug 2012, 10:46 AM
Hi Wozsoft,

For your questions:
I am using Oracle database. I am using proxy in the grid to bring the data. I have some understanding of component manager, but not much..

I will try your suggestions and will let you know if getting some errors.

Thanks.
J.M.

wozsoft
7 Aug 2012, 11:40 AM
If you have a grid that is displaying your data correctly then it is using a store that you can access to populate your text fields.

Use Ext.data.StoreManager to access the store you are using for your grid.




var MyStoreManager = Ext.data.StoreManager;
var StudentStore= MyStoreManager.get('Students'); // replace Students with your grid store



Now you can get the values you want from the StudentStore using either .getById() or .getAt() provided that your student id is a unique id in the store. These methods return a model object that you can then use to populate your text fields using .getValue() method.

There are many ways to access your apps components and then use their .setValue() method. I recommend starting with Ext.ComponentManager so that you get an idea of how it works and the importance of careful use of id: in ExtJS

Read through the API docs, it is all there. Post again if you get stuck.

wozsoft
7 Aug 2012, 11:49 AM
Rather than type in a student number you could load the model (record) you get from your grid store into a properly set-up form by having a click or double-click listener on your grid.

There is a good example in the documentation under the forms heading.

jenis35@yahoo.co.in
7 Aug 2012, 4:52 PM
Hi Wozsoft,

Thanks for your reply. But I think I made you confuse. I do use grid, but just to list the records from other table. I have application in which I am doing CRUD operations. Coming back to my question, I am using Ext.window.Window and in that, having certain form fields. for example, studentId, studentFirstName, studentLastName. So, once I enter studentId, it has to bring firstname and lastname from database.

I do understand the method you are specifying. But for that, I have to hide my grid panel as I don't have to show that grid to the users and that seems to be insecure too.

Right now, I am trying to use Ext.Ajax.Request to pass my parameters back to spring controller and then return the response, Let me try it out and will get back to you.



Thanks.
J.M.

jenis35@yahoo.co.in
8 Aug 2012, 10:47 AM
Hi,

I am having trouble accessing my data from Controller class..


Ext.Ajax.request({
url : 'XXXXX/fetchInstr.action',
params : {
studentId: this.value
},
success : function(response, opts) {
var jsonResp = Ext.decode(response.responseText);

console.dir(jsonResp);
console.dir(jsonResp.firstName);
},
failure : function(response, opts) {
console.log('server-side failure with status code '
+ response.status);
}
});

I am able to see values in jsonResp (using firefox firebug), but when I try to get 'firstName' value using jsonResp.firstName, it says that, 'there are no child objects'. My response object has 'firstName as a attribute. What can be the problem?

jenis35@yahoo.co.in
8 Aug 2012, 10:54 AM
stupid me !! I was trying to access value using console.dir . got my values after using console.log. Still, I am suppose to solve my problem of setting values in component. Will update here.

Thanks.
J.M.

jenis35@yahoo.co.in
8 Aug 2012, 11:50 AM
Hi,

I tried to set the values using Ext.ComponentManager but it did not work. Here is my code.. I want to set the value of firstname from id. I am getting the id value from server, but not able to set that in firstname and lastname fields. Please help.



Ext.define('sample.view.student.Edit', {
extend : 'Ext.window.Window',
alias : 'widget.studentedit',


requires : ['Ext.form.Panel', 'Ext.form.field.Text',
'Ext.form.field.ComboBox'],


title : 'student dtls',
layout : 'fit',
autoShow : true,
width : 280,


iconCls : 'icon-user',


initComponent : function() {
this.items = [{
xtype : 'form',
padding : '5 5 0 5',
border : false,
style : 'background-color: #fff;',


fieldDefaults : {
anchor : '100%',
labelAlign : 'left',
allowBlank : false,
combineErrors : true,
msgTarget : 'side'
},


items : [ {
xtype : 'textfield',
name : 'studentId',
fieldLabel : 'studentId',
listeners : {
blur : function() {
// fnDataForm(this.value);
Ext.Ajax.request({
url : 'student/fetchDtls.action',
params : {
guiInstrId : this.value
},
success : function(response, opts) {
var jsonResp = Ext
.decode(response.responseText);


console.dir(jsonResp);
console.log(jsonResp.studentFirstName);
// How to set jsonResp.studentFirstName value in below textfield ?
this.up('form').getForm().getValues().studentFirstName.setValue(jsonResp.studentFirstName);
},
failure : function(response, opts) {
console
.log('server-side failure with status code '
+ response.status);
}
});
}
}


}, {
xtype : 'textfield',
name : 'studentFirstName',
fieldLabel : 'student First Name'


}, {
xtype : 'textfield',
name : 'studentLastName',
fieldLabel : 'student Last Name'


}]
}];

jenis35@yahoo.co.in
8 Aug 2012, 2:36 PM
Hi ,

I got this worked by help of Scott.


{ xtype: 'textfield', name: 'studentFirstName', itemId: 'studentfirstname', fieldLabel: 'student First Name'}..var form = this.up('form'), sfn = form.down('#studentfirstname');sfn.setValue(sonResp.studentFirstName);
Thanks guys !!

J.M.

Hi,

I tried to set the values using Ext.ComponentManager but it did not work. Here is my code.. I want to set the value of firstname from id. I am getting the id value from server, but not able to set that in firstname and lastname fields. Please help.



Ext.define('sample.view.student.Edit', {
extend : 'Ext.window.Window',
alias : 'widget.studentedit',


requires : ['Ext.form.Panel', 'Ext.form.field.Text',
'Ext.form.field.ComboBox'],


title : 'student dtls',
layout : 'fit',
autoShow : true,
width : 280,


iconCls : 'icon-user',


initComponent : function() {
this.items = [{
xtype : 'form',
padding : '5 5 0 5',
border : false,
style : 'background-color: #fff;',


fieldDefaults : {
anchor : '100%',
labelAlign : 'left',
allowBlank : false,
combineErrors : true,
msgTarget : 'side'
},


items : [ {
xtype : 'textfield',
name : 'studentId',
fieldLabel : 'studentId',
listeners : {
blur : function() {
// fnDataForm(this.value);
Ext.Ajax.request({
url : 'student/fetchDtls.action',
params : {
guiInstrId : this.value
},
success : function(response, opts) {
var jsonResp = Ext
.decode(response.responseText);


console.dir(jsonResp);
console.log(jsonResp.studentFirstName);
// How to set jsonResp.studentFirstName value in below textfield ?
this.up('form').getForm().getValues().studentFirstName.setValue(jsonResp.studentFirstName);
},
failure : function(response, opts) {
console
.log('server-side failure with status code '
+ response.status);
}
});
}
}


}, {
xtype : 'textfield',
name : 'studentFirstName',
fieldLabel : 'student First Name'


}, {
xtype : 'textfield',
name : 'studentLastName',
fieldLabel : 'student Last Name'


}]
}];