Extjs 4学习系列一

最新推荐文章于 2024-07-30 11:20:51 发布

andywan

最新推荐文章于 2024-07-30 11:20:51 发布

阅读量623

点赞数

分类专栏： ExtJs 文章标签： extjs function 测试 html resources layout

本文链接：https://blog.csdn.net/andywan/article/details/7015152

版权

ExtJs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

应用 EXTJS4 ----

一页面中引入库

需要加入项目的文件： Extjs 包中的 bootstrap.js，ext-all.js（调试使用ext-all-debug.js）,

                     resources 文件夹，/locale/ext-lang-zh_CN.js（中文支持）

        学习中在项目中建立的文件夹为 js,ExtJS文件都放在此文件夹下面。

       引入代码：

       <link rel="stylesheet"type="text/css" href="js/resources/css/ext-all.css"/>
       <script type="text/javascript" src="js/ext-all.js"></script>

中文支持，加在所有引用的最后:

<script type="text/javascript" src="js/locale/ext-lang-zh_CN.js"></script>

二在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：

    <script>

    function  fn()

    {

         alert(‘ExtJS库已加’);

    }

    Ext.onReady(fn);

    </script>

*** fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：

 <script>

    Ext.onReady(function()

    {

       alert(‘ExtJS库已加载!’);

    }

    );
    </script>

三 Extjs版本的测试
注意: Html中加入

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

以支持中文显示

文件内容：

    <html>
    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <title>ExtJS</title>

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

    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript" src="js/locale/ext-lang-zh_CN.js"></script>
    <script>

    </script>



    Ext.onReady(function()

         {

               Ext.MessageBox.alert("hello","这是个测试！");

         });

    </script>

    </head>

    <body>

    </body>

    </html>

在此基础上，页面加载完成后显示一个窗口，代码中改为：

    <script>

    Ext.onReady(function()

    {
            var win=new Ext.Window({title:"哈哈",width:300,height:200,html:'<h1>你好,这是个测试窗口！</h1>'});

            win.show();

    });

四 ExtJS4 测试页面的另一种写法
Test.Html:

<html>
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Hello Ext</title>

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

    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="js/locale/ext-lang-zh_CN.js"></script>

 </head> 
<body> </body> 
</html>

App.js

Ext.application({
    name:'测试',
    launch:function(){
       Ext.create('Ext.container.Viewport',{
              layout:'fit',
                     items:[
              {
                     title:'测试',
                     html:'这是个测试页面.'
              }
                     
                        
                     ]
              
       });

    }


    });

如出现乱码，请确认JS文件以UTF8的格式保存，关键是字符集要统一。

andywan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs 4学习系列一

应用 EXTJS4 ---- 一页面中引入库需要加入项目的文件： Extjs 包中的 bootstrap.js，ext-all.js（调试使用ext-all-debug.js）, resources 文件夹，/locale/ext-lang-zh_CN.js（中文支持）
复制链接

扫一扫