如何通过ExtJs 5.0中的ajax调用更新选项卡后强制rerendeing？

我主要页面的选项卡控件：如何通过ExtJs 5.0中的ajax调用更新选项卡后强制rerendeing？

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.MET MVC局部视图）包含一个网格，从外部填充休息（的ASP.NET Web 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>

它的工作原理，但无法正常：

当我选择第二个选项卡没有任何反应
我选择第一个选项卡背面
然后再次选择第二个选项卡，现在电网是可见

如何强制更新之后重新描绘？

来源

2014-10-28 abatishchev

你尝试component.updateLayout？ – Luiguis 2014-10-29 15:06:16

@Luiguis：没有运气。至少在我试过的地方。不知道我做对了。我应该何时何地打电话给你，你知道吗？谢谢！ – abatishchev 2014-10-29 17:14:56

感谢@Luiguis，我发现那里打电话updateLayout()：

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

来源

2014-10-29 19:23:29 abatishchev

如何通过ExtJs 5.0中的ajax调用更新选项卡后强制rerendeing？

回答

相关问题