1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Vadodara, Gujarat, India
    Posts
    3
    Vote Rating
    0
    a.suchariya is on a distinguished road

      0  

    Default Unanswered: How to add view to viewport

    Unanswered: How to add view to viewport


    Hello,

    I have following code.

    Code:
    Ext.setup( {
        onReady : function() {
            var form = Ext.create('Ext.form.Panel', {
                fullscreen : true,
                items : [ {
                    xtype : 'textfield',
                    name : 'email',
                    label : 'EMail',
                    labelWidth : '35%'
                }, {
                    xtype : 'passwordfield',
                    name : 'password',
                    label : 'Password',
                    labelWidth : '35%'
                }, {
                    xtype : 'button',
                    text : 'Login',
                    margin : '5 5 5 5',
                    handler : function() {
                        var values = form.getValues();
                        if (values.email == '') {
                            Ext.Msg.alert('Alert', 'Email Address can not be empty.', Ext.emptyFn);
                        }else{
                            // Call to home view
                        }
                    }
                }, {
                    xtype : 'button',
                    text : 'Forget Password',
                    margin : '5 5 5 5',
                    handler : function() {
                        // Forget Password Clicked
                    }
                } ]
            });
            Ext.Viewport.add(form);
        }
    });
    This is my app.js file

    The following is index.html file.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>MVC</title>
    
    
    <script type="text/javascript" src="lib/cordova-1.5.0.js"></script>
    <script type="text/javascript" src="lib/sencha/sencha-touch-all.js"></script>
    <link rel="stylesheet" href="lib/sencha/sencha-touch.css" />
    
    
    <script type="text/javascript" src="app/app.js"></script>
    
    
    <script type="text/javascript" src="app/view/home.js"></script>
    
    
    </head>
    <body>
    </body>
    </html>
    and the following is home.js file

    Code:
    var form1 = Ext.create('Ext.form.Panel', {
        fullscreen : true,
        xtype : 'homeview',
        items : [ {
            xtype : 'textfield',
            name : 'email',
            label : 'EMail',
            labelWidth : '35%'
        }, {
            xtype : 'passwordfield',
            name : 'password',
            label : 'Password',
            labelWidth : '35%'
        } ]
    });
    As you can see the app.js file has code line "// Call to home view". I want to add home.js screen there. how can I do that ? Please Help me.

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


    If you create a view with the fullscreen config set to true then it will automatically be added to Ext.Viewport. Optionally you can instead do Ext.Viewport.add(component);. This will only add the items, you still need to Ext.Viewport.setActiveItem(component); to make the component active.
    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
    Mar 2012
    Location
    Vadodara, Gujarat, India
    Posts
    3
    Vote Rating
    0
    a.suchariya is on a distinguished road

      0  

    Default


    mitchellsimoens - I understand what you are saying , but suppose now I want to add view which is defined home.js as mentioned above how I create/add/show that view on the screen ?

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    17
    Vote Rating
    1
    Sn4k3 is on a distinguished road

      0  

    Default


    Hej mitchellsimoens,

    If you switch the javascript imports so that the home.js file is imported before your app.js file like so:
    PHP Code:
    <script type="text/javascript" src="app/view/home.js"></script>
    <script type="text/javascript" src="app/app.js"></script> 
    then it should be possible to write Ext.Viewport.setActiveItem(form1) in your app.js file to make the homescreen become visible.

    Best regards

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    Vadodara, Gujarat, India
    Posts
    3
    Vote Rating
    0
    a.suchariya is on a distinguished road

      0  

    Default


    Sn4k3 - I have tried with your example, now its not showing error but also not showing the home.js content. its showing blank page there.
    Regards,
    AvtarSingh Suchariya

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

      1  

    Default


    You should not include <script> tags, this is what Ext.Loader is for. If you require a class it will load the file.
    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.

Thread Participants: 2

Tags for this Thread