Question

I have an Ext TreePanel which I’m trying to add some server-side pagination to. We’re using Ext 2.2.0.

We have a customized tree which only has two tiers. We are listing 25 items under the tree itself (the root?), but each item node can have an unlimited amount of children. I’m guessing these are the “leaf”s. The item nodes are using a custom uiProvider, as are all of the children.

I’ve added some images for prev/next page to the itemNodeUI and added handlers which updates the item node’s attributes with the pageNumber. The DataUrl php file grabs these attributes and basically appends LIMIT to the sql query.

Everything works as it should, except when you click on the next/prev images, the item node collapses. If you expand the node, everything is as it should be, but I either need the node to stay expanded, or have it automagically re-expand after load. I’ve tried using expand(), fireEvent('expand'), expandChildNodes, the whole nine yards. Nothing.

Here’s the function that’s called when clicking on the ‘Previous Page’ button:

    onPaginationPrevButtonClick: function(e,t) {
        var parentEl = Ext.get(t).findParentNode('.x-tree-node-ct', 10, false).previousSibling;
        var treeNodeId = parentEl.getAttribute('ext:tree-node-id');
        var treeNode = this.tree.getNodeById(treeNodeId);
        var currentPage = parseInt(treeNode.attributes.pageNumber);

        if (currentPage > 0) {
            treeNode.attributes.pageNumber = currentPage - 1;
        }

        treeNode.getLoader().load(treeNode);
    }

Another issue I’m having is that the itemNodeUI, which extends TreeNodeUI, is not being ‘refreshed’ when the above function is called. So the text which shows how many results are being shown doesn’t change from the first page. Is there a way to refresh this node as well and have it expand, without reloading the whole tree?

If there’s a better or easier way I should be doing this, I appreciate any input you have. I’m an Ext.NEWB, so pretty much everything I do is a ‘hack.’ 😉

Edit:

I’m almost embarrassed to admit this, but I was completely able to resolve the collapsing issue by using treeNode.reload() instead of re-load()-ing the loader itself. sigh…

treeNode.getLoader().load(treeNode);

should have been:

treeNode.reload();

I still do, however, need to figure out how to refresh the node itself so that the text showing the results, and the prev/next buttons, show correctly. I’ve tried using:

treeNode.parentNode.reload();

…but all that does is refresh the whole tree. I just want the itemNode itself to be updated. Any thoughts?

Many thanks in advance!

Answer 1

Well, I’ve pretty much just assigned every HTML element with a unique ID and am using Ext.get to update the css styles and innerHTML. It’s a pretty ugly hack-job, but it’s gonna have to do.

Hopefully someone else can get something out of this though. Best of luck.