1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default Main view not rendered

    Main view not rendered


    Hello


    I have this simple app which initially should render MyNs.view.Main
    Something like:


    Code:
    Ext.application({
       ....
       views: ['Main'],   
       ....
       launch: function() {
           Ext.create('MyNs.view.Main') ;
           // or
           // Ext.Viewport.add(Ext.create('MyNs.view.Main')) ; // ??
      }
      ....
    }) ;
    I don't get errors (I'm using Beta2 debug) but I get a white screen. When I copy the code from Main in there like
    Code:
      launch: function() {
        var panel = Ext.create('Ext.Panel', {
            layout: 'card',
                items: [
                    {
                            html: "First Item"
                    },
                    {
                            html: "Second Item"
                    }
               ]
        });
        Ext.Viewport.add(Ext.create(panel)) ;
    }
    it works. Finally, here is the code inside MyNs.view.Main
    Code:
    Ext.define('Owa.view.Main', {
            extend : 'Ext.Panel',
            alias : 'widget.MainView',
            fullscreen: true,
            layout: 'card',
    
    
            items: [
                    {
                            html: "First Item"
                    },
                    {
                            html: "Second Item"
                    }
        ]
    
    
    });
    Any suggestions what might be the problem ?

    cheers
    Luca

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    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


    Code:
    Ext.create('MyNs.view.Main');
    Would work if fullscreen was set to true. I'm sure if you do this it will simply work.

    Code:
    Ext.create('MyNs.view.Main', {
        fullscreen : true
    });
    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.

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default


    Now I get a grey background (not white anymore

    I think something else is still wrong (but still no errors)

    Here is my launch code
    Code:
    launch: function() {
       
       // first panel creation
       var panel = Ext.create('MyNs.view.Main', {                
              fullscreen: true
       }) ;
        
       // second panel creation
       panel = Ext.create('Ext.Panel', {
                    layout: 'card',
                    fullscreen: true,
                    items: [
                    {
                            html: "First Item"
                    },
                    {
                            html: "Second Item"
                    },
                    {
                            html: "Third Item"
                    },
                    {
                            html: "Fourth Item"
                    }
                    ]
       }) ;
       Ext.Viewport.add(panel);
    }
    As you can see I set 'panel' twice. The first panel creation seems to break the app, because in this setting I get a grey background only. When I remove the first panel creation it works.
    I must do something wrong, any suggestions ?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    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


    var panel = Ext.create('MyNs.view.Main', {
    fullscreen: true
    }) ;

    // second panel creation
    panel = Ext.create('Ext.Panel', {
    layout: 'card',
    fullscreen: true,
    items: [
    {
    html: "First Item"
    },
    {
    html: "Second Item"
    },
    {
    html: "Third Item"
    },
    {
    html: "Fourth Item"
    }
    ]
    }) ;
    Ext.Viewport.add(panel);

    What that is doing is the first panel is created and automatically added to the Ext.Viewport as the first card. The second panel also has fullscreen to true so it is automatically added to the Ext.Viewport but the first one is still the active item. You don't need to do Ext.Viewport.add if the component has fullscreen to true, it's already added to 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.

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default


    ok, so does that mean that the viewport's layout is by default 'card' ?

    Furthermore, inside the MyNs.view.Main I moved the 'layout' and 'items' inside 'config' and it worked!!

    Thanks!!

    UPDATE: I think I've red in the docs that it defaults to 'card', but I cannot use it a such:

    Code:
        launch: function() {      
            Ext.create('MyNs.view.Main', {
                fullscreen: true 
            }) ;
            this.viewport.add(
                    Ext.create('MyNs.view.Secundo', {
                        fullscreen: true 
                    })
            ) ;
            this.viewport.setActiveItem(2) ; // still Main is shown
        }
    I must misuse the viewport here, right ?

    UpDate2: hmmm, add(...) gives an error too!

Thread Participants: 1