ExtJS: ajax based search form - extjs

I have an Ext.form.Panel that calls a PHP page by passing search parameters. The PHP page executes a query based on those params and returns a JSON structure. In the form-success handler I would like to get the JSON, build a store and fill a grid.
How can I do it using ajax? If I use Ext.form.panel submit() it always invoke onFailure because it does not find [{success:val,message:msg}]. Which is the correct way to build a form that gets back a JSON string?

Why don't you just have your search panel call a load() action on grid's JsonStore? A lot easier than manually flling the store from JSON string.

Related

How to call angularjs function while adding data to a json array?

As I have mentioned in this question, I have a function that returns a different text based on an input.
This is working fine when I use it in static text areas, like below:
<td>{{('input_text'|fnName:dataObject:'query_param')}}</td>
How can I call this function while I am assigning data to a json object? Originally the input_text is added to the json, but I need to run a lookup and replace the text.
EDIT: The json object is assigned to a dropdown, but I doubt if I will be able to call my function in the dropdown attributes.
p.s. The content in dataObject could change while using the application; so the function should be invoked with the latest data.
Try setting the filter's $stateful property to true.
https://stackoverflow.com/a/35563980/4028303
This should make the filter re-run upon digest cycles, even if the left-side data being passed in hasn't changed.

angular form submit get action append key value pairs

My goal was to have off a form submit for a get to be performed and as part of the uri, key value pairs appended like the following:
// GET /pets/42;q=11;r=22
Reading http://www.w3schools.com/tags/att_form_method.asp
description of form with setting form method to "get" I would have thought this was possible. In the world of angular, it seems like the expected behavior for a submit of a form results in post method. The controller can be written to generate any http verb but has the $http.get doesn't do what plain form get method would automatically and to generate a url like above, the controller would have to build the uri itself.
My apprehension of always using post off a form submit was the form in this case was part of a query/search action and not a data creation exercise. Maybe that's not the proper way to use form but has angular done away with automatically appended values from controls in key value pairs for a form with the $http.get service?
Of course you can do GET with query params in url.
The easiest way is to pass an object representing the key/value pairs to the params property of the $http config object.
var params = {q: 11, r:22};
$.get('/path/to/server/', {params: params}).then(....
Alternatively you can also create your own url string when you only have small number of params.
For further details read through the Usage section of $http docs

Passing Data vs. Separate Request in AngularJS using ngResource

I'm new to angular and trying to figure out how best to accomplish this.
Say you have set up an ngResource factory to get a bunch of widgets . You return those widgets(GET /api/widgets) and display them on the page in a list.
Now say you can edit those widgets in a dialog box by clicking an edit button next to the object in the list. Is it better practice to pass the individual widget's data (that was already retrieved by the first $resource call) to the edit dialog, or simply pass an ID parameter to the dialog box and have it resolve it's own $resource call using a separate GET /api/widgets/:widgetID call.
The data wouldn't realistically change between loading the list and clicking the edit button, so it doesn't need to be synced to the exact second. Both of these requests would come from the same factory, but the question is if you should store the data and pass it, or execute a separate request.
I don't see a reason to fetch it again, I would just reuse the object.

ExtJs determine visibility on form load

In Extjs 3.4 I have a fairly large form that is being populated from an ajax call via someForm.getForm().load({url: someplace, etc}) which is working flawlessly. The problem I can't seem to get around though, is that there are several comboboxes and checkboxes that determine if another field is visible and allowBlank.
As per the answer on a similar question I have tried using the actioncomplete event on the form but the fields do not have values at that point. I've also tried using the success event of the load() call but get the same issue.
Is there any other ways of getting this functionality from the form.load() call?
Edit - here is my load call:
var panel = Ext.getCmp('someFormID');
panel.getForm().load({
method: 'GET',
url: 'ajax_get_request.aspx?id=' + id,
success: function (form) {
// This will error: object is null or undefined
alert(form.findField('fieldID').getValue());
}
});
I'm relatively new to Extjs so maybe I'm just missing something here...
Not sure why hooking into success callback of Ext.form.BasicForm.load() fails for you, but I can propose an alternative approach.
I usually use explicit Ext.Ajax.request() call to load data into Ext.data.Record. Then in request()'s success callback I load data into form using Ext.form.BasicForm.loadRecord(). If you need to act upon loaded values, you can do it in the same callback.
I do it this way, because I like to have original values from the server stored somewhere aside.

JsonStore - Load single record with a restful url?

All,
I have a JsonStore backing a form panel in my extjs app. I want to have the jsonStore load a single record based on an id value, but haven't found a good way to do that yet, and still keep the url restful.
My first attempt was to add a param to the jsonstore load() method with the id in it. That only adds the id as a request param, not attached to the url:
http://my-app/users/?id=123
instead of what i want:
http://my-app/users/123
Can someone help me out with this?
You can manually construct the URL that the store uses to query for data (via the implicit HttpProxy it creates for the URL). So your loading function would look like:
function store_refresh() {
json_store.proxy.conn.url = 'http://my-app/users/' + user_id;
json_store.reload();
}

Resources