Reinitialize Sencha Touch app without performing a page reload - javascript

In some cases I need to reinitialize my Sencha Touch app. Till now I just used location.reload() to do this. However this is really bad for the user experience as the whole HTML page, JS and CSS will be reloaded, too.
So I'm looking for an easy and clean way to reset and reinitialize my app without reloading the whole page.
I tried to do something like Ext.Viewport.removeAll(true, true) to remove all view components from the viewport. But this results in some errors, when you masked the viewport before or if you showed some dialogs before. Sencha keeps some references to objects created while masking the view or showing a dialog, that won't be present any more after removing all components from the viewport:
Ext.Msg.alert()
Ext.Viewport.removeAll(true, true)
Ext.Msg.alert() // => will raise `TypeError: Cannot read property 'dom' of null`
How do you reinitialize your app without reloading the whole page? Is there any way to do it "the nice" way?

You can relaunch the app by calling the launch function of you application.
Suppose you application name is my_app, you can relaunch the app using:-
my_app.app.launch()

Related

How does Vue.js render page happens?

It really scares me that I might want to know this thing so much. That's the whole essence of SPA (Single-Page Application). I am curious about Vue.js rendering pages. I will list some of my knowledge and If I'm wrong, please correct me. Things I think I know:
There's a which might be a tree-structure parsed from html.
Then, DOM RENDER TREE IS constructoted from css and that DOM-TREE
After that, rendering page means data is shown on the screen.
What about Vue.js? I know it has virtual DOM. If I change something with Javascript in Vue.js, the real change happens in virtual DOM because it's faster and then syncing with the real template happens. If all that is right(if wrong, please tell me) then my question is the following:
When I use Vue Router and click some link to change the page, When new page gets shown, beforeMount() is called, then if i click back button to go the previous page, beforeMount() is called also. When using Vue Router and back button, does page rendering happens again or it's saved somewhere and to make it faster, it gets all the html from cache? So If I go to some page, then click back or Vue Router link, and page rendering starts from scratch, why would it be fast?
In my opinion, page rendering happens when there's some data changed or it's the first time I am accessing that specific URL. For the second time accessing, if data has not changed, it doesn't render the page from scratch. What do you think ? Thank you.

Unload reactjs component

I have got a website, that is lazyloading react scripts from different sources. For each script loaded, we provide a div with the name of the script as id. As soon as the script is loaded, it searches for the div with the id and renders the components.
As the site is displayed on a stationary tablet it does not reload very often and the memory footprint gets pretty big. Is there a way to completely unload a react script without reloading the website? Is there even a way to just unload any
kind of script? I guess the garbage collector is responsible for this, but currently its not even removing scripts / components that have unmounted a long time ago.
As I was searching for a solution, I found this thread about angular. I'm basicly looking for a way to do the same with react (Even tho I didn't test the angular solution).
Before removing the script tag and the container DOM node, you can use unmountComponentAtNode to allow React to do its cleanup.
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
Use a design pattern that uses conditional rendering and check in the componentDidMount if either data is returned or the specific section is to be rendered.

How to simulate a window resize in React

