随笔分类 - ExtJS
摘要：今天我们来介绍一下Extjs中一个常用的控件Window。Window的作用是在页面中创建一个窗口，这个窗口作为容器，可以在它里面加入grid、form等控件，从而来实现更加复杂的界面逻辑。 本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.
阅读全文
摘要：Extjs Form是一个比较常用的控件，主要用来显示和编辑数据的，今天这篇文章将介绍Extjs Form控件的详细用法，包括创建Form、添加子项、加载和更新数据、验证等。 本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中亲测可用！
阅读全文
摘要：在JS的开发过程中，大规模的JS脚本难以组织和维护，这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题，在Extjs 4.x版本中引入了MVC开发模式，开始将一个JS（Extjs）应用程序分割成Model-View-Controller三层，为JS应用程序的如何组织代码指明了方向，同时使
阅读全文
摘要：Extjs提供了非常完善的DOM操作方法，可以方便的操作DOM。另外Extjs还可以方便的查询DOM元素，并把这些DOM元素封装成Ext.Element对象，通过Element对象我们可以操作DOM元素。下面来看一下Extjs操作DOM的几个类：
阅读全文
摘要：前面两篇内容分别介绍了extjs grid的基本用法和extjs grid异步加载数据，这篇文章将介绍extjs grid的分页。 数据量大的时候我们必须用到分页，结合上一篇的异步加载数据，今天我们就看看如何异步的加载分页数据。 在extjs grid的请求中，包含几个参数，如图： page：当前页
阅读全文
摘要：上一篇演示了extjs grid的基本用法，并加载了本地数据。今天我们将演示如何加载异步数据。 所谓异步，就是通过ajax的方式将服务器端的数据加载到我们的grid中。为了提供数据，我们先定义一个数据类，并创建一些临时数据。 有了数据，我们来创建一个HttpHandler，我们通过handler来提
阅读全文
摘要：今天进行extjs入门教程的第四篇：grid。 来一份grid尝尝 小伙伴们都知道extjs的grid功能强大，更清楚功能强大的东西用起来必然会复杂。今天我们就从最简单的grid开始讲解。 先来一个最简单的grid，让小伙伴们见识一下吧，看代码： 效果如下： 看到效果小伙伴们该抱怨了：还说什么简单，
阅读全文
摘要：接上篇内容，我们在学会extjs form的基本用法之后，今天我们来看看extjs form的validation功能。 必填项，就是不能为空（allowBlank） 效果： 代码： 输入长度限制，maxLength/minLength 效果： & 代码： 值大小限制，maxValue/minVal
阅读全文
摘要：在上一篇《Extjs window 入门》中，我们已经看到了如何将一个form组件放到window中，今天我们来看看form的一些优雅的工作方式。 使用fieldDefaults，优雅的设置字段默认值 form中的子项，通常都是field控件，而这些field控件通常都会使用一些相同的配置，例如la
阅读全文
摘要：这是一系列ExtJS教程，今天的是第一篇，主要介绍ExtJS中Window的基本用法。希望大家能够支持！ 来吧，创建一个漂亮的弹出窗 效果： 小伙伴们注意了，如果不加autoShow:true的时候，window是不会显示出来的，当然，我们可以使用win.show()方法来显示一个窗口。 在窗口中显
阅读全文
摘要：上一节中我们演示了ExtJS Form的异步加载和提交数据，本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值。 使用JSON数据为字段赋值 在这段代码中，我们首先得到form组件，然后在得到form basic对象，form basic对象提供了form组件的字段管理、验
阅读全文
摘要：ExtJS Form 为我们提供了两个方法：load 和 submit，分别用来加载和提交数据，这两个方法都是异步的。 Form 加载 在这段代码中，首先获得form组件，然后通过setLoading()方法显示遮罩层，最后调用load方法加载数据。 load方法的参数是一个配置对象 url：加载数
阅读全文
摘要：文件上传在Web程序开发中必不可少，ExtJS Form中有一个filefield字段，用来选择文件并上传。今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传。 首先，我们创建一个Form，它包含一个filefield字段 然后，我们通过Form的submit方法进
阅读全文
摘要：上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件，在这篇内容中我们来演示一下如何使用iframe填充window组件。 思路很简单，首先创建一个window，然后使用fit布局（这种布局的好处是子元素将填充整个控件），接下来将html属性设置为i
阅读全文
摘要：在上一节中我们演示了如何使用ExtJS的Window组件，这篇内容中我们来演示一下如何将窗口最小化。 要让ExtJS标题栏中显示最小化按钮并不麻烦，只需要设置 minimizable: true 即可。但是显示了最小化按钮，点击的时候却没有任何反应。这是因为ExtJS没有处理最小化事件，需要我们自己
阅读全文
摘要：在前面几个示例中，我们演示了MessageBox的各种用法，今天这篇文章将演示如何使用Window。 我们首先来创建一个窗口： 窗口的截图如下 在ExtJS 4.x中，我们推荐使用Ext.create()方法来创建对象。这个方法的第一个参数是类名，第二个参数的创建对象时用到的配置项。 在上面的示例中
阅读全文
摘要：通过上面三篇内容的演示，相信你已经基本上了解了ExtJS的基本样式，这篇文章将演示如何使用自定义ExtJS对话框。 Ext.MessageBox.show演示 要显示自定义的对话框，我们需要用到Ext.MessageBox.show方法。先来看一个简单的例子： 看到了吧，Ext.MessageBox
阅读全文
摘要：今天我们来对ExtJS 4.2 的布局（Layout）进行一次系统的学习。在ExtJS 4.2中，提供了十几种布局，我们可以在api中看到： 在这些布局中，我们常用的有Accordion、Border、Column、Fit、Form等。下面我们来看一下具体的用法。 Auto Layout Auto
阅读全文
摘要：在本节内容中，我们来看看ExtJS中的等待对话框。 首先来看一个简单的例子： 这种对话框会一直滚动，直到被关闭。我们看一下它的创建代码： 在这段代码中，首先使用Ext.MessageBox.wait()方法创建一个等待对话框，这个方法接收三个参数（我们在这里只传递了两个）： 第一个参数是显示的内容
阅读全文
摘要：在这篇文章中，我们将演示如何在对话框中使用进度条。 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条： 在上面的代码中，我们使用Ext.MessageBox.progress方法显示一个带有进度条的对话框，这个方法有三个参数： 第一个参数是标题 第二个参数是内容 第三个参
阅读全文