In Sencha, how to create a DataView or List component which renders only 1 item at a time and contains prev/next buttons to navigate data?
Store has pagination enabled to pull only 5 records at a time. Out of these 5 records I want to display only 1 record at a time on the view and with navigation buttons to move forward/backwards. Is there a built-in component for this requirement?
I see few SO posts (Sencha Touch limit number of items in list) suggesting to use 2 stores (DisplayStore to slice the actual data). This didn't work for me. I tested this with static data in the actual store. It still renders all the data in the list. Moreover I am looking for forward/backward navigation buttons too.
If there is no such built-in component (at least close enough), I want to create one for my needs. Please suggest.
You should go with a filter, and two buttons.
The handler for the next button could be alike
var number= list.getStore().first().getId()
list.filter('id', number+1)
If there is anyway to increase a number for the next valid item. Otherwise you need a counter of your current selected item and increase that.
Related
I have a long list of company names need to be displayed in the picker dropdown and it's causing the app to freeze. I am aware of the infinite scroll if it's viewing the content, where you fetch a limited size of the data from the server side and load more as the scroll reach to the bottom. But does it apply the same concept for a dropdown picker?
I am using the library #react-native-picker/picker and considering the behavior of the component I have no idea how to handle it.
I haven't done anything on my codes yet. Currently it's fetching all the listing from the server side and dump all the data in the picker.
usually it's best practice for large select list to create a modal screen which open up by clicking on the selectbox and there you provide a search box on top and show list using FlatList as it's good for large set of data and will not freeze your screen while rendering.
Check out this
This issue 2850 mentioned something may help you and to be clear there was a solution mentioned by M1K3Yio
please check the code using react-window in this link !!
I have a use case where I am using stack navigator. I have a homepage where I have some aggregated data and a list which are retrieved from an API.
On clicking on a list item I move to a screen which has more details of that item. There I can add entries for that item. When entries are added using a form, both the homepage as well as the item specific screen need to be updated, which means I need to call the API's again to fetch data. In case no transactions are added I was to avoid this.
What should be the best practice here? should I pass a state variable from homepage and whenever it is updated refresh the screens?
Currently, I am using a willFocus listener, and it makes an API call each time I am on one of these screens. I believe that there can be a better approach than this.
How does the aria-current works as we need to tell the screen reader where the page it is even after user does not made any movement on the laptop. Which Aria can be used ?
Aria-current works by informing the screen reader which element is current. For example, you can use aria-current="page" on a list of navigation links where it shows by visual decoration (color or underline, etc) which page link is currently chosen. Aria-current="step" could be used if there is a visual indication of checkout steps (for example) to show which step (2 of 3) the user is currently on. Aria-current="true" could be used if there are a set of size links to show which size is currently selected.
aria-current is one of the attributes defined in the WAI-ARIA specification, meant to help people with disabilities to perceive common UI widgets that are not part of the HTML specification.
It should be used to identify the current item in a set of items and it can take several values:
aria-current="page": indicates the current page within a set of pagination. It can be used, for example, within a main pagination widget (likely in the header).
aria-current="location": indicates the current page within an hierarchy of navigation. In can be used, for example, within a breadcrumb widget.
aria-current="date": indicates the current date. It can be used, for exemple, within a date picker.
aria-current="step": indicates the current step within a set of steps. It can be used, for exemple, within multi-step wizard form.
I have made an application with two pages. When the user clicks an item on the listbox of the first page, the second page is supposed to show up with details about the clicked item.
I have a problem with accessing the selected item in the listbox of the first page from the second page.
How can I get this working?
You can't do that, because after navigation the first page no longer exists. You have to pass that value first:
How to pass values (parameters) between XAML pages?
Easiest way - to pass data by navigation parameter, it is just like GET HTTP method, Nokia has an example of how to do it here.
Second way - to store value in IsolatedStorage, for example in IsolatedStorageSettings , here Microsoft topic about it.
I'm currently having an optimization problem with a page. This is a dashboard-like page, it contains and AspxNavBar (analogue of Accordion control) with 3 groups, groups contain 2 charts inside callback panel, 4 grids inside callback panel (1 main + 3 dependend), filtering controls with many comboboxes and a callback panel.
The total weight of the page is like ~4 megabytes, and, in addition, the first load of the page immediately starts a callback on dependent grids (first row is 'selected' in main grid) and on panel with charts (for chart resizing).
Is there a way to reduce page size, say, size of html or callback/view state for devexpress controls? I've searched and found advices to disable rows cache (that doesn't actually help), switch textboxes to native mode (i don't have textboxes), etc. I've also disabled viewstate for all grids and got rid of 2 callback panels, but that also didn't result in significant page size reduction ( ~ 1-2 %).
I've managed to reduce the page size from 4.5Mb to 575Kb using following:
I've disabled the ViewState from the whole page and all the inner user-controls. I've enabled it for individual controls where it was necessary (actually I've come up with no viewstate at all at the very end).
I've disabled callback state for some controls where it was possible, since i do not need any info about the page at callback except those that i explicitly pass as callback parameter.
I've simplified the layout a bit. (Got rid of another 2 callback panels on a filtering control - the was a panel with 2 comboboxes inside. I am now doing 2 callback on each combo-box instead of 1 panel-callback. Combo-box callbacks are faster and healthier since they don't return page layout as html). Also, I've changed labels to spans, buttons to inputs, etc. And i got rid of some nested tags.
Used RenderMode='Lightweight' for AspxNavBar (actually, that only reduced page size by ~20kb)
Improved the code behind architecture, refactored javascript, reduced the number of callbacks and event postbacks (!filter is now applied using callback), etc.
That's all =) Hope that will help somebody.