ExtJS学习教程：经典实例解析

"本资源是一份关于Ext JS的实践教程，包含了15个经典实例，适合初学者。作者强调Ext JS在布局方面的优势，并通过四个主要的MessageBox方法——alert、confirm、prompt和show来详细解释其用法。" 在Web开发中，Ext JS是一个强大的JavaScript库，用于构建富客户端应用程序。它提供了丰富的组件和工具，便于创建复杂的用户界面。这篇教程以"Ext Js2.0学习系列"为主题，旨在帮助新手更好地理解和应用Ext JS。 1. **Ext.MessageBox.alert()方法** 这是Ext JS中最基础的提示框，用于显示警告或确认信息。它包含三个参数：标题（title）、消息（msg）和回调函数（function）。标题和消息是必需的，而回调函数是可选的，通常用于在用户关闭对话框后执行某些操作。例如，你可以弹出一个对话框并在关闭后显示一条消息： ```javascript Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出！")}); ``` 2. **Ext.MessageBox.confirm()方法** confirm方法与alert类似，但增加了用户选择确认或取消的选项。同样包含三个参数，其中的回调函数会接收到用户点击的按钮值，可以是'yes'或'cancel'。例如： ```javascript Ext.MessageBox.confirm("title","msg",function(e){alert(e);}); ``` 3. **Ext.MessageBox.prompt()方法** prompt方法用于获取用户的输入。它有六个参数，包括返回值、是否启用多行输入等。用户输入的数据可以通过回调函数的第二个参数获取。如果设置为多行，第三个参数应为true。例如： ```javascript Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);},this,true); ``` 4. **Ext.MessageBox.show()方法** 这是最灵活的方法，允许自定义配置以创建自定义的对话框。show方法支持众多配置选项，如animEl用于设置动画效果。例如，可以设置一个对话框从指定ID的位置以动画方式弹出： ```javascript Ext.MessageBox.show({ animEl: "id1", title: "自定义对话框", msg: "这是自定义消息", buttons: Ext.MessageBox.OKCANCEL, // 添加确定和取消按钮 fn: function(buttonId, text, opt) { // buttonId为用户点击的按钮ID，text为用户输入的文本 } }); ``` 通过这些基本的MessageBox方法，开发者能够创建各种交互式的对话框，提供给用户更丰富的体验。这些实例对于初学者理解Ext JS的工作原理和实践应用非常有帮助，同时也展示了Ext JS在构建用户界面时的强大能力。