如何在 extjs4 中重新加载树面板?
我有一个表单和一个面板树,当我提交此表单时,我想用新添加的数据刷新我的树。
这是我表单上的提交按钮代码 (你可以看到我尝试过的所有内容,抱歉,一团糟)
buttons: [{
text: 'Save',
handler: function () {
this.up('form').getForm().submit({
url: 'AddData.ashx',
params: { action: 'addasset' },
success: function (form, action) {
Ext.MessageBox.show({
title: 'Success !',
msg: 'Asset added successfully<br />',
icon: Ext.MessageBox.INFO
})
}
})
//refresh tree
// var at = Ext.getCmp('atree'); at.getLoader.load(at.getRootNode(Ext.decode(objt.TreeToJson())));
// ATreeStore.loadData(Ext.decode(objt.TreeToJson()));
// var at = Ext.getCmp('atree');
// at.getView().getTreeStore().setRootNode(at.getView().getTreeStore().getRootNode().getChildAt());
// at.getView().refresh();
// Ext.ComponentQuery.query('treepanel')[4].getStore().load();
// Ext.ComponentQuery.query('assettree')[0].setRootNode(Ext.decode(objt.AssetTreeToJson()));
// ATreeStore.setRootNode(ATreeStore.getRootNode().getChildAt());
// ATreeStore.load();
ATreeStore.setRootNode(Ext.decode(objt.TreeToJson()));
}
}, {
text: 'Cancel',
handler: function () {
this.up('form').getForm().reset();
}
}]
这是我的树代码(不要担心上下文菜单,我仍在努力工作)
window.ATreeStore = Ext.create('Ext.data.TreeStore', {
root: Ext.decode(objt.TreeToJson())
});
var myContextMenu = new Ext.menu.Menu({
items: [{
text : 'Edit'
}, {
text: 'Delete'
}]
});
Ext.define("Ext.app.ATree", {
extend: "Ext.tree.Panel",
alias:"widget.atree",
title: ' my tree',
height: 200,
//id: 'atree',
layout: 'fit',
//width: 300,
border: false,
store: ATreeStore,
//rootVisible: false,
useArrows: true,
frame: true,
closable: true,
collapsible: true,
animCollapse: true,
draggable: true,
resizable: true,
margin: ' 5 5 5 5',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'reload',
handler: function () {
Ext.ComponentQuery.query('atree')[0].setRootNode(Ext.decode(objt.AssetTreeToJson()));
}
}, {
text: 'delete',
handler: function (record) {
alert(record.data.id)
}
}]
}],
listeners: {
itemcontextmenu:
function (node, event) {
node.select();
myContextMenu.showAt(event.xy);
}
}
});
I have a form and a panel tree , when I submit this form I want to refresh my tree with the new added data.
so this is the submit button code on my form
(u can see everything i tried,its a mess sorry)
buttons: [{
text: 'Save',
handler: function () {
this.up('form').getForm().submit({
url: 'AddData.ashx',
params: { action: 'addasset' },
success: function (form, action) {
Ext.MessageBox.show({
title: 'Success !',
msg: 'Asset added successfully<br />',
icon: Ext.MessageBox.INFO
})
}
})
//refresh tree
// var at = Ext.getCmp('atree'); at.getLoader.load(at.getRootNode(Ext.decode(objt.TreeToJson())));
// ATreeStore.loadData(Ext.decode(objt.TreeToJson()));
// var at = Ext.getCmp('atree');
// at.getView().getTreeStore().setRootNode(at.getView().getTreeStore().getRootNode().getChildAt());
// at.getView().refresh();
// Ext.ComponentQuery.query('treepanel')[4].getStore().load();
// Ext.ComponentQuery.query('assettree')[0].setRootNode(Ext.decode(objt.AssetTreeToJson()));
// ATreeStore.setRootNode(ATreeStore.getRootNode().getChildAt());
// ATreeStore.load();
ATreeStore.setRootNode(Ext.decode(objt.TreeToJson()));
}
}, {
text: 'Cancel',
handler: function () {
this.up('form').getForm().reset();
}
}]
here is my tree code (dont worry about the conext menu,im still trying to make work)
window.ATreeStore = Ext.create('Ext.data.TreeStore', {
root: Ext.decode(objt.TreeToJson())
});
var myContextMenu = new Ext.menu.Menu({
items: [{
text : 'Edit'
}, {
text: 'Delete'
}]
});
Ext.define("Ext.app.ATree", {
extend: "Ext.tree.Panel",
alias:"widget.atree",
title: ' my tree',
height: 200,
//id: 'atree',
layout: 'fit',
//width: 300,
border: false,
store: ATreeStore,
//rootVisible: false,
useArrows: true,
frame: true,
closable: true,
collapsible: true,
animCollapse: true,
draggable: true,
resizable: true,
margin: ' 5 5 5 5',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'reload',
handler: function () {
Ext.ComponentQuery.query('atree')[0].setRootNode(Ext.decode(objt.AssetTreeToJson()));
}
}, {
text: 'delete',
handler: function (record) {
alert(record.data.id)
}
}]
}],
listeners: {
itemcontextmenu:
function (node, event) {
node.select();
myContextMenu.showAt(event.xy);
}
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
要重新加载树存储,您可以执行
tree.getStore().load
当然,您需要在调用之前以某种方式获取对tree
的引用。 Sencha 文档参考:http://docs. sencha.com/ext-js/4-0/#!/api/Ext.data.TreeStore-method-load
但是,如果您的表单提交应该向树添加某些内容,那么您的代码可能会出现计时问题,因为表单提交是异步的。您需要在表单提交的成功处理程序中调用树刷新函数。
to reload a tree store you can do
tree.getStore().load
of course you need to get a reference totree
somehow before you call that. Sencha doc reference:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.TreeStore-method-load
however if your form submit is supposed to ADD something to the tree, your code could potentially have a timing problem because the form submit is asynchronous. You would want to call the tree refresh function inside the success handler of your form submit.