2

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

trouserboycott
  • 137
  • 9
  • 3
    I wouldn't try and implement it in the same tree, it's going to end up being difficult, just use the model cloning methods to add them to a second tree. – Evan Trimboli Mar 28 '18 at 10:33
  • I see here one more problem, `StoreTree` loads incrementally, but to display all possible favourites you would need to load store in whole at start, which is not ideal, especially if, this store has a lot of data – Grigoriy Mikhalkin Mar 29 '18 at 08:46

1 Answers1

2

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.

Guilherme Lopes
  • 4,688
  • 1
  • 19
  • 42
  • Thanks for your response. This is currently the approach I'm taking, though I am trying to use a second tree above. It's a little messy as an UI functionality needs to be handled (simple things such as counting how many are selected becomes a pain because the same item can be selected in both panels) but it is at least doable – trouserboycott Apr 03 '18 at 07:55