Extjs
beyond1993
这个作者很懒,什么都没留下…
展开
-
ExtJS用户登录界面
[size=large]首先:鉴于目前自己在学习ExtJS,也把自己学习中的一些东西给大家分享,我看网上很多朋友都很关注Extjs的,我自己也刚开始学习没多久!把《EXTJS WEB应用程序开发指南》从头到尾也看了俩遍,这本书讲得不算深入,但对于API讲解得比较多,在某种程度上讲可以看作这是中文版的API,如果是还没有入门的朋友可以去买来看看,我看完这本书的感觉就是知道EXT的基本大概结构,说到实...2009-07-27 15:57:53 · 204 阅读 · 0 评论 -
Ext.form.ComboBox 远程带分页显示
很多时候针对大数据量的下拉列表的时候,我们通常需要分页显示数据,就像grid一样效果:[img]http://dl.iteye.com/upload/attachment/559314/04850ba2-dc28-3de5-a990-8df4be975da9.jpg[/img][code="java"]//这里是Storevar store = new Ext.data...原创 2011-09-23 22:00:35 · 151 阅读 · 0 评论 -
Extjs源码之-- Ext.util.JSON
很多写extjs的朋友说,Extjs的源码之间的关系太紧了,所以不能像其他很多框架那样,能分模块按需加载,但Ext很难做到,其实这确实是存在这样的问题,但如果作为一个框架,代码之间没有依赖性,那这代码必然不是最精简的,但其实Ext的很多代码还是依赖性很小的,自己稍微加工一下就可以做成自己需要的工具函数用!看代码[code="java"]//JSON对象和String对象转化Ext....原创 2011-09-23 23:19:04 · 160 阅读 · 0 评论 -
extjs源码分析-008(Ext.removeNode)
[code="java"]DOC = document;removeNode : isIE ? function(){ var d; return function(n){ if(n && n.tagName != 'BODY'){ d = d || DOC.cr...原创 2011-03-09 22:35:12 · 134 阅读 · 0 评论 -
extjs源码分析-009(Ext.urlDecode/urlEncode)
[code="java"]//把json格式转化成url的编码方式// e.g. Ext.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2"urlEncode: function(o, pre){//o为json对象,pre为前缀 var undef, buf = [], key, e = encod...原创 2011-03-09 23:17:46 · 173 阅读 · 0 评论 -
extjs源码分析-009(Ext.urlAppend/toArray)
[code="java"]//在URL后面追加参数urlAppend : function(url, s){//s 新追加的参数 if(!Ext.isEmpty(s)){ return url + (url.indexOf('?') === -1 ? '?' : '&') + s; } ...原创 2011-03-10 22:43:33 · 131 阅读 · 0 评论 -
extjs源码分析-011(namespace)
[code="java"]//命名空间,就是创建一个OBJ的一个属性,namespace : function(){ var o, d; Ext.each(arguments, function(v) { d = v.split("."); o = window[d[0]...原创 2011-03-10 22:54:13 · 61 阅读 · 0 评论 -
Extjs源码之---Ext.util.DelayedTask
[code="java"]/*创建对象var task = new Ext.util.DelayedTask(function(){ alert(Ext.getDom('myInputField').value.length);});调用执行Ext.get('myInputField').on('keypress', function(){ task.{...原创 2011-10-12 22:56:53 · 162 阅读 · 0 评论 -
Extjs源码之--Ext.lib.Dom(Dom的基本封装)
[b][color=blue]Extjs的对Dom最基础的封装,主要包括:元素的包含关系,元素或文档的可视宽高,获取元素的位置,设置元素的位置,这些都是elment最基础的属性,这涉及到各个浏览器兼容器问题,如果想获得详细解答,可以看看 Nicholas C.Zakas 的《javascript高级程序设计》第二版 第11章261-268页[/color][/b][code="java"]...原创 2011-10-13 23:31:11 · 243 阅读 · 0 评论 -
Extjs源码之--Ext.lib.Event(事件的简单封装)
[b][color=blue][size=large]这个对象是对事件的基础封装,在实际使用中,我们往往不从这里去引用,而更多的是从Ext.EventManager中引用,这个只是为Ext.EventManager的接口做准备,这里定义:添加监听,删除监听,取消冒泡,阻止事件默认行为,事件目标,事件类型,事件源,以及鼠标事件的客户区坐标位置,屏幕坐标位置,键码,字符编码等方面对浏览器兼容性进行...原创 2011-10-16 11:34:33 · 153 阅读 · 0 评论 -
Extjs源码之--Ext事件机制/继承关系
[b]Extjs源码之--Ext.lib.Event 中分析了EXT事件简单封装,其实EXT事件主要有三个对象组成,而这些对象是相互继承或者是说结构上的从下到上的依赖关系,Ext.lib.Event是基础,封装了基本的事件模型,他是这个事件体系中的核心和基础,是属于adapter级别的,他屏蔽了浏览器的特征,这个对象其实是不对外的,从Ext源码中你也能发现这么一段(This function ...原创 2011-10-16 16:36:52 · 168 阅读 · 0 评论 -
extjs源码分析-012(Funtion扩展)
[code="java"]Ext.apply(Function.prototype, { //创建拦截器,也就是在函数执行想运行拦截器,当拦截器返回false则不往下执行 /*var sayHi = function(name){ alert('Hi, ' + name); } var sayHiToFriend = sayHi...原创 2011-03-18 22:42:41 · 132 阅读 · 0 评论 -
extjs源码分析-013(String扩展)
[code="java"]//字符串替换/*var cls = 'my-class', text = 'Some text';var s = String.format('<div class="{0}">{1}</div>', cls, text);*/Ext.applyIf(String, { format : function(format){...原创 2011-03-18 23:05:11 · 89 阅读 · 0 评论 -
extjs源码分析-013(Array扩展)
[code="java"]Ext.applyIf(Array.prototype, { //和String 的indexOf一样的效果,如果数组中存在当前值,则返回这个值的下标位置,否则返回-1 indexOf : function(o){ for (var i = 0, len = this.length; i < len; i++){ ...原创 2011-03-19 11:03:14 · 98 阅读 · 0 评论 -
extjs源码分析-015(Number扩展)
[code="java"]Ext.applyIf(Number.prototype, { //确认某个数组是否在指定范围内 constrain : function(min, max){ return Math.min(Math.max(this, min), max); }});[/code]...原创 2011-03-20 01:03:36 · 86 阅读 · 0 评论 -
extjs源码分析-016(Ext....)
[code="java"]Ext.apply(Ext, function(){ var E = Ext, idSeed = 0; return { emptyFn : function(){},//空函数 value : function(v, defaultValue, allowBlank){ return Ext.isEmp...原创 2011-03-28 23:04:30 · 161 阅读 · 0 评论 -
Ext.form.ComboBox change事件的BUG
因为项目需要,想用Ext的combo控件实现动态级联,发现combo确实不好用,也可能是我对这个组建不熟悉吧,拿动态级联来讲,首先我们能想到的触发事件肯定就是change事件了,可不幸的是,这个change时间并不像我们原生的HTML中的 select的onchange事件,这个change事件需要使当前控件失去焦点、或者在空白处点击下才能达到和select中onchange一样的效果,我有点想不...原创 2011-09-08 23:11:08 · 660 阅读 · 1 评论 -
extjs源码分析-007(Ext.each)
[code="java"] each : function(array, fn, scope){ if(Ext.isEmpty(array, true)){//array不得为空,fn为回调函数(array[i],i,array),scope为作用域,一般为this return; } ...原创 2011-02-08 14:40:26 · 96 阅读 · 0 评论 -
Ext表单组件实现用户注册
先看一下总体的效果![img]http://lovebeyond.iteye.com/upload/attachment/132206/f6c2a0ad-ffcd-3fe2-867f-275f3000e0e2.gif[/img]这个界面是我由[url]http://java-cn.com/members/register.jsp[/url]的注册表单转换成ExtJS实现!这个表单基本上...2009-08-04 20:55:40 · 156 阅读 · 0 评论 -
Ext表单组件之textField
先看效果:[img]http://lovebeyond.iteye.com/upload/attachment/132579/697c9555-5ff5-3b95-b6e4-a646c7d099ca.jpg[/img][size=large]只是简单的介绍textField相关的组件的应用!其中也较为详细的介绍了formpanel和fieldset的应用,对于界面的布局来讲特别是对表单...2009-08-05 17:39:07 · 452 阅读 · 0 评论 -
Ext表单组件之checkbox
[img]http://lovebeyond.iteye.com/upload/attachment/132698/06745dfa-42bf-3e1d-a391-5782981dfe63.jpg[/img]这个组件都比较简单,要配置的参数很少radio和checkbox设置基本一样,就几个属性(checked,handler,boxLabel,inputValue),俩个的配置一样的可以...2009-08-05 21:29:06 · 367 阅读 · 0 评论 -
Ext表单组件之HtmlEditor
[size=large]所有设置都是按部就班,没有特别的地方,基本就只是功能的开启与关闭createLinkText:‘’表示创建超链接按钮的提示信息,在这之前别忘记了把Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'title';加上,否则提示信息会看不到效果!还有一个选项就是buttonTips,其接受一...2009-08-06 00:18:39 · 182 阅读 · 0 评论 -
Ext+JSP实现数据提交
[size=large]form组件实现数据的提交和验证!这里讲的主要是后台验证,和服务器脚本的交互!我用的是EXT2.2.1版本,比2.0版本配置项功能更强!数据提交用到的是submit函数!继承自Action,其自身多了一个clientValidation 配置项,表示是否设置前台验证!我这里就讲了数据的提交,至于数据的加载基本上是一样的配置!自己参照API手册,主要是熟悉后台数据...2009-08-06 23:56:26 · 150 阅读 · 0 评论 -
Ext表单之loadRecord用法详解
[img]http://lovebeyond.iteye.com/upload/attachment/133355/c4778cd0-762d-3d20-b310-a186a61702ee.jpg[/img][size=large]这个方法是BaseForm的一个公用方法,用法比较常用,之前没有想过要专门的去讲这么个方法的运用,但看到官方实例里面也有详细的讲这个方法的具体应用,而且我觉得是...2009-08-07 17:02:30 · 1138 阅读 · 0 评论 -
Ext+XML实现数据载入
[img]http://lovebeyond.iteye.com/upload/attachment/134276/fd58d96a-328f-375f-bc58-0f2a57750032.jpg[/img][size=large]这里实现的效果的从XML文件中把数据动态的载入到表单中!其实这部分在和data部分一起将比较好,但因为这里也比较容易,涉及到的配置也不多!Form 表单的Act...2009-08-08 23:49:12 · 98 阅读 · 0 评论 -
Ext组件之gridPanel一
这里从一个最简单的grid表格开始讲起!grid其实就是实现数据显示的表格,但其功能比HTML中的table功能要强很多,具体强在那里,接下来会一一介绍!grid中最重要最常用的属性主要有以下几个:store,autoExpandColumn ,cm(colModel ) ,columns ,disableSelection ,enableColumnHide ,enableHdMenu,...2009-08-18 09:28:00 · 98 阅读 · 0 评论 -
Ext.grid.EditorGridPanel 中combo的显示异常
Ext.grid.EditorGridPanel 在项目中用到Ext的这个组件,但发现在这个组件中添加editor的类型为combo的时候有点小问题,如果单纯的从combo来讲设置valueField和displayField值为对应的字段名就OK了,但在Ext.grid.EditorGridPanel的editor中,怎么设置最后显示的都是valueField,我百度了一下,很多同学也遇到了这样...原创 2011-09-03 00:58:03 · 146 阅读 · 0 评论 -
extjs源码分析-001(Ext.apply)
[code="java"]/** * Copies all the properties of config to obj. * @param {Object} 继承的对象 * @param {Object} 新的配置参数--这个值可以为空 * @param {Object} 新的配置参数--这个值可以为空 * @return {Object} returns obj 返回...原创 2011-02-07 15:15:17 · 89 阅读 · 0 评论 -
extjs源码分析-002(js类型判断)
[code="java"]Ext = {};//Ext.apply = function(o,c,d){}//见extjs源码分析-001(Ext.apply)var toString = Object.prototype.toStringExt.apply(Ext, { //isFinite --->返回true 表示值是非 NaN 、非负无穷和非正无穷...原创 2011-02-07 16:17:49 · 101 阅读 · 0 评论 -
extjs源码分析-003(js获取系统或者客户端信息)
[code="java"](function(){ var idSeed = 0, ua = navigator.userAgent.toLowerCase(),//客户端信息 check = function(r){ return r.test(ua); }, DOC = docume...原创 2011-02-07 21:10:52 · 97 阅读 · 0 评论 -
extjs源码分析-004(Ext.applyif)
[code="java"]Ext.apply(Ext, { //这个和Ext.apply的不同在于,Ext.apply会覆盖存在的属性 applyIf : function(o, c){//拷贝所有o没有的属性 if(o){ for(var p in c){ ...原创 2011-02-07 21:23:04 · 97 阅读 · 0 评论 -
extjs源码分析-005(Ext.getDom,Ext.getBody)
[code="java"]var DOC = document;//获取DOM节点对象getDom : function(el, strict){//el-->id 或者 html节点,strict-->是否只支持ID属性(ie下IE的name属性也能获取)获取节点对象 if(!el || !DOC){ return null...原创 2011-02-08 00:22:58 · 137 阅读 · 0 评论 -
extjs源码分析-006(Ext.override/Ext.extend)
[code="java"] override : function(origclass, overrides){//方法重载,不存在就添加,存在就覆盖原有方法 if(overrides){ var p = origclass.prototype; Ext.apply(p, overrid...原创 2011-02-08 00:40:11 · 140 阅读 · 0 评论 -
extjs源码分析-Ext.util.TaskRunner(模拟多线程)
[code="java"]/** * @class Ext.util.TaskRunner * @description 模拟多线程的JS类//一个简单的更新闹钟时间的任务var updateClock = function(){ Ext.fly('clock').update(new Date().format('g:i:s A'));} var task ...原创 2011-08-12 12:09:53 · 134 阅读 · 0 评论