Sencha extJs/extreact 6/7 Tree get selected records - extreact

I have this Tree in ExtJs that allows for multiple selection:
<Tree
ref={this.treeRef}
flex={1}
store={this.treeStore}
selectable={{
mode: 'multi',
rows: true,
drag: true,
}}/>
My problem is the fact that I cannot get the selected records. If I run getSelection it will return the last element selected/a single element.
How does one get all the selected elements in a tree? I found nothing in their docs and, of course, their forums are long dead.

Turns out the Tree has an undocumented method getSelected() which contains the selected items.

Related

Adding sorting icon in column header in Details List in Fluent UI

For a DetailsList or ShimmeredDetailsList, I need to add two arrows (one up, one down) besides the column name in the column header so that the user can look at the grid and tell which column is sortable and which is not. Currently I am using isSorted and isSortedDescending in IColumn, but that only brings an up or down arrow once the user clicks on that column. It doesn't produce any icon that tells the user by just seeing the grid which column is sortable. How can that be done ?
You need to register the sort icon.
registerIcons({
icons: {
sort: <Sort />,
sortdown: <ChevronUp />,
sortup: <ChevronDown />,
},
});
https://github.com/microsoft/fluentui/wiki/Using-icons#custom-svg-icons

Deselect v-list-item when changing its value

I have a v-list-item-group with some v-list-item's inside with an associated value. The problem is that when I change the value of the selected v-list-item it doesn't react. I want it to be selected only when the new value matches the v-list-item-group's model and be unselected otherwise. What is the best way to achieve such a behaviour?
Example. When you edit the list item value, for example, by changing the lower left field from "Bluetooth" to "Bluetooth1", I want the list item to get deselected automatically because its value isn't longer matching v-list-item-group's model ("Bluetooth1" != "Bluetooth"). And when you change it back to "Bluetooth" I want it to get selected again.
The one on the right modifies the v-list-item-group's model and this works as expected.
My actual use case is rendering lists of thousands of elements quickly without rendering them all. To achieve it I use a recycle-scroller component inside my v-list-item-group to manage its items. It creates a few dozens of v-list-items and as user scrolls it reuses them by moving them around and replacing their value, icon and text with corresponding data from my array. The problem is that when user selects some list item then scrolls the list, the selected item gets reused. Despite the fact that it now has a different value, text and icon it still looks as selected. So they see it as if some different item was selected.
I hope this works for you:
<v-list-item-group v-model="model" :color="color">
// other html
Then add a computed property:
computed: {
color(){
if (this.model == this.items[1].text) {
return 'indigo'
} else {
return 'black'
}
}
}

How to find all visible deeply nested ListView items?

Im working on a squish based test and try to get decent (visible) items from a QML ListView that are deeply nested that i just can't pick due to its dynamic behavior
I've get the list itself by using waitForObject with a object map name
There are several nested items in the list an i want to get all occurrences of the MyTypeCCC_QMLTYPE_72 when property visible is true
I've dumped my current class/property child-hierachy:
MyTypeAAA_QMLTYPE_195
children[0] QQuickItem
children[0] QQuickColumn
children[0] MyTypeBBB_QMLTYPE_189
children[0] MyTypeCCC_QMLTYPE_7 visible(true)
I've found this in the Squish-KB: https://kb.froglogic.com/display/KB/Example+-+Finding+child+objects+by+type+and+property+values
so i can write my own search code traversing the tree etc. but i think that could(should) be an easier solution?
can i rely on the exact hierarchy? (but what i the UI design changed another time)
i could maybe add ids to the MyTypeCCC_... if that helps
I've got several of this list with different types/nesting and i hope to find a easy solution that works for all/many of the case
any ideas?
ListView is a subclass of Flickable and all its delegates are immediate children of ContentItem, you can safely iterate over its children to get all list items, but be aware that not all of its children are list delegates, so you have to filter them, e.g. by type. To find nested elements just search for them inside list item, i.e. use list item as a container. To create container locator you can use its coordinates (these are coordinates within the list, so they will be unique). Code may look like this:
list_view = findObject(list_locator)
nested = []
for i in range(list_view.contentItem.children.count):
item = list_view.contentItem.children.at(i)
if className(item) == 'MyTypeAAA':
netsed.append(findObject({'container': {'x': item.x, 'y': item.y, 'type': className(item)}, 'type': 'MyTypeCCC'}))

How to put YADCF filters in first row in the table

I want to put YADCF filters as the first row in the table. Is there a config option for that? Currently, I have it as a part of header row.
I am able to put the filter in footer and use display:table-header-group to put it in the first row. However, this feature stops working when I use "scrollX": true to allow horizontal scrolling.
You can try the filters_tr_index
As to integration with vertical scrolling, I'm not sure if it works properly (in the past there was no option to integrate with that feature)
filters_tr_index -
Required: false
Type: integer
Default value: undefined
Description: Allow to control the index of the inside the thead of the table, e.g when one is used for headers/sort and
another is used for filters

dojox.grid.EnhancedGrid losing focus

I have to refresh an Enhanced List as i have a "quick search" input field
that should update the list while you type. It does work fine, until I select one of the result rows. Then I move back to the input field and start typing but at that moment, the focus is lost and after every letter I have to click back to the input field.
Any method I found refreshing the grid sets the focus to the first header
cell. This means of course that my input field
looses focus. I cannot type more than 1 char without refocusing the field
:-(
Any idea how to re-render a grid (or enhanced grid) without changing focus?
gridtoc = new dojox.grid.EnhancedGrid({
id: 'gridtocsearch',
store: storetoc,
structure: layout,
class: 'grid',
align: 'center',
keepSelection: true,
plugins: {
filter: true
}
});
Thanks a lot, Monika
can you try like
keepSelection:false
official document says
keepSelection
Defined by dojox.grid.EnhancedGrid
Whether keep selection after sort, filter, pagination etc.
***************** updated answer*****************
take a look at this jsfiddle
http://jsfiddle.net/bnqkodup/520/