Results 1 to 4 of 4

Thread: [Navigation View] Push not changing the view

  1. #1
    Sencha User
    Join Date
    Feb 2015
    Posts
    2

    Default Answered: [Navigation View] Push not changing the view

    Hi,
    I'm new to sencha touch and i'm trying to set up an application with a tabBar at the bottom. Each page that you access through the tabBar has a navigation view.

    I managed to have the toolbar and the 1st view of each page but I can't change the view properly. When I click the button that is supposed to push a new view, the "back" button appears but the view doesn't change.

    Here's my code :

    Main.js (that is called at the launch of the app) :
    Code:
    var window_add =
    {
        id: 'add',
        iconCls: 'add',
        title: 'Add',
    
        items : [
            {
                xtype :'addview'
    }
    
        ]
    
    };
    
    Ext.define('MyApp.view.Main', {
        extend: 'Ext.tab.Panel',
        alias: 'widget.mainview',
        xtype: 'main',
    
        config:
        {
            id : 'mainbar',
            tabBarPosition: 'bottom',
            fullscreen : true,
            items: [window_add]
    
        }
    
    });
    

    Add.js :

    Code:
    Ext.define('MyApp.view.Add', {
        extend: 'Ext.navigation.View',
        alias: 'widget.addview',
        iconCls: 'add',
        title: 'Add',
    
    
        config: {
    
            items: [
                {
                    xtype: 'formpanel',
                    html: 'Add'
    },
                {
                    xtype: 'button',
                    docked: 'bottom',
                    action:'soir',
                    id : 'bSoir',
                    margin: 10,
                    height : 150,
                    text: 'Service soir'
    },
                {
                    xtype: 'button',
                    docked: 'bottom',
                    action:'midi',
                    margin: 10,
                    height : 150,
                    text: 'Service midi'
    },
                {
                    xtype :'label',
                    docked : 'bottom',
                    style: 'font-weight:bold;text-align:center;display:block;'
    
                },
                {
                    xtype: 'image',
                    html: '<img style="height: 71px; width: 100px;" src="..." />',
                    margin : 10,
                    docked:'bottom'
    }
            ]
        }
    });

    Add2.js :

    Code:
    Ext.define('MyApp.view.Add2', {
        extend: 'Ext.Container',
        alias : 'widget.addview2',
        config: {
            items: [
                {
                    xtype: 'image',
                    html: '<img style="height: 71px; width: 100px;" src="..." />'
    },
                {
                    xtype :'panel',
                    html : 'A construire.'
    }
            ]
    
        }
    });

    AddController.js :

    Code:
    Ext.define('MyApp.controller.AddController', {
        extend: 'Ext.app.Controller',
    
        config: {
            views: [
                'Add',
                'Add2'
    ],
    
            refs: {
                bMidi: '#bMidi',
                bSoir: '#bSoir'},
    
            control: {
                bMidi: {
                    tap: 'onMidi'
    },
                bSoir: {
                    tap: 'onSoir'
    }
            }
        },
        onSoir: function(button, e, options) {
            alert("Click soir");
    
            button.up().push({
             xtype: 'addview2'});
        }
    });

    Hope you can see what's wrong.

    Thanks,

  2. xtype is an alias, these are the same:

    Code:
    xtype : 'foo'
    alias : 'widget.foo'
    xtype is just a shortcut to defining a widget alias.

    First thing I see is you are misusing the image component. Instead of passing the html config, pass the src config. By default this will use the background-image style and I see you want to use <img> tag. You can accomplish this via the mode config:

    Code:
    {
        xtype : 'image',
        src : '...',
        mode : 'image'
    }
    You may need to check that your layout is correct still in that your components are getting sizes. Not everything will auto-size.

  3. #2
    Sencha Premium Member u25771's Avatar
    Join Date
    Sep 2012
    Location
    Switzerland :)
    Posts
    253
    Answers
    27

    Default

    xtype != alias... I think this is the problem. Try this (untested):

    Code:
    onSoir: function(button, e, options) {
            alert("Click soir");
    
    
            var viewToAdd = Ext.create('widget.addview2',{});
    
    
            button.up().push(viewToAdd);
    }
    Here's the official Sencha Guide for the navigation view: LINK
    Last edited by u25771; 12 Feb 2015 at 5:03 AM. Reason: Additional Link to Guide
    Mark thread as answered if your problem could be solved and leave a vote for helpful answers

    For more help check out my new blog: http://abitofcoding.blogspot.com

    T
    o get in contact with me just send me a message on Google+

  4. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    xtype is an alias, these are the same:

    Code:
    xtype : 'foo'
    alias : 'widget.foo'
    xtype is just a shortcut to defining a widget alias.

    First thing I see is you are misusing the image component. Instead of passing the html config, pass the src config. By default this will use the background-image style and I see you want to use <img> tag. You can accomplish this via the mode config:

    Code:
    {
        xtype : 'image',
        src : '...',
        mode : 'image'
    }
    You may need to check that your layout is correct still in that your components are getting sizes. Not everything will auto-size.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #4
    Sencha User
    Join Date
    Feb 2015
    Posts
    2

    Default

    Code:
    layout : fit
    It did the trick.
    I'll use the img properly.


    Thanks a lot.

Posting Permissions

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