我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法 进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的演示,相信你已经基本上了解了ExtJS的基本样式,这篇文章将演示如何使用自定义ExtJS对话框. Ext.MessageBox.show演示 要显示自定义的对话框,我们需要用到Ext.MessageBox.show方法.先来看一个简单的例子: Ext.get("btn1").on(&quo…

ExtJS功能繁多,要想彻底的了解确实很困难.作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验,这是一条非常快速的学习途径. 从今天开始我将完成一系列ExtJS使用中常常用到的功能,并通过例子的形式告诉大家如何一步一步的完成,相信我,ExtJS并不可怕! 本系列教程以代码演示为主,代码讲解相结合,尽量将ExtJS的学习难度降到最低. 要学习本系列教程,你需要具有以下知识: 熟悉Javascr…

在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext.get("btn4").on("click", function () { Ext.MessageBox.progress("进度", "正在处理,请稍候...", "0%"); }); 在上面的代码中,我们…

在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动,直到被关闭.我们看一下它的创建代码: Ext.get("btn5").on("click", function () { Ext.MessageBox.wait("正在处理,请稍候...", "等待"); Ext.defer(f…

在上一节中,我们用到了MessageBox,在本文中,我们将介绍一下ExtJS中常用的三种MessageBox. Ext.MessageBox.alert() 这个方法用来打开一个普通的对话框,对话框中只显示一个确定按钮. Ext.get("btn1").on("click", function () { Ext.MessageBox.alert("提示", "按钮被点击"); }); 第一个参数为标题栏 第二个参数为内容 效…

文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先,我们创建一个Form,它包含一个filefield字段 然后,我们通过Form的submit方法进行提交,此时,ExtJS会自动判断,如果Form中包含filefield字段,Form的method会设置为post 最后,我们通过服务器接收form提交的数据,并返回一段json字符串 ExtJS…

上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件. 思路很简单,首先创建一个window,然后使用fit布局(这种布局的好处是子元素将填充整个控件),接下来将html属性设置为iframe即可.我们来看看代码: Ext.onReady(function () { Ext.get("btn1").on("click", function () {…

上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 使用JSON数据为字段赋值 var formCmp = this.up("form"); var form = formCmp.getForm(); var userValues = { UserName: "Qi Fei", Email: "…

ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 Form 加载 var formCmp = this.up("form"); formCmp.setLoading(); formCmp.load({ url: "FormLoadDataServer", params: { id: "" //可能需要…

在上一节中我们演示了如何使用ExtJS的Window组件,这篇内容中我们来演示一下如何将窗口最小化. 要让ExtJS标题栏中显示最小化按钮并不麻烦,只需要设置 minimizable: true 即可.但是显示了最小化按钮,点击的时候却没有任何反应.这是因为ExtJS没有处理最小化事件,需要我们自己来定义最小化按钮被点击时的操作. Ext.onReady(function () { var g_win = Ext.create("Ext.window.Window", { title:…