Javascript 无法在EXTjs中刷新TreeStore
我正在尝试用EXTJs创建一个网页,它有两个主要组件:Javascript 无法在EXTjs中刷新TreeStore,javascript,extjs,extjs4,Javascript,Extjs,Extjs4,我正在尝试用EXTJs创建一个网页,它有两个主要组件: 表格(Ext.Form.Panel) 面板(Ext.tree.Panel) 表单应该得到一些值,这些值应该填充第二个面板中的树。在第一个面板的按钮处理程序中,我可以访问更新的JSON对象,但我无法找到刷新TreeStore的方法来更新tree.panel中的显示 这就是我到目前为止所做的: Ext.define('TreeServiceData',{ config:{ data : '' },print : func
Ext.define('TreeServiceData',{
config:{
data : ''
},print : function() {
console.log("Printing data: ")
console.log(this.data.children[0])
}
});
var dataObject = Ext.create('TreeServiceData');
dataObject.setData({'expanded':false,'children':[{'text':'Master','expanded':true,'leaf':false,'children':[{'text':'Child 1','expanded':true,'leaf':false,'children':[{'text':'Child 2','expanded':true,'leaf':false,'children':[{'text':'Child 3','expanded':false,'leaf':false}]}]}]}]})
Ext.define('TreeStoreData',{
extend: 'Ext.data.TreeStore',
model: 'TaskModel',
autoLoad: true,
autoSync: true,
proxy: {
type:'memory',
reader: {
type:'json'
}
},
root:dataObject.getData()
});
var treeStore = Ext.create('TreeStoreData');
现在,我尝试在按钮调用中更新并显示此树存储的值,如下所示:
buttons:[
{
text:'Get CCP/Product',
handler:function (btn, evt) {
dataObject.print();
treeStore.removeAll();
dataObject.setData({'expanded':false,'children':[{'text':'Master11','expanded':true,'leaf':false,'children':[{'text':'Child 12','expanded':true,'leaf':false,'children':[{'text':'Child 23','expanded':true,'leaf':false,'children':[{'text':'Child 34','expanded':false,'leaf':false}]}]}]}]})
dataObject.print();
}
}
]
但是在这个按钮处理程序上,我总是在treeStore.removeAll()方法上得到一个“uncaughttypeerror:cannotcallmethod'indexOf'of undefined”,treeStore在这个上下文中被明确定义
问题1)刷新树存储的正确方法是什么?答案1)
而不是:
treeStore.removeAll();
dataObject.setData( ... );
你应该做:
dataObject.setData( ... ); // This won't affect the store
treeStore.setRootNode(dataObject.getData()); // Actually update the store
请注意,更改dataObject的数据不会像您认为的那样自动影响存储…这段代码适合我(ExtJS 4.2.1)
树面板节点总数刷新示例:
var responseDictObjects = $.ajax({
data: { Id: this.idDictionary },
dataType: "json",
type: "POST",
cache: false,
url: 'http://' + config.domain + '/' + 'api/Dictionaries/GetDictTreeData',
async: false
}).responseText;
responseDictObjects = jQuery.parseJSON(responseDictObjects);
while (this.storeDict.getRootNode().firstChild) {
this.storeDict.getRootNode().removeChild(this.storeDict.getRootNode().firstChild);
}
this.storeDict.getRootNode().appendChild(responseDictObjects.Data);
将此.storeDict替换为您的存储引用
就我而言:
JSON.stringify(responseDictObjects.Data)
返回
“[{”id“:8,“text”:“kkk”,“leaf”:false,“expanded”:true,“children”:null},{”id“:17,“text”:“ttttt”,“leaf”:false,“expanded”:true,“children”:null},{”id“:23,“text”:“qqq”,“leaf”:false,“expanded”:true,“children”:null},{”id“:24,“text”:“fff”,“leaf”:false,“expanded”:true,“children”:null},{”id“{id:27,“文本”:“fff”,“leaf”:false,“expanded”:true,“children”:null},{“id”:28,“文本”:“ggggggggggggggggggggggggg”,“leaf”:false,“expanded”:true,“children”:null},{“id”:31,“文本”:“tttttttttttt6666666666666666”,“leaf”:false,“expanded”:false,“expanded”:true,“expanded”:true,“children”:true,“children”:null},{“id”:32,“文本”:“ffffffffffffffffffffffffffffffffff”,“leaf”:false,“expanded”:true,“children},{“children”:null},{kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
我在TreePanel中发现了另一个bug,在执行appendChild后会出现以前删除的节点。所以我开始使用jquery树插件(dynatree)。所有您需要的是创建空面板。渲染面板后,嵌入树,在我的示例中:
JSON.stringify(responseDictObjects.Data)
创建空面板:
that.treePanel = Ext.create('Ext.panel.Panel', {
title: 'Records',
width: 350,
height: 400
});
渲染面板后,可以随时刷新节点:
var that = this;
var responseDictObjects = $.ajax({
data: { Id: this.idDictionary },
dataType: "json",
type: "POST",
cache: false,
url: 'http://' + config.domain + '/' + 'api/Dictionaries/GetDictTreeData',
async: false
}).responseText;
responseDictObjects = jQuery.parseJSON(responseDictObjects);
var el = this.treePanel.getId();
if (this.treeDict == null) {
this.treeDict = $('#' + el).dynatree({
onActivate: function (node) {
that.treeDict.lastSelectedId = node.data.index;
},
children: []
});
}
this.treeDict.dynatree("getRoot").removeChildren(true);
this.treeDict.dynatree("getRoot").addChild(responseDictObjects.Data);