Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Populate data on change of text field

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    USA
    Posts
    29
    Answers
    2

    Default Answered: Populate data on change of text field

    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.


  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    you can add a listener on the change event of the textfield.

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

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    USA
    Posts
    29
    Answers
    2

    Default

    Hi Farish,

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

    Code:
    {
    						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'
    
    
    					}

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    Answers
    759
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,102
    Answers
    113

    Default

    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.

  6. #6
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Brisbane, Australia
    Posts
    6

    Default Can you provide some more information please?

    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;

    PHP Code:

    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.

  7. #7
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    Answers
    759

    Default

    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().
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Location
    USA
    Posts
    29
    Answers
    2

    Default

    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.

  9. #9
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Brisbane, Australia
    Posts
    6

    Default If your grid displays your data then most of the work is done

    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.

    Code:
    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.

  10. #10
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Brisbane, Australia
    Posts
    6

    Default you can also use form load

    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.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

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