View Full Version : Multiple models in one TreePanel

3 Oct 2012, 5:44 AM
As mentioned before, I've been evaluating Sencha's tools to see if they would work for a web UI we need to build for our server. I've learned a lot over the past month or so (while I'm new to ExtJs and JavaScript, I come from the Java/SWT/JFace world in Eclipse, and MFC before that, so I'm very comfortable with windowing systems).

We have a server that returns various kinds of information, thus necessitating multiple models. It's a RESTful server, and the only URL I need to hard code is the first one, all the rest can be discovered via the responses that come back. In this day and age, that seems pretty common.

But I came across this conversation:

Which states that you can only have one model and one store per TreePanel. The comment was that this was sufficient for most use cases, and there are workarounds for the other (but no workarounds were listed).

I would state that unless I'm missing something, this is NOT sufficient for most use cases. In the real world (I've been doing UI's for a long time now) it's rare that everything in the UI can be described by a single model. In SWT/JFace in Eclipse, any class at all can be a node in a tree, as long as it implements a given interface.

The workaround I came up with was to override getResponseData() on the JSON Reader; I call Ext.decode() to get the JSON objects, then I check to see if there were any other types besides the main one in the response. If there were, then I create a new object and populate it the same way as the main JSON objects. 'links' is the main object I'm looking for, that I have a model for. But there can be other things too, and so what I do is when I find one of those things I create a new object and populate it like it was a 'links' object so it gets rendered in the tree correctly. After I finish creating the "fake" objects, I call readRecords and things continue on their merry way.

This works, but it's not pretty or clean.


1. Are there other ways to do this, and which ones are considered "best"?
2. Are there plans to support multiple models in the TreePanel in ExtJs anytime soon? I'm using 4.1.1.

You can do some pretty nifty things with ExtJs, and with the Architect tool you can put together a very simple UI in minutes or even seconds (when you know what you're doing). I stopped using Architect awhile back though because while it helps one get up to speed, it also hides a lot of things that impede truly understanding what you're doing. I see it as being most useful for quick prototyping.

But there are two small and one big impediments that I see to adopting Sencha's tools:

1. The documentation is okay for getting started, but it falls down when you need to build something of more complexity.

2. Same thing for the examples, they're very simple, and once you need to go further it's non-trivial to interpolate the simple examples into something more complex.

The big impediment, of course, is this limitation in the TreePanel. At the moment it looks like I would have to write a lot of special code for each different model to make it appear like the one and only model the tree understands. That's not a solution that scales well.

At the moment I'm on the fence about proceeding with Sencha's tools, but I'm hopeful someone can convince me it's worth going forward.

10 Oct 2012, 8:59 AM
So you want to use different models for any level of data. IMO it is more performant to normalize data before it reaches the TreePanel than to allow the TreePanel to some how know what model to use.

To normalize data you can do it via server side (SQL makes it easy to do so) or even using the mapping or convert configs in the field of your model.

19 Oct 2012, 11:40 AM
Thanks for your reply, Mitchell, I appreciate your taking the time.

But I'm a little disappointed, I'd hoped for something like, "Yes, we know it's a limitation, and we're working on it." IMO performance is a distant second to, "Does it work?"

In my case, I don't have any control over the server; even if I did, I don't see a way to normalize all the disparate data.

I know we're not the only ones that have run into this situation. I suspect this problem will only grow over time.

I guess for now I'll just keep doing what I'm doing, which is grody and doesn't scale well, but works.



20 Oct 2012, 11:29 AM
The ExtJS 4 tree is a bit of a mixed bag. Prior to version 4 it was completely separate from the grid component and while the merge offers various useful functionality it has come at the expense of other areas. In ExtJS 3 you could use simple tricks to get different nodes types at different levels and I for one found that very useful.

I know the Sencha dev team are very much aware that the tree component falls short but it's far from a trivial fix to give everyone what they want. My (totally unofficial) guess would be that trees are going to get a lot of attention in ExtJS 5 and multiple model support would be one of the obvious features they need. I don't imagine that'll be any time soon though.

22 Oct 2012, 5:59 AM
Thanks very much for the information! Not having used ExtJs 3, I didn't realize this was new for 4.

And I can see now where the one model/store restriction comes from. Even if you don't like it, it always helps to know where those kinds of restrictions come from.

While the tree/grid component is certainly useful, I'd submit that there are times when all you want/need is just a simple tree. Seems to me they need to construct a tree that doesn't share so much with the grid. I agree with you, I think it'd be tough to remove this restriction from the existing tree/grid component. That's one of the downsides of such a merge, you probably have to inherit all the restrictions of all the components. A separate component need not be so restricted.

Thanks again.