Extjs 4 - 以json格式检索数据并加载Store。 它发送OPTION请求

Question

I'm developing an app with Spring MVC and the view in extjs 4. At this point, i have to create a Grid which shows a list of users.

In my Spring MVC controller i have a Get method which returns the list of users in a jsonformat with "items" as a root.

 @RequestMapping(method=RequestMethod.GET, value="/getUsers")
 public @ResponseBody Users getUsersInJSON(){
     Users users = new Users();
     users.setItems(userService.getUsers());
     return users;
 }

If i try to access it with the browser i can see the jsondata correctly.

{"items":[{"username":"name1",".....

But my problem is relative to request of the Ext.data.Store

My Script is the following:

Ext.onReady(function(){

    Ext.define('UsersList', {
        extend: 'Ext.data.Model',
        fields: [
            {name:'username', type:'string'},
            {name:'firstname', type:'string'}
        ]
    });

    var store = Ext.create('Ext.data.Store', {
        storeId: 'users',
        model: 'UsersList',
        autoLoad: 'true',
        proxy: {
            type: 'ajax',
            url : 'http://localhost:8080/MyApp/getUsers.html',
            reader: {type: 'json', root: 'items'}
        }
    });



    Ext.create('Ext.grid.Panel',{
        store :store,
        id : 'user',
        title: 'Users',
        columns : [ 
            {header : 'Username',  dataIndex : 'username'}, 
            {header : 'Firstname', dataIndex: 'firstname'}
        ],
        height :300,
        width: 400,
        renderTo:'center'
    });
});

When the store tries to retrieve the data and launchs the http request, in my firebug console appears OPTIONS getUsers.html while the request in the browser launchs GET getUsers.html

As a result, Ext.data.Store has not elements and the grid appears with the columnames but without data. Maybe i've missed something

Thank you

Answer 1

You can change the HTTP methods that are used by the proxy for the different CRUD operations using actionMethods .

But, as you can see in the doc (and as should obviously be the case), GET is the default for read operations. So the OPTIONS request you are observing is quite puzzling. Are you sure that there's not another part of your code that overrides the default application-wide? Maybe do a search for 'OPTIONS' in all your project's JS files, to try and find a possible suspect. Apparently there's no match in the whole Ext code, so that probably doesn't come from the framework.

Edit:

Ok, I think I've got it. If your page is not accessed from the same domain (ie localhost:8080, the port is taken into account), the XHR object seems to resort to an OPTIONS request.

So, to fix your problem, either omit the domain name completely, using:

url: '/MyApp/getUsers.html'

Or double check that your using the same domain and port to access the page and make the requests.