Shalvin Interests

Sunday, April 17, 2016

ExtJS 6 Getting Started


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="ext-all.js"></script>
    <script type="text/javascript">
        Ext.define("MyApp.Session",
            {
                config: {
                    Name: '',
                    Specialization: ''
           }
           });

        var session = Ext.create("MyApp.Session",
            {});
        session.setName('Shalvin P D');
        session.setSpecialization('Microsoft .Net')
        alert(session.getName() + " - " + session.getSpecialization());
    </script>
</head>
<body>

Creating Component

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="ext-all.js"></script>
    <script type="text/javascript">
        var myComponent = Ext.create('Ext.Component', {
            html:'Hello World ExtJS Shalvin'
        });

        Ext.application({
            name: 'MyApp',
            launch:function()
            {
                Ext.create('Ext.container.Viewport', {
                    items: [
                        myComponent
                    ]
                });
            }
        });
    </script>
</head>
<body>

</body>
</html>



Data
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script src=&quot;ext-all.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        Ext.application({
            name: 'MyApp',
            launch: function () {
                Ext.create('Ext.container.Viewport', {
                    items: [
                        {
                            padding: 40,
                            tpl: 'Trainer : {name} {location}',
                            data:{
                                name: 'Shalvin P D',
                                location:'Kochi'
                            }
                        }
                       
                    ]
                });
            }
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;


</code></pre>


No comments:

Post a Comment