Armance
Armance

Reputation: 5390

how to Reload tree panel in extjs4?

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);
        }
    }
});

Upvotes: 1

Views: 7026

Answers (1)

Chao
Chao

Reputation: 1058

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.

Upvotes: 1

Related Questions