Ext.grid.Panel跨域加载外部接口时jsonp代理请求未发送问题求助

1. Store配置冲突：你修改代理后没有删除原有data静态数据配置，ExtJS中Store存在data配置时会优先加载本地静态数据，不会触发代理请求，这是请求没有发出的最核心原因。
2. JSONP依赖后端支持：JSONP的实现原理是动态插入<script>标签加载跨域资源，要求后端必须配合返回JSONP格式的响应。你用fetch加no-cors模式请求仅能保证请求被发送，但是返回的是不透明响应，无法读取返回数据，和JSONP的工作逻辑完全不匹配，不能证明接口符合JSONP要求。
3. 未触发加载逻辑：如果你的Store没有配置autoLoad: true，修改代理后也没有手动调用load()方法，也不会主动发起请求。

• 首先删除Store定义中的data配置段，清理静态本地数据冲突：

Ext.define('MyApp.store.Personnel', {
    extend: 'Ext.data.Store',
    alias: 'store.personnel',
    model: 'MyApp.model.Personnel',
    // 删除原有的data配置
    autoLoad: true, // 新增自动加载配置
    proxy: {
        type: 'jsonp',
        url: 'http://localhost:62770/api/user',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

• 调整后端接口适配JSONP要求：ExtJS的JSONP代理会自动在请求URL后追加callback查询参数，后端需要读取该参数的值，将原本的JSON返回值包裹在该回调函数中返回。例如请求URL为http://localhost:62770/api/user?callback=Ext.data.JsonP.callback1时，后端返回格式应为：

Ext.data.JsonP.callback1({
    "items": [
        { "name": "Jean Luc", "email": "jeanluc.picard@enterprise.com", "phone": "555-111-1111" },
        // 其余数据项
    ]
})

• 如果不想使用JSONP，更推荐改为CORS跨域方案：在后端接口配置Access-Control-Allow-Origin等跨域响应头，将Store代理改回普通ajax类型即可正常请求，不需要使用no-cors模式。

内容的提问来源于stack exchange，提问作者Владимир В