文章标签 ‘Extjs’
参加工作之前看了两个月的jQuery,参加工作之后在公司学了四个月的ExtJs，现在在这个公司用上了jQuery，决定闲暇之余重新学习jQuery的使用方法，顺便也看看其实现原理，加深对dom的理解。 学习jQuery使用的开发工具是Apanta，参考一个例子jQuery 1.2.6汉化版，汉化作者billsquall。其汉化后的js文件，如有需要可以联系我：JavaChencto&163.com。 之前学习extjs的时候，总是会参照jquery两者放到一起相互理解学习，现在就仅对就Query的源码进行研究学习，不扩展到extjs。
还就没有写关于Ext的文章了，可还是有不少人搜索Ext搜索到我的文章里来了。最近，在看Python语言和Android开发，没怎么接触Ext了，哎！真希望一天时间当两天用！ Ext.util.Event对象构建器需要传入两个对象：obj(处理事件的缺省对象），name(事件名称）。在构建Event对象时，Event对象会同时构建一个事件的处理函数的数组:listeners，通过这个数组实现了一个事件的多个事件句柄函数的处理。
第一步引入ExtJs文件及相关js文件： <script src=”extjs/adapter/ext/ext-base.js” type=”text/javascript”></script> <script src=”extjs/ext-all-debug.js” type=”text/javascript”></script> <script src=”extjs/ext-lang-zh_CN.js” type=”text/javascript”></script> <script src=”javascript/CheckCode.js” type=”text/javascript”></script> <script src=”javascript/FullScreen.js” type=”text/javascript”></script> <script src=”javascript/Login.js” type=”text/javascript”></script>
Ext.apply是整个ExtJs框架当中很重要的一个方法，Ext是一个对象，也可以说是一个Ext命名空间，在Extjs 3.0 ext-base.js中，Ext是如下定义的： Ext = { version : ’3.0′ }; 该对象初始化时有个version 属性，标注ExtJs框架的版本号。
Ext grid显示的行记录背景颜色都是一样的，这样不容易区分不同行的颜色、方便用户区分不同的记录。 改变单元格背景颜色的方法有几种，由简单的说起吧！ 第一种情况：加载数据时改变列的颜色。这种方式是通过Ext.grid.ColumnModel中某一列的renderer 函数来实现的。 首先定义一个样式如下： .x-grid-record-gray{ background: #c3daf9; } 定义改变颜色的列，加上renderer 渲染函数： {header:’摘要’,dataIndex:’zhaoyao’,align:’left’,width:150, renderer : function(value, m){ m.css=’x-grid-record-gray’; return value; } } 第二种情况：加载数据完成后改变行的颜色 首先要解决的一个问题是如果判断数据已经加载完毕，最简单的方法是给grid的store添加onload事件。 如果你想有条件地改变某行的背景颜色，则还需要遍历gird的store，这里有个简单的方法即store的 each方法。看下面这个例子： grid.getStore().addListener(‘load’,handleGridLoadEvent); function handleGridLoadEvent(store,records) { var girdcount=0; store.each(function(r){ if(r.get(‘STORESUSEDQTY’)==0){ grid.getView().getRow(girdcount).style.backgroundColor=’#c3daf9′; } girdcount=girdcount+1; }); } 第三种情况：使用Ext本身的颜色渲染效果 在grid中配置stripeRows为true，可以实现隔行变色，但不能达到根据不同记录集实现不同颜色的显示效果. 说完上面常见的几种方法之后，在来结合项目中的需求来实现背景颜色变色。现在项目中的Ext grid表格是三方公司用代码更具配置文件动态生成的，其代码都封装了一个动态命名的命名空间里，JavaScript代码写在了页面上。我只能在这个Ext grid代码生成之后获得一个grid引用。 下面是部分代码： Ext.namespace(‘BO_PC_REQUIRE_S’); BO_PC_REQUIRE_S.Grid=function(){ currentRowInd=0; currentColInd=0; var AWS_GRID_CHECK; var AWS_FORM; var AWS_GRID_DS_PLANT; [...]
1.直接添加其他css文件换肤. 皮肤文件:xtheme-olive.zip下载 把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面: 解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images文件夹下
Ext.BLANK_IMAGE_URL = “../js/extjs/resources/images/default/s.gif”; Ext.onReady(form11); function form1() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = “side”; var form = new Ext.form.FormPanel({ title : “用户登陆”, labelWidth : 60, labelSeparator : “: “, bodyStyle : “padding:15 5 5 5″, height : 120, width : 250, frame : true, labelWidth : 60, labelAlign : “right”, applyTo : “form”,
Ext.get( Mixed el ) : Element Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with the same id via AJAX or DOM. Ext.fly 语法: fly( String/HTMLElement el, [String named] ) : Element Ext.fly是Ext.Element.flyweight的简写，是Ext的Element类中对享元模式的应用，因Element类中的方法都是对DOM对象的操作，而DOM操作又是Ext的核心，所以如果太过于频繁的创建DOM节点的话会造成性能的下降，因而采用享元模式，享元模式以共享的方式高效地支持大量的细粒度对象 Ext.Element是Ext对 Dom元素的一个强有力封装，它封装了很多方便对dom操作的接口(并通过Element的dom属性引用对应的dom元素)，因此每创建一个 Element元素都将消耗不少的内存(主要是大量的操作接口消耗)，因此如果创建过多的Element元素必然导致内存占用的剧增和系统性能的下降。
Ext对象 addBehaviors( Object obj ) : void apply( Object obj, Object config, Object defaults ) : Object 从config拷贝所有的属性到obj,如果有defaults参数,也将拷贝其属性到obj applyIf( Object obj, Object config ) : Object 从config拷贝所有属性至obj(如果obj未定义相应属性) decode(Object obj) : String 编码一个对象/数组或其它值为一个json格式字符串(支持对象,数组,日期,字符串) destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void 尝试去移除每个传入的对象,包括DOM,事件侦听者,并呼叫他们的destroy方法(如果存在) each( Array/NodeList/Mixed array, Function fn, Object scope ) : void 利用array中的每个元素迭代调用fn.直到fn返回假,调用格式fn.call(scope || [...]
Ext中用alert弹出提示窗口后，每次都要点确定，非常不友好，要是能够每次弹出窗口，不用点确定，窗口自动消失，就好了！实际上，用Ext也可以实现这样的功能，如下：
