使用 ExtJS 和 Spring 构建应用程序

Question

我正在学习 ExtJS 框架，用于实验我在前端 ExtJS 和后端 JavaEE Spring 框架（它被配置为 REST 服务）。
因此，我的前端部分从 localhost:1841 开始，后端部分从 localhost:8080 开始。问题是：

How I can say to ExtJS.Store that requests need to send to localhost:8080/** instead of localhost:1841/**?

对不起我的英语！

Answer 1

在 ExtJS 中有 singleton 你可以使用这个 class.

Singleton 模式是一种设计模式，它将 class 的实例化限制为仅一个对象。当整个系统只需要一个对象时，这很有用。单例模式提供对特定实例的单点访问。单例模式的实现必须满足单实例和全局访问原则。

For this "How I can say to ExtJS.Store that requests need to send to localhost:8080/** instead of localhost:1841/**?"

您可以在您的应用中使用如下代码：

Firstly create singletone class

/*
 * Create singletone class in your application
 * This class you can access in your application anywhere you want within the app.
 * Usage: 
 * commonUtility.getServerUrl();// whatever property you have defined inside of config you can access like this
 */
Ext.define('APPNAME.utils.SingleToneClassName', {
    alternateClassName: 'commonUtility',
    singleton: true,
    config: {
        /*
         * you can put local or live also or whatever you want.
         * for local it will be ip address like this {'http://192.168.30.83:8080/'}
         * for live is will be live tomcate  host  url {http://example.com/}
         */
        serverURL: 'http://192.168.30.83:8080/'
    },

    constructor: function(config) {
        var me = this;

        me.initConfig(config);
    },
});

Create/Define your store

//Your store
Ext.define('APPNAME.store.StoreName', {
    extend: 'Ext.data.Store',
    fields: ['your fields here'],
    storeId: 'storeIdHere',
    alias: "store.storeAliasHere",
    proxy: {
        type: 'ajax',
        url: commonUtility.getServerUrl() + 'your Server Method name here', //Based on your server URL acceptance
        withCredentials: true,
        reader: {
            type: 'json',
            rootProperty: 'data',
            keepRawData: true
        }
    },
    autoLoad: true, //If you need auto load then put true otherwise false
    listeners: {
        beforeload: function(store, operation, options) {
            //If you have token based authenthication then you need to put like below
            store.getProxy().setHeaders({
                "x-auth-token": 'your token here'
            });
            //If you have need to pass some  parameter in API method then you can pass like below
            store.getProxy().extraParams.your_parameter_name = 'value';
        }
    },
});

//If you want to load your store on some event or any other functions
//then

Ext.getStore('your_storeId_herer').load({
    url: commonUtility.getServerUrl() + 'your Server Method name here', //Based on your server URL acceptance
    params: {
        //If you have need to pass some params in server side then 
        //you put here like
        name: 'value'
    }
});

希望对您有所帮助。有关详细信息，您可以参考 ExtJS6.x 文档

使用 ExtJS 和 Spring 构建应用程序

Build app with ExtJS and Spring

spring

tomcat

sencha-cmd

extjs6-classic