I'm relatively new to React (and Javascript, for that matter) so please bear with me.
To put my question shortly: how do i trigger a resize event on my window/component in React?
Now below is a little more context, which may actually prove that i'm asking a wrong question here.
I'm trying to create a small app with several tabs. The component is taken from BlueprintJS framework. The content of these tabs is loaded using a javascript API, which in turn uses RESTful requests to a remote application. The content that will be rendered in my tabs is some tables and charts.
Here is a caveat. The actual rendering of those tables and charts is performed by the javascript API i have to use, not by my React app. I have to pass an ID of a to the API, and it will render returned content into that .
The problem: Only the content of the default active tab is rendered correctly. If i switch to any other tab of my React application, the content is not rendered. HOWEVER if i resize the window the content is rendered instantly (i believe this is handled by the javascript API i'm using). Also if i update parameters of the currently active tab to make the API load updated content from the remote application, the content is also rendered in the active tab.
So i figured if i can simulate the resize event when switching between tabs i can get my content to render.
I tried setting a conditional class on my as depending on whether the current tab is active or not:
<div className={this.state.SelectedTabId === "tab1" ? "container" : "hidden"}>
where "container" and "hidden" have different width configured in CSS file, but this doesn't help. I also tried to directly manipulate the DOM (at least as a test) but even that didn't make a difference:
let e1 = document.getElementsByClassName('container')[0];
e1.width = e1.scrollWidth - 1;
renderedElement.resize(); //this is an API method which is supposed to re-render the content it returns

JS/Jquery: Initiate window resize without actually resizing

So I have a very specific problem that presented itself recently (right before our planned launch day tomorrow) and I am not completely sure how to solve it. I have built our website of an HTML-template with my modest front-end skills and we are very pleased with it. However, I can't seem to solve this.
The problem:
I have a filter system that allows a user to filter articles that are presented on a page. A user can even fill in this filter on the home page, direct to the page with the articles and have the filter applied. However, if then the filter is broadened (less strict) and new articles present itself, the pictures do not show up. Found out this is the case because the flexslider behind it has to be initialized again which happens on a window load (e.g. when the window is resized). The function that controls the initialization of the flexslider is in an external js file and I am not sure whether I can call on it from my own custom.js file, so I am thinking of just calling a resize/reload window function to active it.
The question:
Can I run a resize window function (or something that activates the flexslider) without hindering user experience (more specifically, without ACTUALLY resizing/reloading the window)? I will run this on a change in the filter.
I know this is a very specific question but hopefully somebody can help me out.
Take care!
p.s. it would be ideal if I could run the actual function that loads the flexslider but this is located in an external js file.
EDIT:
Briefly some additional info. If I go straight to the article page, it has no filter active and thus shows all articles, if I then start flipping through the filter, all is good. It is however only if I arrive from the homepage with a set filter that the problems arise. You then arrive on the article page which shows only the articles that are within the boundaries, and when the filter is taken away it has problems loading the images of the new articles showing up. As if it had not loaded these because they were not open on window load the first time.
You can trigger a resize event by creating a new event and passing it into the dispatchEvent command on window. There's a nice guide here. You'll want the type of event to be resize, since that's what it's listening for.
window.dispatchEvent(new Event('resize'))
This will work for events that were added via jQuery as well as events added via addEventListener.
I managed to solve it after all by delaying the function that drops the filter values into my inputs so it loads in all images initially before applying the filter. It happens at such speed it's hardly noticeable.
Also, I did try to initiate a window resize function, it did work without actually resizing anything, but unfortunately the images did not load in properly (overlap and such).
Anyway, it has been solved. Thanks for all the input!

MWC: how to rerender on URL change

Heyo everyone,
story time - skip if you don't care
I'm just starting out with Meteor + Polymer using Synthesis by #aruntk and I'm very happy about the results and greatful for the time he's invested in this project. There's one issue I'm having though.
I've previously only changed a iron-pages object to change the content of my view. Putting that in a FlowRouter like FlowRouter.route("/", action: {ironpages.select("home");}); works just fine. However, my site is getting more complex and I want to rerender a whole section now. I'm being told to do it reactively which is (to my poor understanding) the preferred way of building Apps here.
tl;dr - skip to here if you don't care about stories
So what I did is just putting mwcLayout.render("test-layout",{"main":"yas-manual-page"}); in my Router action. However, I have to reload to make the changes visible which is not what I want.
the router action is being called when changing the URL
the mwcLayout.render() call works if I reload the page once in the initial building of the site
calling mwcLayout.render() again at a later point does not do anything
I've read up on the topic and people say it's a problem with single-page apps and not building it reactively and whatnot, but I have no idea how this is not reactive. It's reacting to the URL change.
Please, if you have a minute, share some insight with me, I'm really stuck. :slight_smile:
Have a wonderful day y'all!
disclaimer: it's a repost form the Meteor forums which suggests coming here instead.
This behavior is added as a feature of mwc layout to prevent multiple re rendering during each route change. Workarounds here are to create another mwc layout or to set third argument forceRender. From the mwc:layout docs
forceRender
In mwc:layout we dont re render the layout unless the new layout is not equal to the current layout or forceRender argument is set. This is to prevent unwanted rerendering while changing routes(even if you change a param/queryparam the route gets rerun so does the render function written inside FlowRouter action). forceRender comes in handy when you have to change the rendering while keeping the current layout.
...
<mwc-layout id="demo-landing">
<div region="header"></div>
<div region="main"></div>
</mwc-layout>
...
imports/startup/client/router.js
...
action:function(params,queryParams){
mwcLayout.render("demo-landing",{"main":"test-layout1","header":"test-header"});
}
...
Now if you try
mwcLayout.render("demo-landing",{"main":"test-layout2","header":"test-header"});
from console it wont work since layout is not changed and forceRender is not set.
This works->
mwcLayout.render("demo-landing",{"main":"test-layout","header":"test-header"},true);

Categories

Resources