Results 1 to 8 of 8

Thread: On Change Event question

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    4

    Question On Change Event question

    I'm currently evaluating The Sencha development tools and I'm a little unsure of a few things.
    I want to be sure that I will be able to build my application using Sencha tools before I purchase it.

    What I'm trying to find out is, how to trigger an event from a textfield.

    I have set an on change event handler for the text box, but I'm unsure how to put the code in to get the input value of the field and send it to the server to run a PHP script and return the data to the Grid.

    It's a little bit confusing.

    You can see my test application on the link below.
    http://119.161.78.5:82/ext_js_gridTest/designer.html

    What I'm trying to do is type in a test input, send the text to a PHP script and return the result to repopulate the data-Grid.

    Is there anyone that knows the code syntax I would need to use on the change event.

    I have an alert box being triggered bit I don't know how to target the text field to send the value of the text field.

    Thanks

    More Info:
    I have this.id.getValue(); but I get an error.
    Uncaught TypeError: Cannot call method 'getValue' of undefined

    I'm new to the Sencha framework, and some help would be much appreciated.

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


    initComponent: function() {


    var me = this;
    me.callParent(arguments);
    },


    onTextfieldChange: function(field, newValue, oldValue, options) {
    var searchText = this.search.getValue();
    alert(searchText);

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    mauprice -

    Welcome to the Sencha development community. The text field change event exposes the newValue as an argument.

    Where you've place your alert, you could put in alert(newValue) and see the value that has been typed in. Typically when we do searches like this we will want to buffer the event handler. You should set the buffer configuration to 400ms (ie wait until the user stops typing for 400ms before acting). This will make it so that every keystroke doesnt generate an Ajax request to your serverside.

    Once you have this value, you will want to grab a reference to your datastore that your grid is bound to and invoke the load method on the store passing the new value as your filter. For example
    Code:
    myStore.load({
       params: {
          filter: newValue
       }
    });
    Aaron Conran
    @aconran

  3. #3
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Quote Originally Posted by mauprice View Post
    var searchText = this.search.getValue();
    alert(searchText);
    this.search is not going to work. If you have given the search field an itemId of 'search' you could retrieve it via this.getComponent('search')
    Aaron Conran
    @aconran

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    4

    Default

    Thanks so much for your help, I will try what you have suggested.


    myStore.load({ params: { filter: newValue }});
    I'm a little out of my depth with this at the moment trying to get up to speed with it.

    But the code above will assume that I have loaded all the data from the database table which would mean loading over 100,000 rows of data and then applying the filter to it.

    Is there a way I can use the string value from the newValue variable and send it to the server and have the PHP file run the query based on the newValue string.

    What I am looking for is a way to do a send and receive function. Where I can send the server some data and the server sends back the result which load s into the datagrid.

    What would you suggest in this case?

    I have looked at the doc's and don't see what I am looking for. In ActionScript I use a SendReceive function. I'm hoping there is something like this.

  5. #5
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Quote Originally Posted by mauprice View Post
    Thanks so much for your help, I will try what you have suggested.

    myStore.load({ params: { filter: newValue }});
    I'm a little out of my depth with this at the moment trying to get up to speed with it.
    This code says request the store to load a set of data with the parameters of filter=Whatever. It will be posted as a form field and called filter.


    Quote Originally Posted by mauprice View Post
    But the code above will assume that I have loaded all the data from the database table which would mean loading over 100,000 rows of data and then applying the filter to it.
    I would NOT recommend this approach. Thats too many records to load on the client side and filter locally.

    Quote Originally Posted by mauprice View Post
    Is there a way I can use the string value from the newValue variable and send it to the server and have the PHP file run the query based on the newValue string.

    What I am looking for is a way to do a send and receive function. Where I can send the server some data and the server sends back the result which load s into the datagrid.

    What would you suggest in this case?
    The code I posted above will do this.
    Aaron Conran
    @aconran

  6. #6
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    4

    Question I have added an eventBinding to a combo box but it is not triggering the event code.

    The event code is just an alert box at this stage, I'm not sure why the change event is not being triggered.

    does anyone have any suggestions to why the event is not triggered?

    I have put some screen shots of of what I have done.


    combo_img1.jpg

    combo_img2.gif

    combo_img3.jpg

  7. #7
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    mauprice -

    Could you create a small test case of what you are trying to do? Then we can look at the project and see where the problem is.
    Aaron Conran
    @aconran

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    4

    Default

    Hi Aaron,

    Thanks for taking the time to look into this small issue.

    Here is the link to the test app I have built: http://fedpest.com/ext_js/ext_js_cha.../designer.html

    When I select an item in the Year Combo Box and click on an item in the list, I thought it would be picked up by the change onYearChange event listener.

    But it seems to ignore it.

    What is it that I have not done?

    Cheers
    Maurice

Posting Permissions

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