01_ExtJS_HelloWorld

1, 什么是Ext?

　　Ext是一个Ajax框架，用于在客户端创建丰富多彩的web应用程序界面，是在Yahoo! UI的基础上发展而来的。官方网址：http://www.extjs.com/ 现在改为:www.sencha.com。

　　 ExtJS是一个用来开发前端应用程序界面的JS框架，借鉴Swing等思想，提供了一套完整的组件库及强大的ajax支持功能，可以用Ext来开发基于Ajax的富客户端应用.

2, 基于传智播客蔡世友的讲解作的笔记（ExtJS3.4.0版本的，4.X与3.x版本是有很大区别的）

　　链接: http://pan.baidu.com/s/1Apn4a 密码: ztm7 我的网盘下载地址:

3, helloWorld 例子

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello-Extjs</title>
</head>
<!--  这里是基于 Ext-JS 3.4.0版本的-->
<!-- 1,引入ExtJS的样式 -->
<link rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css" type="text/css"/>
<!--2,引入ExtJS的底层驱动[可以是Ext自己的，也可以是其它框架的]，
    如果是第三方的还要引入其它的js库，比如jquery -->
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<!-- 引入ExtJS的库 -->
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>

<script>
// 通过 Ext.onReady()开始调用Ext组件;  它的参数是一个回调函数 
    Ext.onReady(new function(){
        
        //创建Ext窗口
        var win=new Ext.Window({
            width:400,
            height:300,
            title:'hello ext window',
            buttons:[
                     {text:'ok'},
                     {text:'cancel'}
                    ]
        });
        //显示窗口
        win.show();
        
    });
</script>

<body>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello-Extjs</title>
</head>
<!--  这里是基于 Ext-JS 4.2.1版本的-->
<!-- ExtJS的样式 -->
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" type="text/css"/>
<!-- ExtJS的库 -->
<script type="text/javascript" src="ext-4.2.1/ext-all.js"></script>
<!-- 国际化文件-->
<script type="text/javascript" src="ext-4.2.1/ext-lang-zh_CN.js"></script>

<script>
// 通过 Ext.onReady()开始调用Ext组件;  它的参数是一个回调函数 
    Ext.onReady(function(){
        
         Ext.MessageBox.alert("提示信息","hello world");
    });
</script>
<body>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 基于ExtJS 5.1.0  -->
<!-- 引入CSS -->
<link rel="stylesheet" href="extjs5/classic/ext-theme-classic-all-debug.css" type="text/css">
<!-- 引入ExtJS -->
<script type="text/javascript" src="extjs5/ext-all-debug.js" ></script>
<!-- 引入国际化文件 -->
<script type="text/javascript" src="extjs5/ext-locale-zh_CN.js"></script>

<script type="text/javascript" src="js/helloworld.js"></script>
</head>
<body>

</body>
</html>

// helloworld.js 

Ext.onReady(function(){

    Ext.MessageBox.alert("提示","hello world！");
});

　　树的小例子

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello-Extjs</title>
</head>

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

<script>
// 通过 Ext.onReady()开始调用Ext组件;  它的参数是一个回调函数
// 显示树的函数
function showTree(){
    // 1,组件初始化的过程，参考Componet.js的构造函数，它是组件类的父类
    var tree=new Ext.tree.TreePanel({
        title:"小树一棵",
        width:200,
        height:200,
        //renderTo:'hello', 有这个属性，就可以直接显示
        root:new Ext.tree.AsyncTreeNode({
                text:"树根",
                children:[
                     {text:"叶子1",
                         leaf:true},
                        {text:"叶子2",
                       leaf:true}]
        })
    });
    //2, 组件的渲染,就会在页面上显示
    tree.render('hello');
}
    Ext.onReady(showTree);
</script>

<body>
<div id="hello"></div>
</body>
</html>

4, 相关一些知识点

　　为了防止没有传递对象而出错时，我们可以 obj = obj||{}; 从而避免写if else

　　Ext对象的拷贝 Ext.apply(a,b); 将b对象拷贝到a对象中.

Ext.get("id1"); 通过Id获得元素

5, Ext的事件.

　　Ext的事件支持体现在两个方面，首先是对浏览器默认事件进行了进一步的扩展及封装，比如在Event对象的基础上提供了一个EventObject，提供了全局的事件管理器，灵活多变的事件响应方法，比如说在事件发生后几秒才响应事件，或者事件队列等功能。

