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

来源：互联网发布：手机淘宝装修与pc同步编辑：程序博客网时间：2024/05/21 21:49

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>

这两种都是可以的。

0 0