Microsoft Dot Net: Extjs Hello World application (Begginers introduction to extjs)

Monday, June 1, 2015

Extjs Hello World application (Begginers introduction to extjs)

Show Hello World Alert

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
<script type="text/javascript">

    Ext.application({
        name: 'MyApp',

        launch: function () {
            alert("Hello World");

        }
    });
</script>

</body>
</html>

Show Hello World HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
<script type="text/javascript">
var myComponent=Ext.create('Ext.Component',{
    html: 'HelloWorld'});

Ext.application({
    name: 'MyApp',

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            items: [
                    myComponent            ]
        });
    }
});


</script>

</body>
</html>


The above code can also be written in a short hand way using xtype (preferred way)


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
<script type="text/javascript">
Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                    xtype: 'component',
                    html: 'HelloWorld'                }
            ]
        });
    }
});

</script>

</body>
</html>

Microsoft Dot Net

Translate

Monday, June 1, 2015

Extjs Hello World application (Begginers introduction to extjs)

No comments:

Post a Comment