learning ext js 中文版之在对话框中添加图标和按钮事件
learning ext js 中文版
在对话框中添加图标和按钮事件。这只需要在css和config里做些修改即可。
首先准备一张milton-head-icon.png的图标图片，与html放在同一目录。
在html的head里添加style：
.milton-icon {
background: url(milton-head-icon.png) no-repeat;
}
然后我们需要在窗口配置里做些更改。图标要用到我们在css里添加的style值：milton-icon。我们还要添加一个函数，当用户点击对话框中的任一按钮时执行。这个函数定义成匿名函数，仅仅用来传递参数，如下：Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
},
icon: 'milton-icon',
fn: function(btn) {
Ext.Msg.alert('You Clicked', btn);
}
});
这个例子中的函数只有一个参数，传递的是被点击的按钮的名称。如果用户点击了Yes按钮，btn参数就传递了yes值。提醒：
对话框中右上角的的关闭按钮和键盘上的esc都是和cancel按钮绑定的，这些类似桌面应用的小功能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">
<style type="text/css">
.milton-icon {
background: url(milton-head-icon.png) no-repeat;
}
</style>
<title>extjs examples</title>
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/build/locale/ext-lang-zh_CN.js"></script>
<script>
Ext.onReady(function(){
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
},
icon: 'milton-icon',
fn: function(btn) {
Ext.Msg.alert('You Clicked', btn);
}
});
});
</script>
</head>
<body>
<!--copyright guoyiqi-->
</body>
</html>