ExtJs初步学习

       ExtJs是一个很不错的Ajax框架,可以用来开发带有华丽外观的客户端应用,使得我们的b/s应用更加具有活力及生命力!

      ExtJs是一个用javascript编写,与后台技术无关的前端ajax框架。

 

ExtJs初步学习_第1张图片

adapter:负责将里面提供第三方底层库(包括Ext自带的底层库),映射为Ext所支持的底层库

docs:API帮助文档

examples:提供使用ExtJs技术做出的小实例

paks:全部ext源码

resources:Ext UI资源文件目录,如:css、图片文件都存放在这里

应用ExtJS

   应用extjs需要在页面中引入extjs样式,样式文件为resources/css/ext-all.css extjsjs库文件主要包含两个adapter/ext/ext-base.js ext-all.jsext-base.js表示框架基础库,ext-all.jsextjs的核心库,adapter表示适配器,也就是说可以有多种适配器

要是使用ExtJs库,要在页面中使用以下几句:

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

<script type="text/javascript" src="script/ext/js/ext-base.js"></script

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

//路径根据情况可做修改

一般情况下,每一个用户的ExtJs应用都是从Ext.onReady开始的,使用ExtJs应用程序代码大致如下:

<script>

function fn(){

alert(“hello”);

}

Ext.onReady(fn);

</script>

这里fn可以写成一个匿名函数的形式,因此上面的代码可以改成下面的形式:

<script>

function fn(){

alert(“hello”);}

Ext.onReady(function(){

alert(“hello”);

});

</script>

 

第一个ExtJs版的helloworld

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ext.html</title> 

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

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

    <script type="text/javascript" src="script/ext/js/ext-base.js"></script>

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

    <script type="text/javascript">

    Ext.onReady(function(){

    Ext.Msg.alert("hello","hello world");

});

</script>

  </head> 

  <body> 

  </body>

</html>

 

ExtJs初步学习_第2张图片

下面是一个窗口的例子:

Ext.onReady(function(){

       var vin=new Ext.Window({

       title:"hello",

       width:300,

       height:300,

       html:'<h1>hello</h1>'

    });

    vin.show();

});

ExtJs初步学习_第3张图片

 

下面是一个面板的例子:

Ext.onReady(function(){

    //Ext.Msg.alert("hello","hello liulimin jiwenfneg");

    var obj={title:"hello",

       width:300,

       height:200,

       html:'<h1>hello jiwenfeng</h1>'};

    var panel= new Ext.Panel(obj);

    panel.render("hello");

});

 

 ExtJs初步学习_第4张图片

你可能感兴趣的:(html,function,ExtJs,resources,ajax框架,stylesheet)