Sliding Menu with Onsen ui - onsen-ui

I've built a sliding menu with tabbar Onsen ui Like this Url:
Combine Onsen UI sliding menu and tabbar
But when I try to navigate to another page onclick="Navigator.pushPage('newpage.html', {animation: 'slide'})". I get an error:
"Fail to fetch PageView from one-page element".
And on the new page, trying to pop the page with
onclick="Navigator.popPage()"
fails as well! Any help would be appreciated.

Related

React navigation and routing problem with a multipage application

I have a react project with multiple pages however if i scroll in one page and then use the navigation bar to navigate to another page the scroll is not undone so the page starts at the position of the previous scroll
Please refer to this question:
react-router scroll to top on every transition
They asked the same question.

Material UI Drawer scrolls background page to top when opening

I am using material-ui as the UI package for an app.
In the app I'm using material-table with a custom infinite scroll.
When a row is clicked, a drawer opens from the right of the webpage.
Once the drawer opens, the background of the drawer (the infinite scroll table and general page) automatically scrolls back to the top of the page.
This makes this page very unfriendly to users.
I've tried the solutions that are mentioned here, but it doesn't seem to work.
I tried to use it like this:
<Drawer ModalProps={{disableRestoreFocus: true}} disableRestoreFocus>{content}</Drawer>
I couldn't find anymore information on material-ui github, or here on stack overflow.
Has anyone encountered this issue or know any other options I can try?
Thanks in advance.
For material-ui v4, you can add this attribute on the drawer component:
disableScrollLock={true}

AngularJS nested modal templates

I have a spa developed with AngularJS (routing with ngroute). Every template have the menu, in the menu there is a back button. I want to return to the previous view with he's state (information, scroll in the page etc). If I code every button in the menu to open the next template in modal that have dimension of full screen, and the back button just close the current modal. This method can do a memory leak?
This case is an hybrid application running in the tablet, the back button is in the menu of application not that of the browser.
Why don't you use $window.history.back();
Why don't you create a template for the menu and include it into your views by using ng-include?

Is there any anchor tag in Onsen UI?

I have a long Onsen UI page. After scrolling to the bottom of the page, I was able to load a new content in the same page. However, the page is still displayed at the same and current position.
Note: I am using ons-list. Is there any auto scroll to top in ons-list after the list is refreshed?
I wonder how I can make it to the top position after new content is loaded.
Anchors and scrolling depend only on the browser.You can use Angular $anchorScroll or anything similar to handle that behavior. What you could find useful in Onsen UI for this are the events. You can address the scroll with the mentioned tool in a postpop event in case you are using popPage, or in any other event listed in Onsen UI's docs.
Hope it helps.

Reload store / refresh grid in main window when button is clicked in Modal window in EXTJS

I am facing a problem in my EXTJS application.
Basically there is a grid which displays all the projects. In my main menu which is a different file, I have "Add Project" link. On clicking this, Add Project modal window opens irrespective of any main window which may be project list or dashboard currently displaying in browser.
Now I want if the main page is the Project List in the browser and I open the Add Project modal, When I will click Add button, I want the grid / store in the project list page should reload or refresh.
I am not getting any way to get a reference to the project store in the project list page from the Add Project modal window.
Can any one please help me on this.
Thanks in Advance... :)
You can use Ext.getStore('your_store_name'); to get a reference to your store.
The sencha grid tutorial covers this: http://docs-origin.sencha.com/extjs/4.2.2/#!/guide/grid

Resources