I have a list extending Ext.dataview.List.
I would like to play an animation in only one of the list items.
If it is triggered by the itemTap, it is easy, because the callback provides a third argument, I just run the animation on it. (I mean Ext.Anim.run).
But what if I need to animate the n-th element independently from the list, like triggered by a user tap on a separate button?
Thanks
Let's say you have a list which has the following config :
xtype:'list',
cls: 'myList',
...
Then you can access its DOM element with :
var items = Ext.DomQuery.select('.myList .x-list-item');
It will returns all the items of the list with the cls 'myList' so be sure to have only one list with this class.
From there you can do whatever you want with it like hiding the second item :
items[1].style.display = 'none';
Hope this helped
Related
I have a CustomScrollView with several children. One children should always be displayed but the other ones should be displayed depending on a condition:
CustomScrollView(
controller: articleState.scrollController,
slivers: [
ArticleDetailPageHeader(widget.articleShort), // <- should always be displayed
...condition
? _buildShimmerWidgets() // returns List<Widget>
: _buildArticleWidgets(context, articleState), // ยดยด
],
)
This is working. But I would like to use a AnimatedSwitcher so the UI looks a bit smoother.
I look into AnimatedSwitcher and it takes a child of the type Widget. Now that is the Problem! I have a List<Widget. Is there any workaround for this?
I hope my problem is clear, let me know if you need any more info!
Try to use a Column as the child for the AnimatedSwitcher and then pass the List<Widget> as children for the Column.
In a typical list -> details SwiftUI view, I have basically an Array of objects, and for read/edit, I can easily bind these (using #Binding on the view) to view and edit the elements in the array.
What about adding new elements?
I would like to re-use my views for editing; but they expect an #Binding as I mentioned. How do I transition to this view if I want to allow the user to add a new element to the list?
One option is that I can pre-create an object before loading the view, and then binding the view to the new element. However, this makes "cancel" clunky (now I have to remove from the list). Also, it's not clear how to inject this logic (create a new element) in a NavigationLink.
Another option is that I can pass the list to the view and bind a constant empty object, and in the view I can manage adding the new element to the list upon successful creation.
What is the recommended approach to this? I see a lot of tutorials on how to edit and view lists, but not on how to add.
Sounds like you need a backing database. I used Apple's Core Data to add and retrieve stored objects to/from. Here's the guide I used: https://www.hackingwithswift.com/books/ios-swiftui/how-to-combine-core-data-and-swiftui
I figured out a way to do this that is quite nice.
What I've done is that in the list (say, LandmarkList), I added a default LandMark element (which represents the new element to add).
#Published var newLandMark : Landmark
I wrap my view with a new view, which binds against the list:
struct NewLandmarkView : LandmarkDetail {
#Binding var landmarkList : LandmarkList
}
This view adds buttons for save and cancel. Add takes the newLandmark and adds it to the list.
I then use the following to show modally (you can navigate to it if you want instead):
Button(action: {
// In the folder list view, we'll add a note to the "notes" folder
self.showModal = true
}) {
Image(systemName: "square.and.pencil")
}.sheet(isPresented: self.$showModal) {
CreateLandmarkView(landmarkList: self.$landmarkList)
}
This worked pretty well for me as a pattern.
I am trying to create a List which behaves like, for example, the Finder Menu on my Mac. In other words if I click on a List Item, keep my mouse down and move up and down the List I want the Selected Item to change.
In my Flex application if I click on my List and then, with the mouse still down, move up and down the List the Selected Item remains the same.
Any advice would be gratefully received.
Thanks
In StackOverflow tradition I am posting a solution to my own problem after working at it more:
I had an ItemRenderer on my List. In the ItemRenderer I declared a variable to hold a reference to the owning List.
private var _parentList:List;
In the 'set data' function I set this variable to the owner List.
override public function set data(value:Object):void {
super.data = value;
// Check to see if the data property is null.
if (value == null)
return;
// If the data property is not null.
// Get a reference to the parent list.
_parentList = this.owner as List;
...
I then added an EventListener to listen for MouseDown events.
// Attach an eventListener to the ItemRenderer.
this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
...
My onMouseOver handler looks like this.
private function onMouseOver(event:MouseEvent):void {
//trace(data.LocationName);
if (event.buttonDown == true) {
_parentList.selectedIndex = itemIndex;
}
}
So with this in place I can mouse-down on my List and keeping the mouse button depressed move up and down the List with the List Item beneath the cursor always being selected. The final piece to this is to ensure that the List responds to the selectedIndex being set by the ItemRenderer. When the user changes the selectedIndex property by interacting with the control, the control dispatches the change and changing events. When you change the value of the selectedIndex property programmatically, it dispatches the valueCommit event. To ensure I responded to my programmatic changing of the selected list item I added a handler to the valueCommit event.
<s:List
id="locationsList"
dataProvider="{presenter.locations}"
itemRenderer="itemrenderers.locationListItemRenderer"
useVirtualLayout="false"
width="1869.698" height="1869.698"
y="65.151" x="65.151"
borderVisible="true"
borderColor="{presenter.backgroundColour}"
contentBackgroundAlpha="0"
contentBackgroundColor="0xff336c"
labelField="label"
change="presenter.onLocationListChange(event)"
valueCommit="presenter.onLocationListValueCommit(event)">
<s:layout>
<s:BasicLayout />
</s:layout>
</s:List>
So far it seems to work fine. Hope it helps.
Flex How can I change item in dataProvider when Items(multiple selection) is selected or deselected in the mx:List
I just want my data reflect what items I selected in the list dynamically. Base on that do some sorting with the list, for example make selected items first in the list when they are selected, and go back to original place when items are deselected....
You can use the IViewCursor to get/add/remove items of the list.
Below is a code example of how to create the cursor, based on that you will just need to apply the logic you need.
var col:ICollectionView = ICollectionView(list.dataProvider);
var myCursor:IViewCursor = col.createCursor();
//do the logic using the myCursor functions
...
//refresh the collection to the changes reflect in the list
col.refresh();
Here you can check some more info about it.
You can add an event listener to your list so that whenever a selection/deselection occurs it triggers.
<s:List id="myList"
labelField="firstName"
change="selectionChangedHandler(event)"
dataProvider="{peopleArray}">
</s:List>
....
protected function selectionChangedHandler(event:IndexChangeEvent):void
{
var currentIndx:int = event.currentTarget.selectedIndex;
var currentDataItem:Object = event.currentTarget.selectedItem;
peopleArray.removeItemAt(currentIndx);
peopleArray.addItemAt(currentDataItem,0);
peopleArray.refresh();
}
I haven't run it but you may need to set selection on refreshed list too.
I am developing my application in Sencha touch. In that I have a list and Picker and I want to update the list data dynamically when selecting the picker i.e., I want to add data to list dynamically when tap on 'Done' button of Picker. I used some logic for this but this doesn't update the list content.
listeners: {
change: function(picker,value) {
textValue = picker.getValue()['name'];
var me = this,
nameList = this.down('#namesList');
nameList.add({fullname:textValue}) ;
}
}
When I update like this, it throws me the error that 'Uncaught TypeError: Cannot call method 'add' of null' eventhough 'namesList' is already defined. Please show me the way to solve this problem.
I would add a record to the data/store of the list, and then capture the list and refresh.
The issue there is that nameList isnt actually the list component.
Try adding for example an id to the list, and then in the picker change listener:
Ext.getCmp('mylist-id').refresh()
Hope it helps.