CODEWITHSUNDEEP
extjsviewtreerefreshstore
Poney
Poney

Reputation: 37

ExtJS 4.2.1 TreePanel do not refresh how I want

I am working with a treePanel with ExtJS 4.2.1. My problem is quite delicate to explain.

I have two buttons, a tree button and a clear button.

When I click my tree button, it shows a treePanel with checkNodes so you can check some nodes. I have a valid button in my treepanel to valid the selection. Once you have clicked this button, the checked nodes (precisely leaves but that is a detail) will be added to a panel. This panel is a grid and it's the list of the nodes you have checked. No problem with this grid. I don't have any problem with this button and my grid, and when I click the valid button the checked nodes are correctly listed in my grid panel.

When I click the clear button, which is not in my tree panel it clears all my selection, my grid becomes empty and all the nodes from my tree becomes unchecked (like if you were starting from the beginning).

It works when I do it for the first time. I can check nodes, click on the valid button and it will correctly add my items to my grid panel (I never have any problem with my grid panel which list my checked nodes). If I click my clear button the list becomes empty. Then if I click on my tree button, the tree panel appears and if I expand it I can see that the selection is reinitialized, all the nodes are unchecked.

THE PROBLEM : if I do the same operation a second time it seems to work great, but the tree panel is not visualy reinitialised. I click on the tree button, the treepanel appears and when I expand it I see that the nodes I precedently checked are still checked. The problem is that when I want to consult my checked nodes with some console.log(currentChild.data.checked) I can see that the checked value is false.

So it seems to work with the data, but my tree panel is not correctly refreshed (only when I do the operation more than one time).

I don't know if my problem is correctly explained. Here is a part of the concerned code.

var uncheck = false;
button.on('click', function(){
        var treeSelector = createTree('stAddAction.do?action=product_tree_selector', 550, 490, '', 'lbl_st_tree_selection_empty', true, 'productlist');
        treeSelector.on('load', function( node, records, successful, eOpts ){
            if ( uncheck ){
                node.tree.root.cascadeBy(function(currentChild){
                    if ( currentChild.data.checked ){
                        currentChild.data.checked = false;
                        currentChild.raw.checked = false;
                        currentChild.triggerUIUpdate();
                        console.log(currentChild);
                    }
                });
            }
            uncheck = false;
        });
        buttonClear.on('click', function(){

           uncheck = true;  
           treeSelector.store.proxy.url = "stAddAction.do?action=product_tree_selector";
           treeSelector.store.load(treeSelector.getRootNode());
           treeSelector.store.sync();
           treeSelector.getView().refresh();    
        });
});

Where is the problem? What could it be? Why does it work once but not twice?

Thank you

Upvotes: 0

Views: 5297

Answers (1)

Reimius
Reimius

Reputation: 5712

You should be using the node's set method to change the value with the statement:

currentChild.set("checked", false);

here would be the full code:

var uncheck = false;
button.on('click', function(){
        var treeSelector = createTree('stAddAction.do?action=product_tree_selector', 550, 490, '', 'lbl_st_tree_selection_empty', true, 'productlist');
        treeSelector.on('load', function( node, records, successful, eOpts ){
            if ( uncheck ){
                node.tree.root.cascadeBy(function(currentChild){
                    if ( currentChild.data.checked ){
                        currentChild.set("checked", false);
                        console.log(currentChild);
                    }
                });
            }
            uncheck = false;
        });
        buttonClear.on('click', function(){

           uncheck = true;  
           treeSelector.store.proxy.url = "stAddAction.do?action=product_tree_selector";
           treeSelector.store.load(treeSelector.getRootNode());
           treeSelector.store.sync();
           treeSelector.getView().refresh();    
        });
});

Upvotes: 3

Related Questions