PDA

View Full Version : On Change Event question



mauprice
5 Feb 2012, 5:12 PM
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);

aconran
6 Feb 2012, 12:36 PM
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


myStore.load({
params: {
filter: newValue
}
});

aconran
6 Feb 2012, 12:37 PM
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')

mauprice
6 Feb 2012, 3:44 PM
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.

aconran
6 Feb 2012, 5:15 PM
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.




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.



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.

mauprice
8 Feb 2012, 7:43 PM
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.


31511

31512

31513

aconran
9 Feb 2012, 12:38 AM
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.

mauprice
9 Feb 2012, 1:15 AM
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_chart_test/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