ExtJs 3 开发笔记
关注
分享
扫一扫
本专栏介绍ExtJs3版本的常规应用，以及在使用过程中一些特殊问题的解决方案。
前端开发黑子Kuroko
热爱前端开发，不常看消息，有事卫星联系：mnikay
展开
-
Extjs鼠标长按事件（实现长按按钮触发事件的方法：mousedown、mouseup）
实现效果：注：实现的效果其实就是监听鼠标长按的事件，当鼠标左击长按改变按钮的样式，当鼠标放开之后还原按钮的样式。 实现方法：extjs: Ext.get("loginBtn").on("mousedown", function () { this.addClass("loginBtnPress"); ...原创 2016-11-29 11:05:52 · 3222 阅读 · 0 评论 -
Extjs ComboBox获取ID值和显示值
获取combox ID值：var valueField = Ext.getCmp('ComboBoxId').getValue(); 获取显示值： var displayField = Ext.getCmp('ComboBoxId').getRawValue();原创 2016-12-02 11:29:07 · 14093 阅读 · 2 评论 -
ExtJs实现阻止冒泡，以及再次允许冒泡——stopPropagation的正确使用
需求如下：↑ 图一：这是正常状态 ↑ 图二：这是hover效果 ↑ 图三：这是点击编辑按钮之后的状态 注：页面中是3个Panel ，每个Panel都绑定了点击事件。“输入框0”这不是Label而是一个readOnly为false的TextField，点击编辑的时候TextField可以编辑。那么问题来了，每次点击TextField的时候都会触发上级Pan...原创 2016-12-08 17:36:27 · 4295 阅读 · 0 评论 -
pointer-events: none——CSS实现禁用鼠标点击事件！巧妙解决ExtJs表格单行禁用功能！
注：该篇更好的解决方案见：【解决方案】Ext.grid.CheckboxSelectionModel 实现锁住指定行不被选中 需求如下： 实现效果如下：注：深灰色的背景色丑是丑了点，但是也正是这样才让前面的勾选框看上去不存在，实际上这个checkbox还是存在的，只是颜色正好被覆盖了。 实现方法如下：js中，对表格的 viewConfig 属性进行 getR...原创 2016-12-20 17:05:47 · 3899 阅读 · 0 评论 -
Extjs动画效果(自定义动画) Ext Core 预置的 12 个动画功能
Ext Core 通过预置的动画功能，可以让轻松实现动画功能。通过自定义动画配置，可实现更多的动画效果。动画完成后，可通过回调函数实现后续处理Ext Core 动画 8 个定位点的值与描述值 描述tl 左上角t 顶边中心tr 右上角l 左边中心r 右边中心bl 左下角b 底边中心br 右下角下面开始介绍 Ext Core 预置的 1...转载 2016-12-27 16:05:22 · 2956 阅读 · 0 评论 -
【解决方案】Ext.grid.CheckboxSelectionModel 实现锁住指定行不被选中
效果图1：注：如图，要对 sm 为 CheckboxSelectionModel 类型的 grid 实现指定行锁住而不被选中，锁住的条件由该行的某一字段的数据决定，图中根据“状态”决定改行能否被选中。 实现方法（js中对这个 grid 的 sm 属性做配置）：sm:new Ext.grid.CheckboxSelectionModel({ checkOn...原创 2016-12-30 19:55:08 · 7016 阅读 · 0 评论 -
Extjs弹窗控件——Ext.MessageBox
首先，浏览器自带的弹窗有alert、confirm、prompt等。js弹窗的3种方式：alert、confirm、prompt鉴于其外观丑陋以及配置不方便，我们常采用Extjs自带的弹窗控件。 // 基本的alert:Ext.Msg.alert('Status', 'Changes saved successfully.');// 用户对话框，用一个回调函数处理结果:Ext...原创 2017-02-13 13:45:37 · 6782 阅读 · 0 评论 -
ExtJs xtype一览
基本组件： xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton 带下拉选项菜单的按钮 buttongroup Ext.ButtonGroup 编组按钮(Since 3.0...转载 2016-03-25 14:47:40 · 1006 阅读 · 0 评论 -
ExtJs常用布局--layout详解（含实例）
序言：笔者用的ExtJs版本：ext-3.2.0ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor另外，不常见的布局有：tab、vbox、hbox本文所有实例代码已提供下载，下载链接：ExtJs常用布局--layout详解实例代码 简介：最常用的边框布局——BorderLay...原创 2016-05-23 18:27:14 · 42392 阅读 · 4 评论 -
用extjs写一个登录界面
先上效果图：这是一个用ext3.2.0、js、html、css写的一个还算好看的登录界面。源代码已上传，下载地址请点击：点击打开链接其主要难点在如何使用extjs来画一个界面，接下来我们就主要看一下其中的html和js吧： <!DOCTYPE html><html lang="en"><head> <meta char...原创 2016-03-29 09:20:32 · 7572 阅读 · 1 评论 -
关于extjs中的cls ≠ class
今天在做一个登录页面的时候，想给两个cls: "text_field" 的输入框设一个padding值来着的，结果发现并没有卵用。后来通过查看页面元素，发现这两只输入框的class属性并不是我设置的text_field，而是class=" x-form-text x-form-field text_field x-form-empty-field"，而这厮居然不接受我设置的padding，导致效果...原创 2016-03-28 16:34:23 · 3047 阅读 · 2 评论 -
Extjs控件属性
本文转自：http://www.cnblogs.com/exmyth/archive/2013/04/12/3015827.html Ext.form.TimeField: 配置项： maxValue：列表中允许的最大时间 maxText：当时间大于最大值时的错误提示信息 minValue：列表中允许的最小时间 ...转载 2016-04-25 16:42:47 · 765 阅读 · 0 评论 -
ExtJs （3.2.0）文件目录介绍、文件删减、文件引用
序言：ExtJs下载之后解压所得的文件是比较大的，对于学习而言里面的东西都是可以有的，但是当我们用于开发时其中的大部分文件都是可以删除的，不然的话这个内存大的有点奢侈。好了，接下来主要以ext-3.2.0为例，看一下删减前后的大小差距吧~ 删减不必要文件：解压后所得的ext-3.2.0:再看一下删减版的ext-3.2.0:由此可见，这前后相差近 37M 的容量大...原创 2016-05-24 11:04:46 · 1335 阅读 · 0 评论 -
格式化extjs DateField 的值
extjs DateField 的值用getValue()方法获取后是一大堆字符串，类似Tue Dec 07 2010 00:00:00 GMT 0800，这玩意存入数据库实在不好办。。。所以要把它格式化一下，方法很简单，用EXT的Ext.util.Format.date（）方法示例：var gedt = Ext.util.Format.date(日期控件.getValue(), 'Y-...转载 2016-08-25 10:54:52 · 1568 阅读 · 1 评论 -
如何实现全选checkbox效果
效果图： 简介：当勾选【全选】checkbox时，其余checkbox都要选中，当取消【全选】checkbox时，其余checkbox都要取消。这一点很容易实现。但是，当勾选【全选】checkbox时，其余checkbox都要选中，当取消其余checkbox中的任意一项时，【全选】checkbox需要取消勾选。这一点会有问题，笔者遇到的就是可以取消【全选】checkbo...原创 2016-09-18 15:11:16 · 3651 阅读 · 0 评论 -
ExtJs中如何实现点击之后修改类名（class）
直接上代码 <span style="font-size:14px;">check:function(){ var cmp = this.ownerCt; if (this.checked == true) { cmp.addClass("magazineTableRowSelected"); } els...原创 2016-09-18 15:24:05 · 2473 阅读 · 0 评论 -
ExtJs 获取Dom对象
ExtJs 中会有三类基本对象，htmlelement ， Ext.Element 和 CompositeElement 。分别解释一下：htmlelement 指html页面的各种标记元素，可以用 document.getElementById() 获得，具有html对象的方法和属性。Ext.Element 是最重要的EXT对象，在dom对象的基础上，又包装了很多方法和属性，可以用 ...原创 2016-09-29 11:23:23 · 2728 阅读 · 0 评论 -
ExtJs 实现点击修改DOM样式 增删clssName
实现效果图如下：如图，就是实现点击之后给对象添加一个样式（add一个className），同事删除其它对象的这个类名（通过className查找对象，再remove这个className）。 实现难点如下：1、如何通过className遍历对象可参考: ExtJs 获取Dom对象2、如何用ExtJs进行DOM操作可参考:ExtJs中如何实现点击之后修改类名（cla...原创 2016-09-29 11:38:29 · 2349 阅读 · 0 评论 -
ExtJs中table布局如何设置items之间的间距
直接上代码： .contentTable td { padding: 30px; text-align: left;}注意：默认情况下，table布局中的子控件 text-align 为 center ，此处笔者不需要居中，所以可在此处重写 text-align 属性值。 效果图：上图是默认的table布局，修改之后我们要的是下图所示：...原创 2016-10-10 16:36:22 · 4965 阅读 · 0 评论 -
ExtJS textField 表单验证 常用正则表达式
xtype: 'textfield',1.regex: /^[\u4e00-\u9fa5]+$/i,regexText : "请输入中文",2.regex: /^\d+$/,regexText: "电话号码只能为数字",3.regex: /^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+...转载 2016-10-18 18:23:10 · 4635 阅读 · 0 评论 -
【解决方案】extjs 怎么取消 gridPanel 分页工具栏上的刷新按钮
↓ ↓ ↓ 如图，项目需求要取消 gridPanel 分页工具栏上的的刷新按钮 没有为什么 听产品的！ 网上查了一下，居然说改不了，有的说改写function，晕。。。 其实很简单，一句CSS就够了，解决方法如下： .x-tbar-loading { display: none;}...原创 2016-10-24 11:19:55 · 2863 阅读 · 0 评论 -
【解决方案】extjs 怎么取消 gridPanel 表头上的图标（下拉排序）
以上是已解决的代码，主要就一句话：menuDisabled:true原创 2016-10-24 16:51:04 · 3838 阅读 · 1 评论 -
ExtJs 通过 toggleClass 实现样式切换 ——以及更多的CSS操作
此处重点介绍一下 toggleClass的应用，如图：css ↓ extjs ↓修改之后 ↓同样是为了实现一个样式切换的效果，之前不知道 toggleClass这个神器的时候还傻傻地用 hasClass + removeClass + addClass 来进行判断操作。。。 好了，后面的内容转自ExtJs使用总结(非常详细) ...转载 2016-11-02 11:27:45 · 3083 阅读 · 1 评论 -
Js 实现字数限制，超出部分显示为省略号
实现效果图 ↑ 实现代码 ↓ var oldText = magazineBook02Panel01.text; if (oldText.length > 7) { var newText = oldText.substring(0,5)+"..."; magazineBook02Panel01.setText(newText); } ...原创 2016-11-04 17:42:08 · 16208 阅读 · 0 评论 -
如何将 String类型 转换为日期格式 Date类型
有时候后台返回的日期值是这么一串数字："20161101000000000"这时如果要format日期格式（"2016-11-01"）的话，我们首先需要将它转换为日期格式，具体实现方法可以写一个通用函数，代码如下： <span style="font-size:18px;">Ext.ux.formatDate = function(dateString){ v...原创 2016-11-07 15:15:02 · 10477 阅读 · 0 评论 -
extjs完美实现“密码框显示提示文字，不显示输入文字”的变态需求！！！
先看下需求：“密码框显示提示文字，不显示输入文字”1、正常状态下：2、密码框输入密码时：3、密码框有值的时候，失去鼠标焦点的状态：4、密码框值为空的时候，失去鼠标焦点的状态： 实现代码： username:{ cls: "text_field username", inputType: 'text', ...原创 2016-11-15 14:34:55 · 4584 阅读 · 0 评论 -
Extjs 实现menu居中效果（仿弹窗）
简单的效果图： 实现方法：在button的点击事件中添加以下关键代码： var menu = Ext.getCmp("databaseMenu"); var menuWidth = Ext.getCmp("databaseMenu").getWidth(); var menuHight = Ext.getCm...原创 2016-11-23 14:41:34 · 1110 阅读 · 0 评论 -
ExtJs 实现快速清空输入框的值
如图↑：要求点击“取消”或“确定”的时候清空该表单中的所有输入框的值，即设所有 input 标签的 value 为 null。 实现： var inputEl = Ext.select(".databaseMenu input").elements; for (var i=0; i<inputEl.length; i++) { ...原创 2016-11-23 18:53:20 · 5826 阅读 · 0 评论