Question

我尝试将Ext.Direct与ExtJS 4 MVC结构一起使用，但我无法添加提供程序。

我在调用Uncaught TypeError: Cannot call method 'addProvider' of undefined时收到错误addProvider：

Ext.Direct.addProvider(Ext.app.REMOTING_API);

我在应用程序的launch和控制器的init中都尝试过。

Ext.define('Dir.Application', {
    require: [
        'Ext.direct.*',
        'Ext.data.*',
        'Ext.grid.*'
    ],
    launch: function(){
        Ext.Direct.addProvider(Ext.app.REMOTING_API);
    }
    ...
});

和

Ext.define('Dir.controller.Main', {
    init: function(){
        Ext.Direct.addProvider(Ext.app.REMOTING_API);
    }
    ...
});

都会出现同样的错误。

将addProvider放入代码的正确位置在哪里？

更新：应用@rixo。

的建议

Ext.define('Dir.Application', {
    view:['Grid'],
    requires: [
        'Ext.direct.*',
        'Ext.data.*',
        'Ext.grid.*'
    ],
    launch: function(){
        Ext.Direct.addProvider(Ext.app.REMOTING_API);
    }
    ...
});

我的观点是定义商店和代理：

Ext.define('Dir.view.Grid', {
    extend: 'Ext.grid.Panel',
    store: {
        proxy: {
            type: 'direct',
            reader:{root: 'table'},
            api: {
                create: QueryDatabase.createRecord,
                read: QueryDatabase.getResults,
                update: QueryDatabase.updateRecords,
                destroy: QueryDatabase.destroyRecord
            }
        }
    ...
    }

现在第一个错误是正常的，但我收到一个错误，抱怨QueryDatabase未定义。它是通过Ext.Direct.addProvider(Ext.app.REMOTING_API);处的提供程序定义的，但是当通过应用程序定义中的views: []声明加载视图时它还没有准备好。

有没有办法在Ext.application Ext.onReady {{1}}内嵌入{{1}}，如my solution？对于MVC方式，没有嵌套会更好，就像解释here in the docs一样。

Answer 1

您的应用程序定义中的require将不会执行任何操作。它应该是复数requires。

此外，您似乎已经在自己的答案中设计了这个，但名称Ext.direct.Manager似乎是Sencha对Ext.Direct现在的青睐。

修改

根据docs，您可以使用字符串设置直接函数。显然，这是为了解决您遇到的问题。

这应该可以解决您的问题：

api: { create: 'QueryDatabase.createRecord', read: 'QueryDatabase.getResults', update: 'QueryDatabase.updateRecords', destroy: 'QueryDatabase.destroyRecord' }

Answer 2

在调用提供程序之前，您可能缺少API定义，请参阅Sencha的示例页面中的此定义

Ext.ns("Ext.app"); Ext.app.REMOTING_API = {
"url": "php\/router.php",
"type": "remoting",
"actions": {
    "TestAction": [{
        "name": "doEcho",
        "len": 1
    }, {
        "name": "multiply",
        "len": 1
    }, {
        "name": "getTree",
        "len": 1
    }, {
        "name": "getGrid",
        "len": 1
    }, {
        "name": "showDetails",
        "params": ["firstName", "lastName", "age"]
    }], ...}]
} };

它应该作为javascript文件包含在您的网页中

 <script type="text/javascript" src="api.php"></script>

像this example之类的东西。

希望它有所帮助。

Answer 3

在Application构造函数运行之前，最好先添加Direct提供程序：

Ext.define('Foo.Application', {
    extend: 'Ext.app.Application',

    requires: [
        'Ext.direct.Manager',
        'Ext.direct.RemotingProvider'
    ],

    name: 'Foo',

    constructor: function() {
        Ext.direct.Manager.addProvider(...);

        this.callParent(arguments);
    }
});

Ext.application('Foo.Application');

Answer 4

我找到了这个解决方案：

Ext.require([
    'Ext.direct.RemotingProvider',
    'Ext.direct.Manager',
    'Ext.data.proxy.Direct'
]);
Ext.onReady(function(){
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
    Ext.application({
        name: 'Dir',
        extend: 'Dir.Application'
    });
});

它看起来不太好，因为它在Ext.onReady中使用ExtJS 4应用程序实例化。
至少它有效。也许有更好的解决方案？

如何初始化Ext.Direct？

更新：应用@rixo。

4 个答案: