Results 1 to 2 of 2

Thread: How to change viewport based on dropdown selected value?

  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    49
    Answers
    1

    Default Answered: How to change viewport based on dropdown selected value?

    Hi i am doing a theme concept.

    I have a home view, inside a button to navigate settings view.
    Home > settings, here i have a dropdown with 2 values. Based on selected value i want to change the view of main landing screen like from grid view to list view.

    For this i created 2 views, as MainNavigationView & CustomView.
    MainNavigationView is the initial view mentioned in my app.js.

    app.js
    ?
    Code:
      launch: function() {
            // Initialize the main view
            Ext.Viewport.add(Ext.create('Maybank.view.MainNavigationView'));
        },
    settings view
    Code:
    //picker start
                {
                        xtype: 'panel',
                        layout: { type: 'hbox' },
    
    
                            items:[
                            {
                                html: '<div class="labeltext">Navigation Method</div>',
                                
                                flex: 1,
                                minHeight: '40px'
                            },
                            {
                                
                                xtype: 'selectfield',
                                name: 'theme',
                                options: [
                                {
                                    text: 'Cubicon',
                                    value: 'theme1'
                                },
                                {
                                    text: 'List',
                                    value: 'theme2'
                                }
                                ],
                                flex: 2
                            },
                            ]
                        
                    },
                //end picker
    here if i select cubicon my viewport sets to default "MainNavigationView", if i selects list then it should change to "CustomView".

    view.jpg

    suggest me how i can do this.

  2. Depends on your implementation. You can use Ext.Viewport.add() and Ext.Viewport.remove() to add/remove views from the viewport.
    If you are using a navigation view this can me done by view.push() and view.pop() views.
    http://docs.sencha.com/touch/2.3.1/#...avigation.View
    If you use a cardlayout you can change the current viewable panel with panel.setActiveItem()
    http://docs.sencha.com/touch/2.3.1/#...xt.layout.Card

    I would suggest reviewing the guides and the Kitchen Sink app
    It will give you a good idea of what components are at your disposal and options.
    http://docs.sencha.com/touch/2.3.1/#!/guide
    http://docs.sencha.com/touch/2.3.1/t...ink/index.html

  3. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    4,108
    Answers
    342

    Default

    Depends on your implementation. You can use Ext.Viewport.add() and Ext.Viewport.remove() to add/remove views from the viewport.
    If you are using a navigation view this can me done by view.push() and view.pop() views.
    http://docs.sencha.com/touch/2.3.1/#...avigation.View
    If you use a cardlayout you can change the current viewable panel with panel.setActiveItem()
    http://docs.sencha.com/touch/2.3.1/#...xt.layout.Card

    I would suggest reviewing the guides and the Kitchen Sink app
    It will give you a good idea of what components are at your disposal and options.
    http://docs.sencha.com/touch/2.3.1/#!/guide
    http://docs.sencha.com/touch/2.3.1/t...ink/index.html
    Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services [email protected]

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

    Need to include a test case use:
    The official Sencha Fiddle

Posting Permissions

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