Extjs 4学习2

时间:2023-03-09 22:15:33
Extjs 4学习2

主要学习采自:http://www.ishowshao.com/blog/2012/06/19/extjs-4-getting-started/

用的sdk为extjs4.2.1

根据其中的提示装了一个apache,我的安装目录为:C:\Apache2.2,然后在目录C:\Apache2.2\htdocs下随便建立了一个web工程demotest,其实建这个东西主要是想利用eclipse的智能提示什么的,图的就是方便。

这样建好后的工程截图如下:Extjs 4学习2

然后在工程根目录下建立两个文件:app.js,index.html,

两个文件如下所示:

index.html

<html>

<head>

    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="/extjs4.2.1/resources/css/ext-all.css">

    <script type="text/javascript" src="/extjs4.2.1/ext-all.js"></script>

    <script type="text/javascript" src="/demotest/app.js"></script>

</head>

<body></body>

</html>

app.js

Ext.application({

    name: 'HelloExt',

    launch: function() {

        Ext.create('Ext.container.Viewport', {

            layout: 'fit',

            items: [

                {

                    title: 'Hello Ext',

                    html : 'Hello! Welcome to Ext JS.'

                }

            ]

        });

    }

});

然后在chrome浏览器上输入:http://localhost/demotest/index.html,显示如下:

Extjs 4学习2