<html>
<head>
<link rel="stylesheet" type="text/css" href="./ext-all.css" />
<script type="text/javascript" src="./ext-base.js"></script>
<script type="text/javascript" src="./ext-all.js"></script>
<script type="text/javascript">
// 一定要 onReady开始 不然第一次点击按钮会没有反映，要点击第二次才有反映的，因为第一次点击变成加载了！
Ext.onReady(function(){
//alert 提示框
Ext.get('mb8').on('click', function(e){
Ext.MessageBox.alert('Status', 'Changes saved successfully.',showResult);
});
// 选择框
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('选择','你是否确定?',showResult);
});
// 对话框
Ext.get('prompt').on('click', function(e){
Ext.MessageBox.prompt('对话框','请输入你的名字?',showResult2);
});
// 文本域对话框
Ext.get('mprompt').on('click', function(e){
Ext.MessageBox.show({
title: 'Address',
msg: 'Please enter your address:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: showResult2,
animEl: 'mprompt'
});
});
//进度条
Ext.get('progress').on('click', function(){
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width:300,
progress:true,
closable:false,
animEl: 'mb6'
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 12){
Ext.MessageBox.hide();
//Ext.example.msg('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('save').on('click', function(){
// alert(Ext.MessageBox.ERROR);
Ext.MessageBox.show({
msg: 'Saving your data, please wait...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:Ext.MessageBox.INFO, //这里可以自定义图片的，要修改到 ext-all.css 文件里面(个人做法)
animEl: 'save'
});
setTimeout(function(){
//This simulates a long-running operation like a database save or XHR call.
//In real code, this would be in a callback function.
Ext.MessageBox.hide();
//Ext.example.msg('Done', 'Your fake data was saved!');
Ext.MessageBox.alert('Status', 'Changes saved successfully.');
}, 8000);
});
function showResult(btn){
Ext.MessageBox.alert('内容',btn);
}
function showResult2(btn,text){
if(btn == 'ok')
Ext.MessageBox.alert('内容2',text);
else
Ext.MessageBox.alert('内容2',btn);
}
});
</script>
</head>
<body>
<center>
<div style="width:800px;height:300px;border:1px groove pink">
<table style='width:800px;height:300px'>
<tr>
<td>
<button id='mb1' style='width:128px'>Confirm </button>
</td>
</tr>
<tr>
<td>
<button id='mb8' style='width:128px'>Alert</button>
</td>
</tr>
<tr>
<td>
<button id='progress' style='width:128px'>Progress </button>
</td>
</tr>
<tr>
<td>
<button id='save' style='width:128px'>Save </button>
</td>
</tr>
<tr>
<td>
<button id='prompt' style='width:128px'>Prompt </button>
</td>
</tr>
<tr>
<td>
<button id='mprompt' style='width:128px'>M Prompt </button>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
有些源码和样式我都进行修改过！如果需要可以下载来看！
分享到：
相关推荐
Ext.MessageBox.alert("你好", "wayfoon"); }); ``` Ext的布局系统是其强大功能的关键之一，提供了多种布局方式以适应不同的设计需求。常见的布局包括： 1. Accordion布局：这种布局将子组件折叠在一起，一次只...
Ext.MessageBox.alert("hello", "Hello World"); }); ``` ### 5. 实战案例 除了简单的消息框之外，还可以创建更复杂的用户界面组件，例如窗口。下面的示例展示了如何创建一个带有标题、宽度、高度和内容的窗口：...
2. **docs**：这里是Ext.js的开发文档，包含了详细的API参考和教程，对于开发者来说是不可或缺的学习资源。 3. **locale**：存储了不同国家和地区语言的资源文件，方便进行多语言支持。 4. **packages**：这个目录...
// 使用Ext MessageBox显示'Hello World!' Ext.MessageBox.alert('', 'Hello World!'); }); ``` EXT JS中的表单是其强大功能的一部分，提供了多种表单控件，如TextField、TextArea、DateField、TimeField、...
EXT JS 教材和教程的目标是帮助开发者更好地理解和掌握这个框架，从而提升他们的Web开发技能。 EXT JS 中的 MessageBox 是一个非常实用的组件，它用于创建各种类型的对话框，如警告、确认和提示。下面我们将详细...
Ext.MessageBox.alert("hello", "wayfoon"); }); ``` Ext支持多种布局方式，用于组织和管理组件在页面上的显示。这些布局包括： 1. **Accordion布局**：这种布局将容器内的子元素设置为可折叠的形式，每个子元素...
Ext提供了多种弹出窗口组件，如MessageBox等，这些组件可自定义各种动画效果和布局，甚至可以在弹出窗口中嵌入表格和表单。Ext JS对布局的处理很灵活，可以轻松实现不同浏览器中的统一布局效果。其中BorderLayout是...
最简单的Ext使用示例是在`Ext.onReady`函数中调用`Ext.MessageBox.alert`来弹出一个警告对话框，如`Ext.MessageBox.alert("hello","wayfoon");`所示。 在Ext中，页面布局扮演着至关重要的角色。有四种基本布局模式...
最新提及的版本是Ext2.2，本教程将基于这个版本进行讲解。 使用ExtJS，首先需要引入必要的CSS和JavaScript文件。`ext22/resources/css/ext-all.css`是样式文件，提供了ExtJS的视觉样式。接着，`ext22/adapter/ext/...
Ext.MessageBox.alert("Hello World!"); }) ``` - **注意**: - 严格区分大小写。 - 缺少任何符号都会导致执行失败。 - 若使用 4.0 版本，则需要引入 `ext-all.css`、`ext-all.js` 和 `bootstrap.js`...
### EXT中文教程知识点详解 #### 1. EXT简介与核心概念 EXT，即Ext JS，是一种基于JavaScript的开源框架，用于构建复杂的Web应用程序。它提供了一系列丰富的用户界面组件，简化了DOM操作，使得开发者能够轻松地...
5.2.2. Ext.MessageBox.confirm() 5.2.3. Ext.MessageBox.prompt() 5.3. 如果你想的话，可以控制得更多 5.3.1. 可以输入多行的输入框 5.3.2. 再看一个例子呗 5.3.3. 下一个例子是进度条 5.3.4. 动画效果，跳出来，缩...
本教程主要讲解Ext的相关知识，特别是如何使用JSON对象和Ext MessageBox的功能。 首先，我们来看JSON（JavaScript Object Notation）对象在ExtJS中的应用。JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时...
### EXT中文教程知识点详解 #### 1. EXT简介 Ext 是一款基于 JavaScript 的开源前端框架，主要用于构建交互式 Web 应用程序。它提供了一系列丰富的 UI 组件和强大的功能，如表格、表单、菜单、工具栏等，帮助...
- **EXT** 官方文档提供了丰富的资源，包括教程、API 文档等，可以帮助开发者深入了解 **EXT** 的各个部分。 - 学习 **EXT 2** 的新特性也是很有帮助的，如组件模型、容器模型、布局等。 通过上述知识点的学习，...
标题为"ExtJs教程.pdf"以及描述为"ExtJs教程.pdf"的文件内容涉及了ExtJs框架中MessageBox组件的使用方法，包括其弹出框函数的介绍和配置参数说明。ExtJs是一个用于构建交互式Web应用程序的JavaScript框架，它提供了...
- `icon`: 对话框内容前面的图标，可以是`Ext.MessageBox.INFO`, `Ext.MessageBox.ERROR`, `Ext.MessageBox.WARNING`, `Ext.MessageBox.QUESTION`。 - `width`: 对话框的宽度，单位默认为像素。 - `prompt`: 设为...