如何在ExtJs 5.0中通过ajax调用在更新选项卡后强制重新索引

How to force rerendeing after updating tab by ajax call in ExtJs 5.0?

本文关键字：索引 选项 新索引 更新 ExtJs 调用 ajax      更新时间：2023-09-26

我有一个带有选项卡控件的主页面：

Ext.define("Test.index.TabsController", {
    extend: "Ext.app.ViewController",
    alias: "controller.tabs-controller",
    onTabChange: function (panel, newItem, oldItem) {
        if (!newItem.html && newItem.loader) {
            newItem.loader.load();
        }
    }
});
Ext.define("Test.index.Tabs", {
    extend: "Ext.tab.Panel",
    controller: "tabs-controller",
    listeners: { tabchange: "onTabChange" },
    items: [
        {
            title: "Static Tab",
            html: "This is static tab",
        }, {
            title: "Ajax Tab",
            loader: {
                loadMask: true,
                removeAll: true,
                url: 'views/ajax.html',
                contentType: "html",
                scripts: true,
                renderer: function (loader, response, request) {
                    loader.getTarget().update(response.responseText, request.scripts === true);
                    return true;
                }
            }
        }
    ]
});
Ext.create("Test.index.Tabs", {
    renderTo: Ext.get("tabs")
});
<div id="tabs"></div>

还有一个单独的资源（我尝试了静态html文件和ASP.METMVC部分视图），其中包含从外部rest（ASP.NETWebneneneba API）Web服务填充的网格：

Ext.define("Test.models.Test", {
    extend: "Ext.data.Model",
    fields: ["name", "updateDate"]
});
var userStore = Ext.create("Ext.data.Store", {
    model: "Test.models.Test",
    autoLoad: true,
    autoSync: true,
    proxy: {
        type: "rest",
        url: "http://localhost/api/test",
        reader: {
            type: "json"
        }
    },
});
Ext.create("Ext.grid.Panel", {
    renderTo: Ext.get("container"),
    store: userStore,
    columns: [
        {
            text: "ID", dataIndex: "id"
        }, {
            text: "Name", dataIndex: "name"
        }
    ]
});
<div id="container"></div>

它工作但不正常：

  • 当我选择第二个选项卡时，什么也没发生
  • 我选择后面的第一个选项卡
  • 然后再次选择第二个选项卡，现在网格可见

如何在更新后立即强制重新报价？

感谢@Luiguis，我找到了调用updateLayout():的位置

renderer: function (loader, response, request) {
    var callback = function () {
        loader.getTarget().updateLayout();
    };
    loader.getTarget().update(response.responseText,
                              request.scripts === true,
                              callback);
    return true;
}
相关文章：