02_Ext_Event.html

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ExtJS-event</title>
    <link rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css" type="text/css"/>
    <script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
     
    <script type="text/javascript" src="02_Ext_Event.js"></script>
</head>
<body>
<div id="hello">hello</div>
    <a id="link1">普通链接</a>
</body>

02_Ext_Event.js

Ext.onReady(function(){
    
    // 获得Ext对象 
    Ext.get("link1").on('click',function(e){
        // 这个e是ext的 EventObject
        // 第一个参数 事件名称，第二个参数 执行的函数，第三个参数 作用域 ， 第四个参数  可选参数
        alert(e);
    },this,{delay:2000});
    //delay:2000  延迟执行 single:true  只执行一次   buffer:200  200毫秒内只执行一次
});

　　所有支持事件的东西都继承自 Ext.util.Observable类，而Ext组件的基类Component就是继承自这个类；在这个里面可以找到我们常用的 on、un、andEvent、andListener等方法

　　有的组件都有一个render事件，而这个事件是在组件渲染完以后会触发，这时我们就可以通过监听这个事件来实现在组件渲染后执行特定的操作

　　before开头的事件，返回false时就会阻止其默认行为。

<div id="btn"></div>

　　var btn1=new Ext.Button({text:'firstButton'});
    // 将button渲染到 id为btn的div中
    btn1.render('btn');
    //函数可以有参数，有什么参数，就参考相应的组件的事件方法
    btn1.on('click',btnClick);
    
    var btn2=new Ext.Button({text:'secondButton'});
    btn2.render('btn');
    btn2.on('click',btnClick);

function btnClick(btn,event){
    var win=new Ext.Window({title:btn.text,width:300,height:200});
    
    // 这里讲解一个 before开头的事件,返回false时，就会阻止事件的发生
    win.on('beforeshow',function(win){
        //当返回false时，就不会显示窗口
        return confirm("确定要显示吗?");
    });
    win.show();
}

Ext比较核心的组件
Observable：支持事件监听相关的
Component：组件，所有Ext控件相关的

BoxComponent：有形状的组件

Container：容器

Panel：面板

善于查AP 具体的类，有哪些配置项，哪些属性，哪些方法，哪些事件都可以在API中查到

<script>
// 通过 Ext.onReady()开始调用Ext组件;  它的参数是一个回调函数 
    Ext.onReady(function(){
        
        //创建Ext窗口
        var win=new Ext.Window({
            
            width:400,
            height:300,
            title:'hello ext window',
            maximizable:true,
            minimizable:true, //窗口的最小化只是一个样子，没有任何效果
            minimize:function(){ //可以重写这个方法来最小化
                //win.hide(); //隐藏窗口
                //实现最小化功能是比较复杂的    
            },
            buttons:[
                     {text:'创建包含树的窗口',
                         listeners:{
                             click:function(){
                                 var tree=new Ext.tree.TreePanel({
                                        title:"小树一棵",
                                        width:200,
                                        height:200,
                                        root:new Ext.tree.AsyncTreeNode({
                                                text:"树根",
                                                children:[
                                                     {text:"叶子1",
                                                         leaf:true},
                                                        {text:"叶子2",
                                                       leaf:true}]
                                        })
                                    });
                                 var win=new Ext.Window({
                                     width:200,
                                     height:200,
                                     title:'显示树的窗口',
                                     // 窗口是一个容器 ，在 窗口中添加子元素用 items，它可以接收数组或者对象
                                     items:tree
                                 });
                                 // 除了用items加子元素之外，也可使用容器的add()方法添加元素
                                 win.show();
                                
                             }
                         }
                     },
                     {text:'创建新窗口',
                         // 为按钮添加事件
                         listeners:{
                             click:function(){
                                 var win=new Ext.Window({
                                     width:200,
                                     height:200,
                                     title:'win'
                                 });
                                 win.show();
                             }
                         }
                     }
                    ]
        
        });
        //显示窗口
        win.show();
        
    });
</script>

posted on 2015-05-06 15:45 梦相随1006 阅读(233) 评论(0) 编辑收藏举报

刷新页面返回顶部

梦相随1006

导航

公告

01_ExtJS_HelloWorld