Sencha Touch TabPanel fires show event on all children on load - sencha-touch-2

I have a tabpanel with 4 lists as child items. When each list is shown I want to load it's data. When I launch the app all 4 show events fire even though only the first tab is active. Is this how it's supposed to be? I could use activeitemchange of the tabpanel to populate the lists but I want to keep the code separate for each list. It doesn't make sense having the tabpanel control it's child items.

There's another event call 'painted' which fires whenever a component as actually shown to the user. I don't know what the difference between 'show' and 'painted' is but this seems to fix my problem.

Related

Pass TappedEvent to a sibling controll in uwp

I have a user control with a bunch of buttons behind a scroll viewer that has a grid with a bunch of rows in it. The first row is empty. The buttons in user control need to respond to tap/click when not obscured by scroll viewer's content. My problem is that the scroll viewer caches the tap event and it is not passed to the user control because it is a sibling to the scroll viewer. I would like to somehow pass/propagate the tap event to the user control to get the buttons working. I can't find a good solution to this issue because there seems to be no RaiseEvent(e) method on UI elements in uwp. Due to specific requirements, the whole page needs to react to scroll and the buttons are required to be behind the scroll viewer content. Does anyone know if it is possible to pass the whole event to another element or somehow allow for both controls to handle it? Thanks in advance.

Dgrid change page show busy or standby indicator

I have dgrid with paging, 50 rows per page, and using a memory store
The last 2 columns are editable select and filtering select, so when I change page it takes some time.
The problem is that there is not indication to the user that something is happening.
No loading message or a spinning image.
So I want to know if there is an event that fires up before the change of page, so I can manually show a spinner.
So far I have not been able to find such an event.
I used firebug to listen to all click that fires up when I click on the grid, and clicked on the next button to see what will happen.
The only event that fired up was after the rendering of the page. Before the rendering I got nothing.
So how can I show a busy indicator to user when I change page on the dgrid?
A div with the class dgrid-loading is added to the content area of the grid when Pagination loads a new page, and that div spans the full width and height of the content area. You can add styles to this class to add a loading indicator.
You can also add a loading message via the grid's loadingMessage property.
There's an explanation and demonstration of the loading node in the Grids and Stores tutorial in the Customizing Messages section.

Button in UserControl in main page not reacting to pointer in Windows Store apps

To share a common display layout in a Split template Windows Store app, I put a Back button, title TextBlock, and another button in a UserControl, and then use that control in most of my pages. My problem is that in the main page, neither of the buttons will react to pointer activity, be it pointer over or clicking. However, it works fine in any other page. To isolate it, I created a blank app and duplicated the UserControl, but it works in that case.
How can I debug this?
Thanks.
-John
In an "ItemView" page of a "Split" template app, the Grid containing the back button and title must be below the GridView and ListView in the XAML code. Apparently the GridView, with no Grid.Row, and a Grid.RowSpan="2" needs to overlay the first and second rows, and if the button is beneath the GridView, it must assume it is not visible and doesn't need to respond to events. I moved my new user control instance to below the GridView, and the buttons work now.
This whole scheme of overlaying both rows makes no sense to me, but without the Grid.RowSpan="2", the items don't split nicely into two rows for me. I think such odd layout should have a comment explaining it in the template. Perhaps it could save someone else from this same kind of issue.

Creating draggable panels

I want to create a panel which has three child panels which can be dragged to left side only. when they are fully visible( when they are completely appear on the parent panel), the parent panel should be desabled ( I used modal config, but the child panel overlay on one another and they resized to the html content inside them). When three child panels were dragged to the left side, the parent panel should be enabled. User may again drag those child panels right to the initial position, then the parent panel again should be desabled. I could only create the child panels with the sliding effect, but don't know how to acheive other requirements, coz i am new to sencha touch and extjs. Are there any other resources to learn more about sencha and ExtJs?
And other thing is, as an example, Sencha docs dont explain more about Draggable object's 'constraint' ,'direction' ..etc. where can I find more details about Those classed which are not fully described in their docs.
I have attached two images( initial look of the panels and how it should look when child panels are dragged), Can anyone give me few hints how to achieve my task?. Thank you very much!!

Sencha Touch 2 NestedList goToNode() is not working

I am invoking goToNode() like so:
nestedList.goToNode(Ext.create('myStore').getRoot());
The list shows the title in the toolbar correctly with no back button (so it seems like we're at the root), but the actual items in the list (the children) are not correct. They are leaves, and one is selected -- the last one I tapped.
I am navigating through a NestedList and end up at a detailCard. I transition to another view, and once I'm finished at that view, I want to go back to the NestedList at the very "top" of the list. I thought I could use goToNode() but it isn't working. How can I do this? It seems to me that goToNode is not working correctly.