Opening a Browser window popup in ExtJS 5 MVC application - extjs

I am working on an application in which we open all the views in a tabPanel, it was pretty simple to do that.
Now we got a new requirement where we have to open the view in Browser popup window so that it can be dragged to a secondary monitor. Ext.Window will not work.
we have a single page application and not sure how i can open a view in separate browser window.
i have tried the following, but then no JS events works on the new window:
var OpenWindow = window.open('', windowName, 'width=330,height=200,resizable=0');
OpenWindow.document.body.appendChild(divObj);//divObj is a div object in which i rendered the extjs view.
it open the popup but non of the style or js is working.
please help or point some example where it is accomplished.
Thanks in advance.

When opening a new window it doesn't have any information about ExtJS at all. you will need to include extjs into the new windows html. The best way to do this is to create a new popoup index file or page to be called. so say you are using routers properly in extjs say you have a site called http://testsite.com
Then you can in your window being opened create the elements in your current application to load when calling testsite.com/#popup then you just place it into your window.open. If you are managing your calls with something like PHP and using a framework for routing you can set it up the same way and have your javascript and extjs to be called from it as well.
var OpenWindow = window.open('http://testsite.com/#popup', windowName, 'width=330,height=200,resizable=0');
Reccomend creating a router like this: Extjs Routing Guide and from there have the component brought into focus on the page and placed that url into your popup if no backend system is used. Creating a new route in a backend link would be the best way to go, but you will still need to call your extjs applications components into your new page as well.

Related

Best practice to handle extjs refresh page

I wrote an ExtJS application like this:
the sub menu is dynamic added by clicking the button on the left.
The question is :
as the sub panel is created dynamically, so if I refresh the whole page, the panel will go away.
What I expected is it could still display the same content before refresh pages.
So, my question is how to handle this in ExtJS?
Do I need to record the current panel information into Ext.App?
ExtJS is a framework to build Web Applications that run inside the browser.
With Web Applications, just like normal applications, you don't close the program and start it anew (like a browser refresh does) just because someone wants to switch to a different toolbar or look at different data. You work with multiple panels, switch between them, and/or open windows.
You could for instance generate multiple panels inside a container with card layout, and bring to front the panel that you want to show right now.
If you have a license that allows you to use Sencha Architect, there is a nice "navigation" sample available in Architect from where you can start and look at how it's done.

WPF WebBrowser fails to load rendered HTML of an Angular JS website

I am working on a WPF aplication and I want to get the rendered HTML of a website that uses Angular JS technology. Here is what I've tried:
First, I create a WPF Web Browser control:
private WebBrowser webBrowser;
Then I navigate it to my target web page:
var uri = new Uri("http://my-angualrjs-site.com", UriKind.RelativeOrAbsolute);
webBrowser.Navigate(uri);
In the LoadCompleted event handler of my WebBrowser instance I cast the retrieved document to mshtml.HTMLDocument:
var doc = (mshtml.HTMLDocument) webb.Document;
And all I get is the raw HTML of the page, not the HTML processed and rendered by Angular JS from the server. Am I missing something?
I had a similar issue with not being able to get an angular page to render properly in the control.
After following Noseratios answer it was rendering and working good.
Maybe this would help you too:
C# webbrowser Ajax call
In short, you need to add features to the control to make the behavior closer to IE.
With his solution you'll be able to use code such as:
SetBrowserFeatureControlKey("FEATURE_AJAX_CONNECTIONEVENTS", fileName, 1);

Opening a backbone view in a new window

i am developing a trigger.io application using backbone, the entire app is in one page but i need to open a detail page in a new window (not a modal view, a tab in android).
I don't know if it's possible to render a view in a new window, or write to history the view and navigate to the url.
Can anybody give me some tips.
Thanks
If you want to open a special view, specify a route calling this view.
Now you create a simple link with target blank to the route.
The application gets started in the new window and loads the action mapped to the route.
I think this is the best solution to do this, although there are ways to create windows and communicate between them in JavaScript. If you need to control the new tab, e.g. closing the tab or act on its content you are forced to create the new tab by javascript and keep a reference to the new tab.

Creating Own Controller for ExtJS Tab?

In my app I have a project controller and a tree view in my viewport. The treeview displays a list of projects. In the center of my viewport there is a tab panel. When I select I project in my tree view I want to open a specific tab for the current project. That works fine in my project controller.
To clean my code I want to extract this logic in a new ProjectDetails controller which is responsible for the tab opening and my Tabs form. What will be the right way to do that?
I would create a new controller and instead of opening the tab I would load this new controller, init it and launch it.
But how to put the project as param to the controller and in which method I should open my tab and assigning events to the components? I thought the init method is too early because the components aren't created...
Thanks and regards!

Extjs Create New Browser

I am using Extjs4.0 to develop a web application. The application require drag a Extjs Panel outside current browser. Then create a new browser instance which has the panel object.
I did some research. Javascript has window.open function which can create a new window. But how can I pass the panel parameters to the new browser instance?
Does any one have relative experiences? or have some suggestions?
Try GreyBox
Note :- Sometime it breaks if there is an error in page
for e.g. it fails to open SO
but it works fine otherway
This is impossible. You are asking if you can drag an ExtJS Panel outside the Browser itself? Think about it, you can't do that.
You can open a new Window with ExtJS content, sure.

Resources