Split view in sencha touch - extjs

I am making application for IPAD and I need to show split view there.
What is my requirement in this:
I will show a list in left panel (Data will not be for nested. I have only 1 level)
When I click on any item of list, it will load a another list in right panel.
In right panel , if I click on any item, it will show the detail page in the same view.
Can any one give me a working example for it?

Related

React native zoom in effect when click item in grid view to detail view list

I'm new with react native, and I'm trying to achieve the exact same effect as Instagram or TikTok when you click an item in a gridview it opens up a listview with details of the items with a zoom in effect.
For now, I have a gridview, where data load with a limit of 10 items and when reaching the end gets the next 10 items. In order to try and achieve what I want to do, been searching but can't seem to figure out the right approach.
Should I have both list in the same screen, but how do I get the app to do the zoom in effect and open the detail view at the right index item ? Or should I have both list in separate views, but how do I keep the data synced ? Or is there another way that I'm missing and keep seem to find ?
Image might help understand (taken from instagram)

Pagination in tabbed list view

I'm trying to create tabbed list view where I have a filtered list of users in every tab. The problem is that the pagination on the bottom is one for all tabs it doesn't change. When I use it it tries to change the page of all tabs.
What I did is to put List in every Tab and I have a Datagrid in the List.
Is there anything I can do for the pagination?
This won't work unless you rewrite the List component completely.
I suggest you to have a custom menu instead, with an entry for each of your current tabs and defining the filters in the menu item urls.

What is the proper way to display a shared info panel for a list of items?

I am developing a web page. This page contains a list of items on the left side, and a information panel on the right side to show some summary information specific to the selected items see below:
When one item is selected by user, the information panel's content should be updated to show the active item's content.
My Question:
What is the proper way to implement this:
Spawn one information panel per list item. Then hide/show the the information panel for the active list item.
Make only one information panel globally. Then update the information panel's content based on list item selection?
Because I am using Angular 2 and Bootstrap, advices specific to these libraries are appreciated. (For example, shall I use route to implement the item-click-to-summary-display? Is there a component in Bootstrap library that is specifically for such purposes? )

What ExtJS event for when click tree and tab and different panel displayed

I have a treepanel and a content area to the right, where tab panels display.
When a tree node is clicked, I show a tab panel in content area to the right, where each tab displays different info about the tab topic.
Let's say I click a tree node, then on the second tab for its tab panel in the content area to the right.
Then I click a different tree node. That newly clicked nodes tab panel now displays in the content area to the right.
What event can I listen to in order to know when the previous node's tab panel is no longer visible? Hide does not work. Deactivate does not work. Wondering how I can detect this.
At least in my case, it looks like destroy event does the trick.

How to STOP my ExtJS panel from duplicating itself

I have a panel "Person" and inside of this panel I create another panel "Info" with some buttons to add functionality. There is yet another panel where you can choose from a list of "Person"'s. My problem is that when you select another "Person" from the overView panel that my "Info" button gets duplicated. So if you have clicked on 6 different "Person"'s that browser session, then you will have 6 different "Info" Panels within "Person".
Any suggestions will be helpful.
What I usually do for a page with multiple selections is put the panel that gets recreated in a window. Then when you need to create another panel of the same type, you make a new window. Therefore you don't need to clear out the previous window.

Resources