I have a scenario where there are total of 150 items that we want to render, but server returns set of items - say 30 at a time.
We want to use DetailsList, however, we did not find any prop that can be used to update (add to) the list of items when user scrolls to the bottom of present list.
I see that DetailsList handles UI virtualization, however it seems we need to pass the entire set of items at the beginning only.
Related
I have a use case where there are "n" JSX objects of different size and are placed horizontal with use of {flex-direction: "row"}.
My requirement is to auto scroll these n objects in a circular loop i.e., I want the 1st JSX object to reappear after nth JSX object.
Note: I don't want loop to be rendering one object after the other.
I have tried using "react-native-looped-carousel" library but it's rendering only one object at a time and then scrolling.
If you want to do a custom thing you might want to create a carousel like this:
create three view elements
cycle values through these three views (0 - previous, 1 - current, 2 - next)
when you switch to the next item (2 becomes 1), replace content in next item (2) by the content you need.
You can also take a look react-native-reanimated-carousel, it has a loop property, seems to do what you want.
I have two elements in two rows next to each other:
I have entered them all in an array of objects and called them through props to display them in the left one.
Now what I want to do is when I click on any channel from the left item, it shows in the right with the first item before it and after it in the array, so I am going to use $emit with #clicked function to get an event to call it on the app.vue. But I don't know what to do after to get it displayed.
I feel I should create a new component but I'm at a loss about the elements within.
Edit: Sorry I forgot to mention, the picture is the design not the result of my code, I could only create the left one "list of stations" and have a problem doing the right part based on a click of the left part
You can indeed create 2 components. 1 component having a list of all the stations. another component displaying the details of the radio station.
The moment you click a station in the list, it sends an event and updates a property in the vue.app. This could for example be called selectedStation.
your component that shows the detail of the radiostation just receives a prop with the details of the station.
How do I show a spinner in a DetailsList? For instance, let's say I have the following items in a DetailsList:
list of items
On clicking the item with the name 'AdipiscingUt.onetoc', show a spinner on the rightmost side of that item (next to 125 KB). Please let me know if you have any suggestions on the same.
Thanks!
You can use selection attribute in <DetailsList> component to catch the selection events. Then create extra column with hidden spinner and display it via selection event.
At least I had the experience when I needed to display the icon status according to each item. I added unique id per each item (using onRender method for columns attribute in <DetailsList>) and use it for identification.
I am working on a project and the problem that I have is; the items of my combobox are being loaded from the database table(one field); the table has more than 1000 records:
how can I load these records(one field) as items by giving a limit of 50 while allowing the user who wants to see all of the records through the combobox to see them but still by a group of 50?
which event can be the best for loading items to the combobox? textchanged, click....
I was thinking to use the vertical scroll bar so that when the user is at the end of the displayed items the next 50 will be loaded and if he is on the first and scrolls up the previous 50 will be loaded:problems with this way of thinking are:
when the user typed some caracter from the word that he wanna select
from the items' list if it is not loaded yet from the DB he will be
obliged to type the whole word
I don't know which event is raised
when scroll bar of reaches the end or is at the beginning
Is there any other way to do that?
I've encountered this in a couple spots in my app:
Let's assume I have 3 items in a carousel. I'm viewing item #2. I need to reload that carousel, so I do the following operations:
Ext.getCmp('carousel_name').removeAll();
var new_objects = (bunch of code that recreates the carousel's objects again, with the same IDs; this is the same code that was used to create the objects the first time, so it is likely not the issue)
Ext.getCmp('carousel_name').add(new_objects);
In the carousel object items list (Ext.getCmp('carousel_name').getItems()), all three items exist. However, only #1 and #3 (the ones which weren't the active item prior to the carousel reload) actually appear. #2 presents a blank white screen, and in the HTML nothing exists except for the item shell markup (no code that I've written shows up). If I do Ext.getCmp('carousel_item_2').show();, the item does appear, but is full-screen, and I get the error:
[DEPRECATE][Ext.Panel#show] Call show() on a component that doesn't currently belong to any container. Please add it to the the Viewport first, i.e: Ext.Viewport.add(component);
When I try to manually add that item to either the Viewport or the carousel, nothing is fixed.
I've tried inserting a dummy item in-between removal and reinsertion of new items, that doesn't work. Nor does hiding the entire Viewport before doing any of this and showing it afterwards. Nor does using setItems() rather than add(). Nor does doing Ext.getCmp('exercises_carousel').each(function(item){ item.destroy(); }) rather than removeAll(true)
I don't believe the issue is the code snippet that re-creates the new items, since it's the same code that's used to create the items the first time, and there are no issues on the first creation.
Pretty stumped here.
EDIT: I've found that if, when I get to the end of the carousel, if I add a empty item after the last item in the carousel, I don't get the blank item at N-2. No clue why this is the case. Still not a real solution, it's a hack.
Assuming there are no problems in your code snippet to re-populate new items in your carousel, then the only problem is because of this issue (I'm not sure whether it's a bug in Sencha Touch 2.1 or not but it does exist): when you call yourCarousel.removeAll() and add some new items again, your carousel will NOT set proper active item.
I've seen a similar problem and I added this after adding new items, which works:
carousel.setActiveItem(0);
Alright, this is a hack, so if anyone has a legitimate solution, that would be awesome. But the hack does work, so here it is:
Add an empty item in the carousel
Set active item to the new empty carousel item
Destroy all carousel items
Recreate (and re-add) all of the items
In code:
Ext.getCmp('carousel_name').add({});
Ext.getCmp('carousel_name').setActiveItem(Ext.getCmp('carousel_name').getMaxItemIndex());
Ext.getCmp('carousel_name').removeAll(true);
var new_objects = (bunch of code that recreates the carousel's objects again, with the same IDs)
Ext.getCmp('carousel_name').add(new_objects);
EDIT: As it turns out, this for some reason works 90% of the time; for some unknown reason 10% of the time it still doesn't get inserted. The only way to guarantee that all items get inserted correctly is to clear the entire viewport (Ext.Viewport.removeAll(true)), recreate all of the original items in the viewport, and reinsert them. I'd rather not have to do this every time an item doesn't get inserted.