如何通过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>
它的工作原理,但无法正常:
- 当我选择第二个选项卡没有任何反应
- 我选择第一个选项卡背面
- 然后再次选择第二个选项卡,现在电网是可见
如何强制更新之后重新描绘?
答
感谢@Luiguis,我发现那里打电话updateLayout()
:
renderer: function (loader, response, request) {
var callback = function() {
loader.getTarget().updateLayout();
};
loader.getTarget().update(response.responseText,
request.scripts === true,
callback);
return true;
}
你尝试component.updateLayout? – Luiguis 2014-10-29 15:06:16
@Luiguis:没有运气。至少在我试过的地方。不知道我做对了。我应该何时何地打电话给你,你知道吗?谢谢! – abatishchev 2014-10-29 17:14:56