![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
extjs
文章平均质量分 84
寒冥冷煜
热爱互联网,专注于web前端开发。熟悉Html、CSS和Javascript,以及相关开源框架和技术。比如:Bootstrap、Less、jQuery、Angular、Node.js、Grunt、Bower等。
展开
-
Ext的弹出窗口
5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。浏览器原声的alert(),confirm(),prompt()显得如此寒酸,而且还不能灵活配置,比如啥时候想加个按钮,删个按钮,或者改改按下按钮触发的事件了,都是难上加难的事情。既然如此,为何不同ext提供的对话框呢?那么漂亮,那么好配置,可以拖啊,可以随便放什么东西,在里边用啥控件都可以,甚至放几个tab乱切换呀,连最小化窗口的功能都提供...原创 2009-03-18 17:09:45 · 150 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs元素Element(一)
从这一节开始分析ExtJs对元素(Element)的封装与扩展,首先看Ext.lib.Dom 类Ext.lib.Dom 该类源代码对应的文件为ext-base-dom.js。Ext.lib.Dom主要实现了对document中元素部分方法的兼容性实现。在前面事件(Ext.EventManager)的讲解中已经用到了该类。 该类的实现采用...原创 2011-06-07 15:47:40 · 142 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs元素Element(二)
元素操作核心类Ext.Element 类Ext.Element对DOM元素的进行了封装,并对DOM加入了简单的操作,实现了各浏览器的兼容;该类的实例可以更容易的对DOM elements进行操作;类中的事件,即封装了浏览器的事件,也可以访问底层浏览器事件(Ext.EventObject{@}#browserEvent);该类操作DOM元素时,很多情况下会用到一些动画效果...原创 2011-06-07 16:42:32 · 206 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs元素Element(三)
Ext.Element扩展 通过Ext.Element.addMethods方法,Ext.Element扩展了许多对dom操作的方法,主要分为DOM坐标(Element.position.js),DOM滚动条(Element.scroll.js),DOM样式(Element.style.js),DOM动画(Element.fx.js),DOM元素的插入(Element.i...原创 2011-06-07 17:06:30 · 88 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs元素Element(四)
元素的操作Ext.DomHelper 该类中的函数主要来简化创建DOM元素操作,采用单例模式实现。主要提供了createHtml和createDom函数。createHtml函数根据配置来创建HTML标签,最终通过innerHTML插入到文档中,二createDom函数根据配置来创建DOM对象,最终通过appendChild或insertBefore函数插入到文档中。下...原创 2011-06-07 17:17:49 · 108 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs元素Element(五)
元素的查询Ext.DomQuery 该类结合css选择器可以提供高效的查询。首先说一下DOM中对文档元素的查询,主要有以下方法 document.getElementById(id) element.getElementsByTagName(tagName) DOM对应的6个属性来获取其父、子及兄弟节点的引用 parentNod...原创 2011-06-07 17:35:00 · 65 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs元素Element(六)
批量操作元素Ext.CompositeElementLite 该类提供了对一批元素进行相同操作的实现,他是建立在Ext.Element基础上,类中有一个集合,用来保存一批元素。该类的操作依赖于Ext.select,即Ext.Element.select函数来查询元素。先看构造器方法 Ext.CompositeElementLite = function(el...原创 2011-06-08 10:41:46 · 128 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs事件机制(一)
前面讲了ExtJs核心代码以及扩展后,今天来说说ExtJs的事件机制,要想弄明白ExtJs的事件机制,就必须先知道浏览器的事件机制,这里给出了浏览器事件机制与自定义事件的实现。 首先看源码 ext-base-event.js 关于浏览器本身事件的封装。代码中实现了各主要浏览器的兼容,以及对一些事件进行了扩展。该代码中首先定义了类Ext.lib.Event,该...原创 2011-03-15 18:53:32 · 225 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs事件机制(二)
在ExtJs源码分析与学习—ExtJs事件机制(一)中分析了ExtJs对原生浏览器事件的封装。这篇进一步分析ExtJs对事件的封装和扩充。ExtJs会对浏览器本身的事件进行转换,是通过类Ext.EventObject来实现的,该类中通过自执行匿名函数返回Ext.EventObjectImpl对象,该对象用到了Ext.lib.Event(对原生浏览器事件的扩展)。 Ext.Ev...原创 2011-03-15 20:15:26 · 123 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs事件机制(三)
这篇讲ExtJs对事件的管理和调用 ExtJs对事件的管理非常强大,主要定义在Ext.EventManager对象(单例模式)中。先看注册事件监听方式,ExtJs提供了几种方式来注册元素监听函数通过Ext.EventManager.addListener/on函数来为指定元素的某种事件注册监听函数。例如:Ext.EventManager.on('test1','click...原创 2011-03-15 20:20:54 · 203 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs事件机制(四)
ExtJs组件事件——ExtJs自定义事件的处理 下面通过对组件的事件对象和事件机制两个方面分别对源码进行分析。组件事件对象 ExtJs组件事件对象是通过Ext.util.Event类来完成的,其实在浏览器元素事件中部分功能的实现已用到了该类。下面看该类的实现代码 EXTUTIL.Event = function(obj, name){ this....原创 2011-03-19 23:37:53 · 144 阅读 · 0 评论 -
ExtJs源码分析与学习—工具类Ext.util.TextMetrics
Ext提供了一个很有用的工具类Ext.util.TextMetrics,利用该类可以很方便的为一段文字提供一个精确象素级的测量,以便可以得到某段文字的高度和宽度。该类的实现采用了单例模式,即当调用该类时,该类内部属性shared已实例,下次调用时不需再实例化。先看函数的定义 Ext.util.TextMetrics = function(){ var shared;...原创 2011-06-07 15:11:35 · 108 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs事件机制(六)
最后把涉及到Ext事件的相关类图贴到这里原创 2011-06-07 11:25:36 · 94 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs事件机制(五)
最近一直忙着做产品,所以好久没有写文章了,下面接着把ExtJs事件机制最后一点内容写完。主要是介绍Ext提供的三个辅助实现事件类——快捷键、导航键和鼠标按键事件。 快捷键 Ext.KeyMap 该功能的实现被封装在类Ext.KeyMap中Ext.KeyMap = function(el, config, eventName){ this.el ...原创 2011-06-07 11:15:11 · 147 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs源码结构
一、源码的目录结构以下是以官方最新版本ext-3.3.1列出源码目录结构1、 adapter :适配器,主要是ExtJs 提供了4中适配器 ext、jquery、prototype、yui。通过这些适配器,可以使ExtJs的应用建立在这些框架之上2、 core:对ext-core的补存3、 data:封装了ExtJs的数据模型4、 dd:封装了ExtJs组件的...原创 2011-01-07 16:10:45 · 99 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs核心代码(一)
首先声明一下,以下部分内容摘自网上 一、 有了上一篇ExtJs源码结构和ExtJs自带的调试工具后,下面介绍一下ExtJs最核心的部分ext-core二、 首先看Ext.js文件window.undefined = window.undefined; 该段代码是为了兼容不支持window.undefined对象的老版浏览器(估计现在没人用老版浏览器了,呵呵),详细说明可参考...原创 2011-01-07 16:32:11 · 305 阅读 · 0 评论 -
ExtJs中继承的实现与理解—extend
以下总结参考网络上资源 Ext中实现类的继承extend (Object subclass,Object superclass,[Object overrides] : Object) 第一个参数:子类 第二个参数:父类 第三个参数:要覆盖的属性。 这里需要强调一下,子类继承下来的是父类中通过superclass.prototype方式定义的属性(包括用此方法定义...原创 2011-01-17 13:52:03 · 72 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs核心代码(二)
接上篇下面介绍Ext.js中其他核心方法 Ext.namespace,用来管理Ext库命名空间的方法 namespace : function(){ var o, d; Ext.each(arguments, function(v) {//循环遍历所传的参数 d = v.split(".");...原创 2011-01-17 16:23:48 · 160 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs核心代码(三)
Ext为javascript的一些对象进行了扩展,主要有String、Array和Function,以下只介绍Ext.js中提到的方法,其他的后续再介绍 Ext为String扩展了方法 format,该方法为String的静态方法(类方法),可以把字符串中特殊写法({0},{1})用指定的变量替换 //定义带标记的字符串,并用传入的字符替换标记。每个标记必须是唯一的,而且必须要像{...原创 2011-01-17 17:29:22 · 220 阅读 · 0 评论 -
ExtJs表单几种验证与扩展
首先说明一下表单验证与其相关的一些设置 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。 Ext.form.Field.prototype.msgTarget='side'; //指示错误出现的方式,包含的值为qtip-当鼠标移动到控件上面时显示提示 //默认值为qtip,使用此种...原创 2011-05-03 16:26:56 · 132 阅读 · 0 评论 -
ExtJs源码分析与学习—ExtJs核心代码扩展
前面三篇文章参考作者snandy总结了Ext中核心代码Ext.js,今天对Ext.js的扩展Ext-more.js进行分析。这里首先感谢snandy,这位作者文章写的不错,对Ext的理解也很深入,学习了。 该类中主要是对Ext核心方法进行了扩展 Ext.ns("Ext.grid", "Ext.list", "Ext.dd", "Ext.tree", "Ex...原创 2011-01-20 19:16:02 · 111 阅读 · 0 评论 -
Ext 组件操作总结——会不断完善
1、Ext.Component该组件在渲染的时候会默认的创建div DOM,是根据this.autoEl的配置来创建的,默认this.autoEl为 div,创建后保存在 this.el中autoShow 设为true,渲染时会强制显示隐藏的元素,实际上会执行以下代码 if(this.autoShow){//自动显示 thi...原创 2011-05-10 16:36:24 · 155 阅读 · 0 评论 -
ExtJs源码分析与学习—Ext.UpdateManager
如果想让html页面中任意元素自动局部刷新,而不是整个页面刷新,可以用Ext提供的Ext.UpdateManager来完成其功能,该类还可以实现在线人数统计等功能。下面先看例子 //html内容<div id="refreshContent"></div>//js内容var el = Ext.get('refreshContent'); /...原创 2011-09-06 16:12:43 · 386 阅读 · 0 评论 -
ExtJs源码分析与学习—遮罩层
类Ext.LoadMask 这一节分析Ext中遮罩效果的实现,Ext中专门为遮罩效果提供了类Ext.LoadMask,该类封装了Ext.Element中实现遮罩的方法mask和unmask(这两个方法的定义在源文件Element.fx-more.js中)。该类用于在加载数据时为元素做出类似于遮罩的效果。如果配置了Ext.data.Store,则可将效果与Ext.data.Stor...原创 2011-09-06 16:49:32 · 332 阅读 · 0 评论 -
ExtJs源码分析与学习—Ext.ToolTip应用
源码待分析,先粘一例子备用 //要显示提示信息的目标id var targetId = this.titleContext.first().first().id; new Ext.ToolTip({ baseCls: 'z-workflow-tip',//自定义样式 target...原创 2011-12-29 14:18:45 · 91 阅读 · 0 评论