Populate data on change of text field

[[email protected]]

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]

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.
});

[[email protected]]

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]

http://docs.sencha.com/ext-js/4-1/#!...method-request

[Farish]

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]

The full answer to your question depends on a few things about your application, including;

1. What type of database do you have ?
2. Are you using a store on the client side ?
3. 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]

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().

[[email protected]]

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]

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]

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.