1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    mihaela.radu is on a distinguished road

      0  

    Default Answered: Sencha Touch 2 Master view and interchangeable custom components scenario

    Answered: Sencha Touch 2 Master view and interchangeable custom components scenario


    Hello, I am working on an application where I have a main view and multiple custom components. On application launch, I am creating a main view which contains 2 items defined using their xtypes: 'top' and 'somedetails'. The 'top' item is a component I want to show in the application all the time, but I would like to change 'somedetails' item with a different item when an event is firing for a control in 'somedetails'. More than that, I would like to show some sort of animation (similar to changing views) when I change the second item in the main view.
    So my questions are: is it possible to replace the 'somedetails' item in main view with a different item of 'someotherdetails' xtype dynamically? If yes, then how and could it be animated?
    There is my main view and relevant bits of code from app.js
    Thank you for any suggestions.
    MainView.js:
    Code:
    Ext.define('App.view.MainView', 
    { extend: 'Ext.Container',
      xtype: 'mainview',
      config: {fullscreen: true,
      scrollable: true,
      layout: 'vbox',
      items: [{ xtype: 'top', flex: 1, height: '20%' },
                { xtype: 'somedetails', flex: 2, config: { layout: 'fit'}}
      ]
    }
    });
    app.js:


    Code:
    Ext.application({
    name: 'App',
    requires: ['Ext.form.Panel','Ext.MessageBox','Ext.Label'],
    views: ['App.view.MainView',
               'App.view.component.custom.Top',
               'App.view.component.custom.SomeDetails',
               'App.view.component.custom.SomeOtherDetails'],
    launch: function () 
    {
       this.mainViewport = Ext.create('App.view.MainView);
       //change second item in main view here
        var someOtherComponent = { xtype: 'someotherdetails', flex: 2, config: { layout: 'fit'} };
        //how?
    }
    });

  2. What I would do is add the top view as a docked item to Ext.Viewport (you will need to set a height to it). top will then be visible throughout your app.

    Ext.Viewport is a container using card layout. So if you use setActiveItem on it to add and make that component active it can animate if you set the animation config in the card layout of Ext.Viewport.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What I would do is add the top view as a docked item to Ext.Viewport (you will need to set a height to it). top will then be visible throughout your app.

    Ext.Viewport is a container using card layout. So if you use setActiveItem on it to add and make that component active it can animate if you set the animation config in the card layout of Ext.Viewport.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    mihaela.radu is on a distinguished road

      0  

    Default


    Thank you for you suggestion, will give it a try.

Thread Participants: 1