Results 1 to 5 of 5

Thread: change between different views

  1. #1
    Sencha User
    Join Date
    Nov 2016
    Location
    Germany
    Posts
    4

    Default change between different views

    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
    Code:
     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?

  2. #2
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    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...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.

  3. #3
    Sencha Premium User
    Join Date
    Oct 2012
    Location
    United States
    Posts
    130
    Answers
    11

    Default

    Quote Originally Posted by kovacsm View Post
    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
    Code:
     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/...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..

  4. #4
    Sencha User
    Join Date
    Nov 2016
    Location
    Germany
    Posts
    4

    Default change between views

    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
    Code:
    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!

  5. #5
    Sencha Premium User
    Join Date
    Oct 2012
    Location
    United States
    Posts
    130
    Answers
    11

    Default

    Quote Originally Posted by kovacsm View Post
    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
    Code:
    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...EbDS_4luBjp84M

Similar Threads

  1. How to change the views for different screen resolution??
    By arindam.hit in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 13 Jun 2013, 1:41 AM
  2. [Errors] Change between views
    By arleslie in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 7 May 2013, 12:21 AM
  3. Using Buttons to change Views.
    By jampa in forum Community Discussion
    Replies: 2
    Last Post: 15 Jul 2012, 1:03 AM
  4. Change views when clicking on tabs?
    By Kachipun in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 24 Jun 2012, 2:02 PM
  5. Change views of a viewport
    By Biloutage in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 15 Jun 2012, 7:00 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •