Search code examples
extjsextjs6extjs6-classic

In treeview, how to display certain records a second time? (as a favourites bar)

ExtJS 6.0.1

I have a Ext.data.TreeStore with data in it. Entries have a property "favourite", which if set to true updates the actioncolumn icon to show it's been favourited.

enter image description here

This works great, but on favouriting a record, I'd like it to appear at the top, in what would essentially be a second section/tree. And unticking the favourite button here would remove it etc. Below is a mockup of what I mean.

enter image description here

I'd really like to work with no duplication of data, so while have a node "Favourites" and adding/removing to it doesn't feel like a good option. Plus it would make the sorting and filtering code quite hacky.

So I thought I'd alter the view in some way to show this extra section at the top.

How would I go about doing this? Do I have to create a custom TreeView? Or overwrite the renderer function? Or insert HTML in beforeRender, or something along those lines?

Any point in a direction would be appreciated, because this feels like something I could spend a week doing wrong. Thanks

Solution

  • Probably the best option you have is to have a main panel with a Grid at the top (containing your favorites) and a tree at the bottom. Then use the star click to sync both panels.

    I have created an example here: https://fiddle.sencha.com/#view/editor&fiddle/2f44

    Note: There are other ways to achieve this other than copying records back and forth, this is just to give you an idea on how you could do it.