Extjs学习笔记之一初识Extjs之MessageBox

更新时间：2010年01月07日 18:00:12 作者：

去官网下载好extjs的压缩包，解压缩之后得到如下目录结构。

在其中新建一个my目录，以后所有的样例文件都新建在这个目录中。
1.Hello world!
先看一个Extjs版的Hello World网页的全部代码：

 
<html> 
<head> 
<title>Extjs MessageBox</title> 
<link rel="Stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../adapter/ext/ext-base-debug.js"></script> 
<script type="text/javascript" src="../ext-all-debug.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif'; 
Ext.onReady(function() { 
Ext.MessageBox.alert('Hello', 'Hello world'); 
}); 
</script> 
</body> 
</html> 

运行下，结果如下：

注意上面引入js文件的顺序不能颠倒，否则不能得到正确的结果。2.Ext.MessageBox
Ext.MessageBox实现了常见的提示框功能。Ext.Msg是和他完全相同的对象，只是名字不一样而已。Ext.Msg有常见的alert,confirm,promt,show等方法，都很简单。下面通过例子来说明。Extjs的函数参数可以用通常的逗号列表分隔,也可以传入一个具有参数名：参数值的对象。下面的例子也会有体现。

复制代码代码如下:

 
<html> 
<head> 
<title>Extjs MessageBox</title> 
<link rel="Stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../adapter/ext/ext-base-debug.js"></script> 
<script type="text/javascript" src="../ext-all-debug.js"></script> 
<script type="text/javascript"> 
function alertClick() { 
Ext.Msg.alert("alert", "Hello"); 
} 

function showOutput(s) { 
var area = document.getElementById("Output"); 
area.innerHTML = s; 
} 

function confirmClick() { 
Ext.Msg.confirm('Confirm','Choose one please',showOutput); 
} 

function promptClick() { 
Ext.Msg.prompt('Prompt', 'Try enter something', 
function(id, msg) { 
showOutput('You pressed ' + id + ' key and entered ' + msg); 
}); 
} 

function showClick() { 
var option = { 
title:'Box Show', 
msg: 'This is a most flexible messagebox with an info icon.', 
modal: true, 
buttons: Ext.Msg.YESNOCANCEL, 
icon: Ext.Msg.INFO, 
fn:showOutput 
}; 
Ext.Msg.show(option); 
showOutput("Hi, a box is promting,right?"); 
} 
</script> 
</head> 
<body> 
<div id='Output'></div> 
<p><button id='Button1' onclick='alertClick()'>AlertButton</button></p> 
<p><button id='Button2' onclick='confirmClick()'>ConfirmButton</button></p> 
<p><button id='Button3' onclick='promptClick()'>PromptButton</button></p> 
<p><button id='Button4' onclick='showClick()'>ShowButton</button></p> 
</body> 
</html> 

Msg的各个方法的参数是类似的，主要是设置标题和提示语，以及对按钮的设置。要注意Msg的消息框和javascript默认的提示框不一样，它的弹出并不会阻止其余的代码的执行。要在弹出框被关闭之后执行某些代码必须向它传入一个函数，fn。最后一个例子很清晰的显示了这一点，弹出提示框后，下面的代码仍然被执行，弹出框关闭后执行showOutput函数：

Extjs4 Treegrid 使用心得分享(经验篇)
最近调试EXTJS 4的treegrid实例，看了很多水友的文章，以及官方的demo，没一个可靠的，于是乎自己折腾中...感兴趣的朋友可以了解下本文或许对你有所帮助
2013-07-07
Extjs 继承Ext.data.Store不起作用原因分析及解决
有关Extjs 继承Ext.data.Store 不起作用的原因有很多种，接下来与大家分享下，本人遇到的，这个Store写出来之后是不会起到作用的，感兴趣的朋友可以看下详细的原因及解决方法
2013-04-04
ExtJS Store的数据访问与更新问题
ExtJS Store的数据访问与更新问题，需要的朋友可以参考下。
2010-04-04
extjs 学习笔记（二） Ext.Element类
上个系列中，我们用到了Ext.fly来获得一个Element对象，其实Ext.fly是Ext.Element.fly的简写形式。类似的方法还有一个Ext.get，是Ext.Element.get的简写。这两个方法都可以用使用Dom元素或者Dom元素的id作为参数来获得一个Element对象。
2009-10-10
入门基础学习 ExtJS笔记（一）
这段时间手中项目已经完成，空闲时间较多。开始了学习ExtJs之旅。
2010-11-11
EXT中xtype的含义分析
根据我在论坛上的观察，xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype，或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。
2010-01-01
ExtJS GTGrid 简单用户管理
前段学了小胖的GTGrid，很方便实用。最近在学习Extjs.做了个CRUD的Demo,包括Extjs版和GTGrid版，做的比较粗糙，希望对大家有一些帮助。
2009-07-07
extjs两个tbar问题探讨
知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏)下面为大家介绍下extjs的两个tbar问题，感兴趣的朋友可以参考下
2013-08-08
Extjs的FileUploadField文件上传出现了两个上传按钮
Extjs的FileUploadField文件上传在页面中出现了两个上传按钮，这个是和ext的本身css的样式有关系，所以要将样式修改下
2014-04-04
学习ExtJS Column布局
ExtJS Column布局使用说明，需要的朋友可以参考下。
2009-10-10