Archive for the ‘ExtJs’ Category
还就没有写关于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;
}
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也可以实现这样的功能，如下：
如果我们能把应用程序（如：excel）中的表格数据直接拖放到Ext的grid中，而不是通过上传等方式，那么一定很神奇。很高兴的告诉你，这个功能已经实现了，看下面的视频：
查看源码：http://code.google.com/p/ext-ux-datadrop/source/browse/trunk/src/
文档：http://www.vinylfox.com/docs/?class=Ext.ux.grid.DataDrop
下载JS文件：Ext.ux.DataDrop.js
listeners : {
specialkey : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
searchByFilter();
}
}
}
这是以监听器的方式添加监听事件，还有一种方法与此差不多：
keys : {
key : Ext.EventObject.ENTER,
fn : function(btn, e) {
searchData();
}
}
