ext4.2入门简单小例子（button的事件--对话框的几种使用情况）

最新推荐文章于 2019-05-29 20:46:28 发布

流水无Qing

最新推荐文章于 2019-05-29 20:46:28 发布

阅读量2k

点赞数

分类专栏： extjs 文章标签： eclipse extjs4 web 对话框 html

本文链接：https://blog.csdn.net/u011067360/article/details/17382537

版权

extjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ExtJS的官网地址：http://www.sencha.com/products/extjs

在这个网址上面，我们可以下载到ExtJS的最新版本。目前，ExtJS的最新版是4.2.1，我们将使用这个版本进行讲解。ExtJS 4.x 做了很大的改变，对3.x是不兼容的。

在页面中，我们可以找到下载按钮，下载最新这个版本的ExtJS。下载完成以后对它进行解压，接下来我们将完成简单的小程序示例。

这是包的重要目录：

下面是主页面了：

<%@ 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>
 <link href="Extjs/ext4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
    <script type="text/javascript" src="Extjs/ext4.2/bootstrap.js"></script>
    <script type="text/javascript">
/*     function init() {
    	  Ext.get("btn1").on("click", function () {
    	        Ext.MessageBox.alert("提示", "按钮被点击");
    	    });
    	  Ext.get("btn2").on("click", function () {
    	        Ext.MessageBox.confirm("提示", "是否要跳转页面？", function (btnId) {
    	            if (btnId == "yes") {
    	                alert("点击了yes按钮");
    	            }
    	            else if (btnId == "no") {
    	                alert("点击了no按钮");
    	            }
    	            else {
    	                alert("没有点击按钮，关闭了提示框");
    	            }
    	        });
    	    });
    }
    Ext.onReady(init); */
    
    Ext.onReady(function () {
    	Ext.get("btn1").on("click", function () {
	        Ext.MessageBox.alert("提示", "按钮被点击");
	    });
	  Ext.get("btn2").on("click", function () {
	        Ext.MessageBox.confirm("提示", "是否要跳转页面？", function (btnId) {
	            if (btnId == "yes") {
	                alert("点击了yes按钮");
	            }
	            else if (btnId == "no") {
	                alert("点击了no按钮");
	            }
	            else {
	                alert("没有点击按钮，关闭了提示框");
	            }
	        });
	    });
	  Ext.get("btn3").on("click", function () {
	    	/* //Ext.MessageBox.alert("提示", "Hello world");
	        Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
	            if (btnId == "ok") {
	                alert(text);
	            }
	            else {
	                alert("点击了取消按钮");
	            }
	        }); */
		  Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
			    if (btnId == "ok") {
			        alert(text);
			    }
			    else {
			        alert("点击了取消按钮");
			    }
			}, window, true, "这是默认文字");
	    });
	  
	  
    });
    </script>
</head>
<body>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
</body>
</html>

其实就是这么简单啦，主要是环境弄好了之后好做了，以后就可以按照api一步一步来做了。

这个里面最重要的一点就是js和css的引入问题：

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

2：<script src="../ext-all.js"></script>

这两种都是可以的。

流水无Qing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext4.2入门简单小例子（button的事件--对话框的几种使用情况）

ExtJS的官网地址：http://www.sencha.com/products/extjs在这个网址上面，我们可以下载到ExtJS的最新版本。目前，ExtJS的最新版是4.2.1，我们将使用这个版本进行讲解。ExtJS 4.x 做了很大的改变，对3.x是不兼容的。在页面中，我们可以找到下载按钮，下载最新这个版本的ExtJS。下载完成以后对它进行解压，接下来我们将完成简单的小程序
复制链接

扫一扫