PDA

View Full Version : change between different views



kovacsm
9 Nov 2016, 2:35 AM
Hello,

I'm new with Sencha Architect. So I created a Classic project. I have two different views. The first view is a login page and the second view is a is a information panel where I want to show sensor data in a grid and a chart. So after a successful login I want to change the view from the login page to the information panel.
In my login page, I use a onClick event to connect a websocket connection with my webserver. After successful connection I want to change the view to the information panel ( I want to do this in my onClick event as well).

So i tried
Ext.Viewport.setActiveItem("schulerInfo");

schulerInfo is the id of the information panel. It doesn't work and my browser gives me this error : "TypeError: Ext.Viewport.setActiveItem is not a function".

Is this the right way or should I change the view in a controller? (I didn't work with controllers before)

How can I fix this problem?

petr.vecera
9 Nov 2016, 1:53 PM
Hi

Sorry for just quick answer, someone could give you full answer. But you can check this example:
http://examples.sencha.com/extjs/6.2.0/examples/classic/ticket-app/index.html

You can check the source code of the example in the ext framework folder. You can download the framework from the page / support portal if you don't already have it.

grosst
14 Nov 2016, 9:42 PM
Hello,

I'm new with Sencha Architect. So I created a Classic project. I have two different views. The first view is a login page and the second view is a is a information panel where I want to show sensor data in a grid and a chart. So after a successful login I want to change the view from the login page to the information panel.
In my login page, I use a onClick event to connect a websocket connection with my webserver. After successful connection I want to change the view to the information panel ( I want to do this in my onClick event as well).

So i tried
Ext.Viewport.setActiveItem("schulerInfo");

schulerInfo is the id of the information panel. It doesn't work and my browser gives me this error : "TypeError: Ext.Viewport.setActiveItem is not a function".

Is this the right way or should I change the view in a controller? (I didn't work with controllers before)

How can I fix this problem?

https://docs.sencha.com/extjs/6.2.0/modern/Ext.Container.html#cfg-activeItem

active item is part of the card layout.

ideally you wan't to shy away from ID's, i'd really look into references. ... why not do something like.

Successful login -> close window -> create viewport w/ nested panel and data;
or --
var schuler = Ext.widget(schulerPanel.alias/xtype');or Ext.Create('panel class name')

panelName.getLayout().setActiveItem(schuler) ... and the ID wouldn't work unless the panel was already loaded [you can test this by trying Ext.getCmp('id') )]



Anyway there are multiple ways to add a panel but without a sample there's no real way to fully help you achieve whatever you're trying to do. So I hope the above helps..

kovacsm
23 Nov 2016, 4:28 AM
Thanks for the answers. But I didn't find a good solution. I should explain my problem again.
So the main task is to switch between different views (panels). I built a test project where I added a viewport and inside of the viewports two different panels. The first panel is the toppanel, I gave it a ID. In the toppanel I added a toolbar with a button, to this button I mapped a click onEvent. The second is the contentPanel, I gave it a ID. In the contentPanel I added a toolbar and a button with a click onEvent as well.
After adding the panels I promoted these two panels to classes. After that I added a Navigation Controller. For every Panel I added with right click->Global Controller ->Add a Reference. Now I wanted to use the global references of these panels to switch between the views with help of the click OnEvents.
How can I get the global references in the two click OnEvents from the global controller?
that I tried in the click OnEvent Handlers of the button


var refs = this.getReferences();
//Hide topPanel
refs.topPanelsetHidden(true);
//Show contentPanel
refs.contentPanel.setHidden(false);


but with the first line I know I cannot have access to the references.

Can anyone help me?
Thanks for a answer!

grosst
23 Nov 2016, 1:33 PM
Thanks for the answers. But I didn't find a good solution. I should explain my problem again.
So the main task is to switch between different views (panels). I built a test project where I added a viewport and inside of the viewports two different panels. The first panel is the toppanel, I gave it a ID. In the toppanel I added a toolbar with a button, to this button I mapped a click onEvent. The second is the contentPanel, I gave it a ID. In the contentPanel I added a toolbar and a button with a click onEvent as well.
After adding the panels I promoted these two panels to classes. After that I added a Navigation Controller. For every Panel I added with right click->Global Controller ->Add a Reference. Now I wanted to use the global references of these panels to switch between the views with help of the click OnEvents.
How can I get the global references in the two click OnEvents from the global controller?
that I tried in the click OnEvent Handlers of the button


var refs = this.getReferences();
//Hide topPanel
refs.topPanelsetHidden(true);
//Show contentPanel
refs.contentPanel.setHidden(false);



but with the first line I know I cannot have access to the references.

Can anyone help me?
Thanks for a answer!

in the future please try and separate your statements, that wall of text is a pain to read especially when it's all step by step items.

Are you using references or ID's ? If you're using ID's, then you can use Ext.getCmp('id');

If you're just trying to sync up your events, make sure you have your views required in there..

Other than that, is a global controller really necessary? You could handle all your navigation within the panel where the navigation resides. Just make sure you have the panels required so they're accessible.

On the most basic level of changing panels, see attached for changing a card panel via a viewcontroller and global controller button.

I'm telling you though right now that the Global Controller is going to be more difficult to implement. If you want to read further about using them effectively, jump down to the Ext JS 4 forums or google EXTJS 4 controllers.


Archive Project DL link -
https://onedrive.live.com/redir.aspx?cid=2f89671b5285bc21&resid=2F89671B5285BC21!566&parId=2F89671B5285BC21!135&authkey=!AEbDS_4luBjp84M