How to add view to viewport

**a.suchariya** · 3 Apr 2012 5:08 AM

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.

**mitchellsimoens** · 3 Apr 2012 6:21 AM

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.

**a.suchariya** · 3 Apr 2012 9:47 PM

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 ?

**Sn4k3** · 4 Apr 2012 2:00 AM

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

**a.suchariya** · 4 Apr 2012 2:09 AM

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.

**mitchellsimoens** · 4 Apr 2012 4:20 AM

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

How to add view to viewport

Thread Tools

Search Thread

Display

Hybrid View

Unanswered: How to add view to viewport

Unanswered: How to add view to viewport

Tags for this Thread