I used the following code to create a View that I could update with JSON data.
I was trying to update a Ext.View by manually reading JSON records into the view's store and refreshing the view using the following code.
The code would execute but the view was never refreshed. After digging into the debug code, I found that the following existed at line 9079:
this.prepareData uses an argument r that doesn't appear to exist.
tpl.apply(data) should either be this.tpl.apply(data) or t.apply(data)
After making those changes, the view refreshed as expected.
var Root = Ext.data.Record.create([
{name: 'refId', mapping: 'refId'},
{name: 'displayType', mapping: 'displayType'},
{name: 'systemName', mapping: 'systemName'},
{name: 'title', mapping: 'title'},
{name: 'parentKeyName', mapping: 'parentKeyName'},
{name: 'urlArgs', mapping: 'urlArgs'},
{name: 'cls', mapping: 'cls'}
]);
var sectionReader = new Ext.data.JsonReader({
root: 'root',
id: 'refId'
}, Root);
var sectionDS = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(),
reader: sectionReader
});
var tplSection = new Ext.Template( '<div class="{cls}" id="{refId}" name="{systemName}" type="{displayType}" display="{title}" title=">>Load {title} Menu" key="{parentKeyName}" args="{urlArgs}">{title}</div>' );
tplSection.compile();
// initialize the Section View
var sectionView = new Ext.View('myview', tplSection,
{
store: sectionDS,
singleSelect: true,
selectedClass: 'list-row-selected',
emptyText: 'Unable to load menu roots'
});
var records = sectionView.store.reader.readRecords({'root': someJSONData});
sectionView.store.loadRecords(records, {add: true}, true);
sectionView.refresh();
refresh : function(){
var t = this.tpl;
this.clearSelections();
this.el.update("");
var html = [];
var records = this.store.getRange();
if(records.length < 1){
this.el.update(this.emptyText);
return;
}
for(var i = 0, len = records.length; i < len; i++){
var data = this.prepareData(records[i].data, i, r);
html[html.length] = tpl.apply(data);
}
this.el.update(html.join(""));
this.nodes = this.el.dom.childNodes;
this.updateIndexes(0);
},
tpl.apply(data) should either be this.tpl.apply(data) or t.apply(data)
After making those changes, the view refreshed as expected.

|
#2
|
|
Thank you. I have made those changes.
Btw, the store API does have some functions other than loadRecords (add, insert) that may be more appropriate. loadRecords may be a private function for the release. ![]() |
本文解决了使用ExtJS框架中View组件无法正确刷新的问题。通过调整store读取JSON记录的方法和修正模板应用数据的方式,成功实现了视图的更新。

被折叠的 条评论
为什么被折叠?



