1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    215
    Vote Rating
    1
    Answers
    4
    marxan is on a distinguished road

      0  

    Default Unanswered: Issue using xtype with MVC

    Unanswered: Issue using xtype with MVC


    Hello,

    I'm trying to use sencha touch for the first time and I don't know what's going on when using xtype.

    I don't have any error, but the panel I've created doesn't show up.


    Main file:
    Code:
    Ext.define('Mobile.view.Main', {    extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar',
            'Ext.Video'
        ],
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
                {
                    title: 'Bienvenue',
                    iconCls: 'home',
    
    
                    styleHtmlContent: true,
                    scrollable: true,
    
    
                    items: {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Bienvenue'
                    },
    
    
                    html: [
                        "Ici la description de l'application ",
                        "",
                        ""
                    ].join("")
                },
                {
                    title: 'Choix Véhicule',
                    iconCls: 'action',
    
    
                    items: 
                        {
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'Sélectionner votre véhicule dans la liste ci-dessous'
                        },
                        {
                        	xtype: 'test'
                        }
                   
                }
            ]
        }
    });

    Here's the xtype I've defined and I call in the main file.
    Code:
    Ext.define('Mobile.view.form.Test', {	extend: 'Ext.form.Panel',
    	//alias: 'widget.test',
        fullscreen: true,
    
    
        xtype: 'test',
    items: [
            {
                xtype: 'fieldset',
                title: 'Contact Us',
                instructions: '(email address is optional)',
                height: 285,
                items: [
                    {
                        xtype: 'textfield',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        label: 'Email'
                    },
                    {
                        xtype: 'textareafield',
                        label: 'Message'
                    }
                ]
            }
        ]
            });
    I have added the view in the app.js file.

    So the app renders well, but when I click on the button "Choix Véhicule" It shows me a white screen.

    I have also tried with alias instead of xtype but same problem...
    Does Anyone have an idea what could be the problem?

    Any help would be greatly appreciated.

    Regards,

    Marxan

  2. #2
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,864
    Vote Rating
    933
    Answers
    3611
    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


    This is because the form is not receiving a size either by the height config or by a parent layout. If you inspect the DOM, you will likely see the form's DOM nodes but with a height of 0px.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    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.

  3. #3
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    215
    Vote Rating
    1
    Answers
    4
    marxan is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    This is because the form is not receiving a size either by the height config or by a parent layout. If you inspect the DOM, you will likely see the form's DOM nodes but with a height of 0px.
    I don't know where I have to specify a heigth of this component. I thought that this config will set the height in all the screen :
    Code:
    fullscreen: true
    I have also tried to set an id to my 'test' form and then in my console. I do a Ext.getCmp('test').setHeight(300). I can see that the component has now a height but still nothing on the screen is displayed.

    I'm an extjs developer, is there a big difference between sencha touch and extjs?

    Best regards,

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    77
    Vote Rating
    1
    Answers
    6
    kidqn is on a distinguished road

      0  

    Default


    Yes, because fullscreen: true with heigth: 285 are conflict together, you should choose only one.
    You can set layout: fit instead of fullscreen: true or specific height.
    Note that: shouldn't need set fullscreen: true, should use it when you can controll size of elements in your page.

Thread Participants: 2