ExtJS学习第一天 MessageBox

此文用来记录学习笔记；

•学习任何技术，首先都要从Helloworld开始，那么我们首要任务就是写一个简单的HelloWorld程序，带领同学们走进ExtJS的世界。

•Ext.onReady：这个方法是Ext的准备函数，也就是Ext相关的代码都会在这个函数里书写，它比较类似于window的onload方法，但是注意其执行时机是在页面的DOM对象加载完毕之后立即执行。

•Ext.window.MessageBox：这个类提供了ExtJS的弹出提示框、确认框等简单的小组件。我们首先根据它写出我们的Helloworld.

 

•Ext.MessageBox是一个工具类，提供了各种风格的信息提示对话框，也可以简写为Ext.Msg,这在Ext中很常见,很多组件或类都可以使用简写形式。

–alert方法

–confirm方法

–prompt方法

–wait方法

–show方法

•学习意见:学习ExtJS是一个长期积累的过程，我们以后应该多去查看官方API，多去阅读底层源码，以深入我们对ExtJS的了解。

 

 

 

//Ext.onReady 准备函数 类似于window.onload
Ext.onReady(function () {
    //提示信息
        Ext.MessageBox.alert('我是标题!' , 'Hello World!' , function(){
            console.info(this);
            alert('我是回调函数!');
        } , this);
        Ext.Msg.alert('提示信息','ExtJS!!!');
    //alert('执行');
    
        //询问框
        Ext.Msg.confirm('提示信息','确认删除该条记录么?',function(op){
                // yes  on
                if(op == 'yes'){
                    alert('确认了!');
                } else {
                    alert('取消了!');
                }
        });
    
    //输入框
    //String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value]
        Ext.Msg.prompt('我是标题!','请输入姓名:' , function(op , val){
            //op  ok cancel
            console.info(op);
            console.info(val);
        } , this , true , '张三');

    //等待框 
        Ext.Msg.wait('提示信息','我是内容' ,{
               interval: 400,             //循环定时的间隔
               duration: 2000,            //总时长
               increment: 5,            //执行进度条的次数
               text: '更新中,请稍后...',    //进度条上的文字
               scope: this,
               fn: function(){
                    alert('更新成功!');
               },
               animate:true                //更新渲染时提供一个动画效果
        });

    //show方法
        Ext.Msg.show({
            title:'我是自定义的提示框!!' , 
            msg:'我是内容!!' , 
            300 , 
            height:300 ,
            buttons:Ext.Msg.YESNOCANCEL ,
            icon:Ext.Msg.WARNING        // ERROR INFO QUESTION  WARNING
        });
    
});

效果图：

 

附：extjs目录结构

•Ext开发包目录结构说明

–builds目录为ExtJS压缩后的代码

–docs目录为ExtJS的文档

–examples目录中是官方的演示示例

–locale是多国语言的资源文件,其中ext-lang-zh_CN.js是简体中文

–overview是ExtJS的功能概述

–pkgs中是ExtJS各部分功能的打包文件

–resource中书ExtJS要用到的图片文件与样式表文件

–src目录是未压缩的源码

–bootstrap.js是ExtJS库的引导文件,通过参数可以自动切换ext-all.js和ext-debug.js

–ext-all.js文件是ExtJS的核心库,是必须要引入的

–ext-all-debug.js文件是-all.extjs的调试版,在调试的时候可能需要使用

 

 

学习之余可到这里www.fishcmonkey.com欣赏美文提高一下文学修养