如何在 extjs4 中重新加载树面板?

发布于 2024-12-10 20:26:52 字数 2843 浏览 0 评论 0原文

我有一个表单和一个面板树,当我提交此表单时,我想用新添加的数据刷新我的树。

这是我表单上的提交按钮代码 (你可以看到我尝试过的所有内容,抱歉,一团糟)

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

阳光①夏 2024-12-17 20:26:53

要重新加载树存储,您可以执行 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 to tree 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文