PDA

View Full Version : url not defined when loading store with remote data?



zenbuffy
30 Aug 2011, 7:43 AM
Hi all,

Just wondering if you've come across this issue. I'm trying to put a list of clients into a store so that I can populate a component with them. I am using the following code:

Ext.define('ClientStorage', {
extend: 'Ext.data.Model',
fields: [
{name: 'clientId'},
{name: 'description'},
{name: 'DefinedField1'}
]
});


/* CLIENT DATA STORE */
this.clientDataStore = new Ext.data.Store({
model: 'ClientStorage',
action:'getUserClientList',
autoLoad: true
});

getUserClientList is a method in a Java Controller file which is linked to the js containing the above code. It returns a model and view containing the client list. Other stores I have set up like this have worked with data added to the store in the js, but once I try to pull data from the controller (as above), I keep getting this error:

url is undefined

return url + (url.indexOf('?') === -1 ? '?' : '&') + s; ext-all-debug.js (line 5040)

I've tried specifying the store a few different ways, and they all seem to be coming back with this error. Is anyone else experiencing this issue, or pulling data from controllers successfully? I'm at my wits end with this one. I'm new to ext js, and the code base I'm working on is all in EXT 3.3 (except for the bits I'm writing in 4), so the existing code is of little use to me in terms of providing samples, as they often break in 4. The code above, for example, works perfectly in the 3.3 codebase.

zenbuffy
30 Aug 2011, 8:15 AM
Possibly worth mentioning that I am using version 4.0.2a, in case this is relevant.

arthurakay
30 Aug 2011, 9:56 AM
"url is not defined" is pretty clear. Look at the API docs for Ext.data.Store() - you need to define a proxy, and the proxy (for requesting remote data) will need a "url" config defined so that the data store knows where to ask for the data.

Setting "autoLoad" to true tells the store to load automatically after instantiation, but it obviously doesn't know WHERE to load data from.

skirtle
30 Aug 2011, 10:09 AM
Please use code tags when posting code (# button on the editor toolbar).


getUserClientList is a method in a Java Controller file which is linked to the js containing the above code.

How is it linked? JavaScript running in the browser obviously can't invoke a Java method on the server directly. I would assume that the 'link' is via an HTTP request and whatever MVC or web framework you're using on the server knows how to translate a requested URL into a call to that method.


It returns a model and view containing the client list.

This sounds like something out of Spring MVC or a similar framework. I'm reading between the lines a little here but it seems that you don't have a good grasp of what is really going on in your application. At a guess, when the method returns a model and view it is then being serialized in some way, probably to JSON, and sent back to the browser as the response to the HTTP request.


the existing code is of little use to me in terms of providing samples

This is only partly true. It probably won't help with understanding ExtJS but it may help you to better understand the interactions between the sections of the application. Get yourself a copy of Firebug for Firefox or the Chrome Developer Tools and view the network traffic sent by your existing ExtJS 3 application. You should see a lot of Ajax requests being made to your server. It is these requests that get processed on the server to call your Java method. The returned model and view will then become the response, which you should also be able to see in the network tools mentioned above.


I'm new to ext js, and the code base I'm working on is all in EXT 3.3 (except for the bits I'm writing in 4)

May I ask why you are writing them in ExtJS 4 instead of 3? It's not a bad choice but it sounds like you're lacking in experience of both ExtJS and this particular application: feels like too many battles at once to me.

Now, to answer your actual question.

The store needs to get its data from somewhere. There are several different ways that a store can load data and these are unified behind an abstraction called a proxy. In your case I would guess that what you want is an Ajax proxy. Though there are many ways to configure an Ajax proxy the one thing it will always need is a URL for the request to the server.

The proxy can be placed on either the model or the store. Here's an example:


Ext.define('ClientStorage', {
extend: 'Ext.data.Model',
fields: [
{name: 'clientId'},
{name: 'description'},
{name: 'DefinedField1'}
],
proxy: {
url: 'myServerUrl.do',
reader: {
type: 'json'
}
}
});

In this example I've also configured a simple JSON reader. A reader is responsible for converting the response into a set of model objects, usually referred to as records.

In your original example you had a config option called action on your store. I'm not familiar with this option and from a quick look I can't find it anywhere. If this works in ExtJS 3 I would guess that whoever wrote the existing code for your application added in a hook somewhere to interpret this option and use it to generate request URLs. You might want to see whether you can track that down.

zenbuffy
31 Aug 2011, 12:25 AM
Thanks for the replies. I had read the docs about the proxy option but wasn't sure how to configure it. Re: the multiple battles, I know it! I'm new to spring architecture (having worked with Struts before) and new to EXT js, so I am trying to learn an awful lot at once. I've moved jobs and been given an assignment and, as a result, have little choice but to do all the learning at once.

We're using 4 because I'm writing a reporting module that will use the charting stuff. As it's much better in 4 (and changed significantly from 3.3), we deemed it more sensible to write it from the beginning in 4 rather than writing it in 3.3 and then essentially having to rewrite it when we decided to upgrade to 4 in the future. The rest of the application is being upgraded also, by another colleague.

I'm still trying to understand everything that's going on with the application, so it's entirely possible that I've missed a custom hook somewhere. I'll check again.

skirtle
1 Sep 2011, 12:10 PM
I'm new to spring architecture (having worked with Struts before)

I like Spring, when I need a Java MVC that's the one I use. From an ExtJS point of view it makes absolutely no difference what framework you have on the server. All communication is over HTTP so Ext has no visibility on that, it could be Spring, Struts, PHP, ASP, a Perl script... This is worth keeping in mind when you're trying to understand how things work.


We're using 4 because I'm writing a reporting module that will use the charting stuff.

Good reason.


The rest of the application is being upgraded also, by another colleague.

Suggest you talk to those colleagues to figure out how things work in your app.

shadow_m
2 Sep 2011, 8:26 AM
I have the same problem - all my UI and stores are generated by ExtDesigner.
How can I fix it?

tvanzoelen
9 Nov 2011, 9:35 AM
I have the same problem , and I can not find a fix



var treedatastore13 = Ext.create('ASLAS.data.TreeStore', {
model: 'ASLAS.tree.Model',
root: { id: 'root_0', leaf: true, text: 'async', expanded: false }
, proxy: { actionMethods: { create: 'POST'
, destroy: 'POST'
, read: 'POST'
, update: 'POST'}
, type: 'rest'
, reader: { type: 'json'
, root: 'data'
, idProperty: 'id'
, totalProperty: 'total'
, successProperty: 'success'
}
, url: 'treenode.jsn'
, extraParams: self.treefunctions.treepanelfunctions.getTreeNodeParams('clientusergrouptree', self.application.aslas_GUID)
}
});

var clientusergrouptree = Ext.create('as.tree', { itemId: 'clientusergrouptree',
screen: self,
stateful: false,
rootVisible: false,
viewConfig: { autoScroll: true },
tbar: toolbar10
, store: treedatastore13
});


My tree get perfectly loaded, but I get the error url ia undefined, when I don this:




treePanel.store.proxy.extraParams = self.treefunctions.treepanelfunctions.getTreeNodeParams(treePanel.itemId, self.application.getGUID());

treePanel.getSelectionModel().clearSelections(true);//not working that clearselection


treePanel.store.load({ callback: function(records, operation, success) {


}

}); //end load



Someone has a solution for this?

shinobivn
3 Jan 2012, 10:51 PM
Maybe this post is helpful: http://www.sencha.com/forum/showthread.php?154318-url-is-undefined-on-TreeStore