<%@ 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>auto layout布局</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/ext-theme-neptune/ext-theme-neptune-all.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/ext-all.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.get("btn1").on("click", function() {
Ext.Msg.alert("tips", "clicked!");
});
// YES NO MessageBox
Ext.get("btn2").on("click", function() {
Ext.Msg.confirm('tips', 'to do it ?', function (btnId) {
if (btnId == 'yes') {
Ext.Msg.alert('tips', 'yes');
} else if (btnId == 'no') {
Ext.Msg.alert('tips', 'no');
} else {
alert('nothing to do, closed!');
}
});
});
// 单行输入框
Ext.get('btn3').on('click', function () {
Ext.Msg.prompt("tips", "input you name", function (btnId, text) {
if (btnId == 'ok') {
Ext.Msg.alert('tips', text);
} else {
Ext.Msg.alert('tips', 'cancled');
}
});
});
// 多行输入框
Ext.get('btn4').on('click', function () {
Ext.Msg.prompt("tips", "input you name", function (btnId, text) {
if (btnId == 'ok') {
Ext.Msg.alert('tips', text);
} else {
Ext.Msg.alert('tips', 'cancled');
}
}, window, true);
});
// 第五个参数显示默认文字， 第四个参数表明是多行还是单行
Ext.get('btn4').on('click', function () {
Ext.Msg.prompt("tips", "input you name", function (btnId, text) {
if (btnId == 'ok') {
Ext.Msg.alert('tips', text);
} else {
Ext.Msg.alert('tips', 'cancled');
}
}, window, false, 'default text');
});
// Show function
// buttons 的可选类别
// Ext.MessageBox.CANCLE Ext.MessageBox.ERROR Ext.MessageBox.INFO
// Ext.MessageBox.NO Ext.MessageBox.OK Ext.MessageBox.OKCANCEL
// Ext.MessageBox.QUCANCEL Ext.MessageBox.WARNING Ext.MessageBox.YES
// Ext.MessageBox.YESNOCANCEL
// icon 的可选类别
// Ext.MessageBox.INFO;Ext.MessageBox.WARNING;
// Ext.MessageBox.QUESTION; Ext.MessageBox.ERROR;
Ext.get('btn5').on('click', function(e){
Ext.MessageBox.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
buttons: Ext.MessageBox.YESNOCANCEL,
fn: function (btnId) {
Ext.Msg.alert('tips', btnId);
},
animateTarget: 'mb4',
icon: Ext.MessageBox.QUESTION
});
});
// progress bar
Ext.get('btn6').on('click', function(){
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width:300,
progress:true,
// closable:false,
animateTarget: 'btn6'
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 12){
Ext.MessageBox.hide();
Ext.MessageBox.alert('Done', 'Your fake items were loaded!');
}else{
var i = v/11;
Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
}
};
};
for(var i = 1; i < 13; i++){
setTimeout(f(i), i*500);
}
});
// 自定义按钮文字
Ext.get('btn7').on('click', function(){
Ext.MessageBox.show({
title: 'What, really?',
msg: 'Are you sure?',
buttons: Ext.MessageBox.YESNO,
buttonText:{
yes: "Definitely!",
no: "No chance!"
},
fn: function (btnId) {
Ext.Msg.alert("tips", btnId);
}
});
});
});
</script>
</head>
<body>
<button id="btn1">btn1</button><br />
<button id='btn2'>btn2</button> <br />
<button id='btn3'>btn3</button> <br />
<button id='btn4'>btn4</button> <br />
<button id='btn5'>btn5</button> <br />
<button id='btn6'>btn6</button> <br />
<button id='btn7'>btn7</button> <br />
</body>
</html>
分享到：
相关推荐
Ext.MessageBox.confirm()详解 显示一个确认对话框，用来代替JavaScript标准的confirm()方法，具有两个按钮“是”和“否”如果为其提供一个回调函数，则该函数将在单击按钮后被调用(包括右上角的...
动态加载本地数据到`Ext.Panel`通常涉及到异步请求，使用`Ajax`或`Store`的`load`方法，通过URL获取JSON或XML格式的数据，并将其渲染到面板内。 例如： ```javascript var panel = Ext.create('Ext.Panel', { ...
根据给定的信息，我们可以深入探讨ExtJS中`Ext.MessageBox`组件的使用方法及特性。`Ext.MessageBox`是ExtJS框架中用于显示模态对话框的一个非常实用的功能组件，它可以用来展示提示信息、请求用户输入、确认操作等。...
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 ...接下来认识一下Ext.MessageBox Ext.MessageBox是一个工具类，他继承自Obiect对象，用来生成各种
在EXTJS框架中，`Ext.ux.form.LovCombo`是一种自定义组件，它扩展了基本的`Ext.form.field.ComboBox`，提供了更丰富的功能，尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”（即“Look Up Value”...
这一实现过程涉及了ExtJs框架中的一些核心组件使用方法，需要开发者具备一定的ExtJs框架使用基础和JavaScript编程经验。通过上述方法，可以在不直接修改Ext.Ajax.request方法的前提下，实现一个用户友好的等待提示，...
ExtJS之Ext.Ajax.request用法详解.docx
ExtJS之Ext.Ajax.request用法详解.pdf
ExtJS之Ext.Ajax.request用法详解 (2).docx
ExtJS之Ext.Ajax.request用法详解 (2).pdf
在EXTJS3中，`Ext.PagingToolbar()` 是一个非常重要的组件，用于在大量数据的网格或视图中实现分页功能。这个组件允许用户轻松地浏览和操作大量的记录，而不需要一次性加载所有数据，从而提高了应用程序的性能和用户...
本文将围绕ExtJs2.0入门实例，重点讲解Ext.MessageBox的使用，包括其基本方法和配置选项，帮助初学者快速掌握这一核心功能。 1. **Ext.MessageBox.alert()** `Ext.MessageBox.alert()`方法用于显示简单的警告...
extjs 4.2.1 api文档
Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp
创建了一个`Ext.grid.Panel`实例，并指定了其标题和数据源。 5. **选择模型**： ```javascript selModel:{ type:'cellmodel' }, ``` 设置了单元格选择模型（`cellmodel`），这意味着用户可以单独选择单元格...
总结来说，这个实例展示了如何将前端的ExtJS4框架，特别是其Accordion布局和Ext.tree.Panel组件，与Servlet和Struts2后端框架集成，利用JSON进行数据交换，来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...
首先，EXTJS的弹出框主要通过`Ext.MessageBox.show`方法创建。这个方法接受一个配置对象，其中包含各种参数来定制弹出框的行为和外观。例如，我们可以设置`msg`参数来自定义显示的信息，`buttons`参数来决定显示哪些...
EXTJS是一个强大的...理解并熟练运用这些方法，可以帮助新手快速掌握EXTJS的基本用法，并进一步提升其在实际项目中的应用能力。在实际开发中，可以根据需求灵活组合和配置这些方法，以实现各种复杂的对话框效果。
在EXTJS库中，`Ext.Array` 是一个非常重要的工具类，它提供了许多方便的静态方法，用于处理JavaScript中的数组。这些方法旨在增强原生数组的功能，提高代码的可读性和效率。`Ext.Array` 包含了排序、查找、过滤、...
本文详细介绍了`Ext.data.Store`的基本用法，包括创建实例、数据转换、排序操作以及如何从`store`中获取数据。通过掌握这些基本知识，开发者可以更加灵活地使用`Ext.data.Store`来处理各种数据需求。