JavaChen on JavaExtjs

Ext读取xml文件生成动态表格和表单(续)

JavaChen — Tue, 31 Jan 2012 08:28:12 +0000

很多人向我要《Ext读取xml文件生成动态表格和表单》一文的源代码，故花了些时间将源代码整理出来，并重新编写此文，分享当时的技术思路。

《Ext读取xml文件生成动态表格和表单》一文需要的文件有：
1.html文件，此处以SASC.search.MtrUse.html为例
2.Extjs相关文件,见SASC.search.MtrUse.html文件中的引用
3.工具类，DomUtils.js
4.核心js类:SASC.extjs.search.MtrUse.js
5.java代码

详细html和js代码见相关文件，这里先描述思路。

首先
通过一个事件打开一个弹出窗口，该窗口的url指向SASC.search.MtrUse.html文件，并附带参数xmlFile，xmlFile的值为xml文件名称，其存于服务器的某一路径下面。如：“../SASC.search.MtrUse.html?xmlFile=PC_MTRREPLACE_IMP.xml” .PC_MTRREPLACE_IMP.xml文件的放置路径见DomUtils.js文件中的说明。

在这里，前台会读取该xml生成ext界面，后天会从xml文件读取sql语句等信息，详细信息见java代码。
进入SASC.search.MtrUse.html页面，执行ext的初始化方法时，会先通过当前页面的url中获取xmlFile参数的值（调用getForwardXmlUrl(getQsValue(‘xmlFile’))），得到xml文件的服务器路径，然后通过javascript的解析该xml文件，渲染出ext界面,这部分代码见SASC.extjs.search.MtrUse.js文件内的initStoreData(xmlObj) 方法。
需要说明的是，xml文件是按照一定规律编写的，详细的参考xml文件内容，以及解析xml文件的相关方法。你可以重新定义该xml的结构，然后修改解析xml文件的方法。

然后

初始化完ext界面之后，会获取表格数据，这部分使用了struts，这不是本文重点，故不做介绍。

最后
相关文件打包见：
http://vdisk.weibo.com/s/2enQS

说明
如果还有什么不懂，欢迎email：javachen.june#gmail.com

Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up

Ext.util.Event

JavaChen — Fri, 05 Mar 2010 14:47:03 +0000

还就没有写关于Ext的文章了，可还是有不少人搜索Ext搜索到我的文章里来了。最近，在看Python语言和Android开发，没怎么接触Ext了，哎！真希望一天时间当两天用！

Ext.util.Event对象构建器需要传入两个对象：obj(处理事件的缺省对象），name(事件名称）。在构建Event对象时，Event对象会同时构建一个事件的处理函数的数组:listeners，通过这个数组实现了一个事件的多个事件句柄函数的处理。
Ext.util.Event = function(obj, name){
this.name = name;
this.obj = obj;
this.listeners = [];
};

通过Event的fire方法就可以依次触发该数组中的处理函数。实际上，fire方法在遍历listeners数组中的处理函数过程中，只要处理函数的返回值为false，则不再继续运行后续的处理函数。所以，可以通过检查fire方法的返回值得知事件处理函数是否完全被运行。
fire : function(){
var ls = this.listeners, scope, len = ls.length;
if(len > 0){
this.firing = true;//通过firing可以保证多个事件处理函数不会并发运行
var args = Array.prototype.slice.call(arguments, 0);//slice方法可以有效的进行数组的克隆
for(var i = 0; i < len; i++){
var l = ls;
//事件的处理，只要有一个处理函数返回false,整个事件处理就被停止
if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
this.firing = false;
return false;
}
}
this.firing = false;
}
return true;
}

Event可以通过addListener、removeListener、clearListeners（移除所有的事件处理函数）方法对 listeners进行管理。但是，Listener中保存的事件处理函数实际上并不是addListener传递的函数，实际上，addListener传入的方法通过createListener对事件的处理函数进行了封装，通过封装，实现了对通一个重复事件的的三种不同处理方式：delay（延迟运行）、single(移除Listener中的处理函数，仅运行当前的处理函数）、buffer(避免重复运行处理函数)。

addListener : function(fn, scope, options){
var me = this,
l;
scope = scope || me.obj;
if(!me.isListening(fn, scope)){
l = me.createListener(fn, scope, options);
if(me.firing){ // if we are currently firing this event, don’t disturb the listener loop
me.listeners = me.listeners.slice(0);
}
me.listeners.push(l);
}
}

//
createListener : function(fn, scope, o){
o = o || {};
scope = scope || this.obj;
var l = {fn: fn, scope: scope, options: o};
var h = fn;
if(o.delay){
h = createDelayed(h, o, scope);
}
if(o.single){
h = createSingle(h, this, fn, scope);
}
if(o.buffer){
h = createBuffered(h, o, scope);
}
l.fireFn = h;
return l;
}

Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up

用ExtJs制作登陆界面

JavaChen — Thu, 25 Feb 2010 06:24:14 +0000

第一步引入ExtJs文件及相关js文件：

第二步，登陆界面：

第三步，登陆的js文件Login.js

^?View Code JAVASCRIPT

Ext.BLANK_IMAGE_URL = 'pic/blank.gif';
 
var login = function() {
	Ext.QuickTips.init();
	Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
 
	// 实现具体的功能
	var form = new Ext.FormPanel( {
		defaultType : 'textfield',
		labelWidth : 60,
		style : 'background:#ffffff;padding:25px 35px 30px 16px;',
		region : "center",
		defaults : {
			border : false,
			allowBlank : false,
			msgTarget : 'side',
			blankText : '该字段不允许为空'
		},
		waitMsgTarget : true,
		items : [
				{
					fieldLabel : '登录帐号',
					name : 'user',
					regex:/^[0-9a-zA-Z]{2,6}$/,
					regexText:'只能为两到六位的大小写字母。'
				},
				{
					fieldLabel : '登录密码',
					name : 'pass',
					inputType : 'password',
					regex:/^.{4,}$/,
					regexText:'长度不能少于4位'
				},
				{
					xtype : 'panel',
					layout : 'column',
					items : [
							{
								width : 130,
								layout : 'form',
								border : false,
								items : [{
									fieldLabel : '效 验 码',
									name : 'checkcode',
									xtype : 'textfield',
									allowBlank : false,
									msgTarget : 'side',
									blankText : '该字段不允许为空',
									anchor : '98%'
								}]
							},
							{   xtype : 'checkCode',
								src : 'IMG.action',
								width : 60,
								height : 20,
								handler : true
							}
					]
				}],
		buttons : [ {
			text : '登陆',
			handler : function() {
				form.getForm().submit( {
					success : function(f, a) {
						OpenFullWin(a.result.url);
					},
					url : 'login.jsp',
					waitMsg : '正在提交，请稍等...'
				});
			}
		}, {
			text : '取消',
			handler : function() {
				form.getForm().reset();
			}
		}]
 
	});
 
	var panel = new Ext.Panel( {
		renderTo : 'loginpanel',
		layout : "border",
		width : 525,
		height : 290,
		defaults : {
			border : false
		},
		items : [ {
			region : "north",
			height : 56,
			html : 'pic'
		}, {
			region : "south",
			height : 56,
			html : 'pic'
		}, {
			region : "west",
			width : 253,
			html : 'pic'
		}, form]
	});
 
	Ext.get('loginpanel').setStyle('position', 'absolute')
			.center(Ext.getBody());
 
};
 
Ext.onReady(login);

整体思路是：将登陆界面放入一个border布局的panel里面，该panel的各个部分border设为false。由于没有对

设置CSS，所以显示的登陆界面是在页面的左上角，故需要对panel设置css样式：
Ext.get(‘loginpanel’).setStyle(‘position’, ‘absolute’).center(Ext.getBody());
在CheckCode.js扩展了一个验证组件，代码如下：

^?View Code JAVASCRIPT

Ext.ux.form.CheckCode = Ext.extend(Ext.BoxComponent, {
	initComponent : function() {
		Ext.ux.form.CheckCode.superclass.initComponent.call(this);
		this.addEvents('click');//初始化时间中注册click事件
 
	},
	onRender : function(ct, position) {
               // 如果当前组件的dom不存在，则创建一个img对象
		if (!this.el) {
			this.el = document.createElement('img');
			this.el.src = this.src;
			if (this.forId) {
				this.el.setAttribute('htmlFor', this.forId);
			}
		}
		//类的onRender调用本类的onRender方法，也就是覆盖父类的onRender方法
		Ext.form.Label.superclass.onRender.call(this, ct, position);
	},
	afterRender : function() {
		Ext.ux.form.CheckCode.superclass.afterRender.call(this);
		this.el.on("click", this.onClick, this);
	},
	onClick : function() {
		if (this.handler === true)
			this.el.dom.src = this.src + '?date=' + new Date();
		else if (Ext.type(this.handler) == 'function')
			this.handler(this);
		this.fireEvent("click", this);
	}
 
});
Ext.reg('checkCode', Ext.ux.form.CheckCode);

最后，显示的效果图如下：

本文章中的代码下载：http://d.namipan.com/d/ecb1aa65111e17620d18f0565b6f2d190f13bf3d55a62b00

By the time your rss reader get this post here is 2 comments ,Welcome you come to leave your opinion !

Ext.apply 与 Ext.applyIf

JavaChen — Mon, 01 Feb 2010 02:21:35 +0000

Ext.apply是整个ExtJs框架当中很重要的一个方法，Ext是一个对象，也可以说是一个Ext命名空间，在Extjs 3.0 ext-base.js中，Ext是如下定义的：
Ext = {
version : ’3.0′
};

该对象初始化时有个version 属性，标注ExtJs框架的版本号。

apply及applyIf方法都是用于实现把一个对象中的属性应用于另外一个对象中，相当于属性拷贝。不同的是apply将会覆盖目标对象中的属性，而applyIf只拷贝目标对象中没有而源对象中有的属性。
apply方法的签名为“apply( Object obj, Object config, Object defaults ) : Object”，该方法包含三个参数，第一个参数是要拷贝的目标对象，第二个参数是拷贝的源对象，第三个参数是可选的，表示给目标对象提供一个默认值。可以简单的理解成把第三个参数（如果有的话）及第二个参数中的属性拷贝给第一个参数对象。
applyIf( Object obj, Object config ) : Object
从config拷贝所有属性至obj(如果obj未定义相应属性)

以下是其源代码：

^?View Code JAVASCRIPT

//提供了defaults参数，说明在继承父对象之前，可以先为子对象初始化一些方法或属性
Ext.apply = function(o, c, defaults) {
	if (defaults)
		Ext.apply(o, defaults);
	if (o && c && typeof c == 'object') {
		//将父对象中的属性复制到子对象
		for (var p in c) {
			o[p] = c[p];
		}
	}
	return o;
};
 
applyIf : function(o, c) {
	if (o) {
		for (var p in c) {
			//如果子对象中未定义属性，则将父对象的属性拷到子对象
			if (Ext.isEmpty(o[p])) {
				o[p] = c[p];
			}
		}
	}
	return o;
}

Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up

Ext grid改变行背景颜色

JavaChen — Sun, 10 Jan 2010 04:01:59 +0000

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;
var AWS_GRID_DS;
var AWS_GRID_CM;
var AWS_GRID_PANEL;

return {
perPage: 50,
currentRowInd:0,
currentColInd:0,
init : function(){

},
getDataSource: function() {
return AWS_GRID_DS;
},
getGridPanel: function() {
return AWS_GRID_PANEL;
},
getCurrentRowInd: function() {
return currentRowInd;
},
getCurrentColInd: function() {
return currentColInd;
},
getTitle: function(){
return ‘采购需求单子表（设计师）’;
},
saveData: function(){
if(typeof(outerDoSaveGrid)==’function’){return outerDoSaveGrid();}
},
setCellValue: function(f,v,r){
var rowInd=currentRowInd;
if(r!=undefined)rowInd=r;
AWS_GRID_DS.getAt(rowInd).set(f,v);
},
getCellValue: function(f,r){
var rowInd=currentRowInd;
if(r!=undefined)rowInd=r;
return AWS_GRID_DS.getAt(rowInd).get(f);
}
}//End return
});

参考上门说的三种方法，第一种不可实现，第二种可以实现，但存在一些问题：数据加载完之后，达到不同行显示不同背景色的目的，但是当你单击表头进行排序的时候，表格内的所有行背景颜色又都回到了默认颜色，让人烦恼！这时候想想，我可不可以重写表头的事件，使执行这些事件的时候，也是行背景变色呢？实现代码如下：
BO_PC_REQUIRE_S.Grid.getGridPanel().getStore().addListener(‘load’,
handleGridLoadEvent);
function handleGridLoadEvent(store,records) {
var girdcount=0;
store.each(function(r){
if(r.get(‘STORESUSEDQTY’)==0){
BO_PC_REQUIRE_S.Grid.getGridPanel().getView().getRow(girdcount).style.backgroundColor=’#c3daf9′;
}
girdcount=girdcount+1;
});
}

BO_PC_REQUIRE_S.Grid.getGridPanel().addListener(‘headerclick’,
function(){
var girdcount=0;
BO_PC_REQUIRE_S.Grid.getDataSource().each(function(r){
if(r.get(‘STORESUSEDQTY’)==0){
BO_PC_REQUIRE_S.Grid.getGridPanel().getView().getRow(girdcount).style.backgroundColor=’#c3daf9′;
}
girdcount=girdcount+1;
});
});

BO_PC_REQUIRE_S.Grid.getGridPanel().addListener(‘headermousedown’, function(){});

这样做又有了问题，表格排序事件不起作用了，有没有更好的解决办法呢？看看API，grid里有个视图，通过改变视图里的getRowClass方法，可以实现行跨多列显示、单行内显示多行内容等等效果。可不可以参照这个思路，通过改变css实现行背景换色呢？
代码如下：
BO_PC_REQUIRE_S.Grid.getGridPanel().getView().getRowClass=function(record,rowIndex,rowParams,store){
if(record.data.STORESUSEDQTY==0){
return ‘x-grid-record-gray’;
}else{
return ”;
}};

By the time your rss reader get this post here is 1 comments ,Welcome you come to leave your opinion !

您可能也喜欢：
extjs换肤	用ExtJs制作登陆界面	Ex.get与Ext.fly	Ext.apply 与 Ext.applyIf	Ext.util.Event
无觅

您可能也喜欢：
用ExtJs制作登陆界面	extjs换肤	Ext读取xml文件生成动态表格和表单(续)	DOM 事件模型	Ex.get与Ext.fly
无觅

您可能也喜欢：
Ext form实例	extjs换肤	Ext实现grid和form动态绑定	Ext读取xml文件生成动态表格和表单(续)	Ext实现多行多列布局
无觅

您可能也喜欢：
Ext读取xml文件生成动态表格和表单(续)	extjs换肤	用ExtJs制作登陆界面	Ex.get与Ext.fly	Ext实现多行多列布局
来自无觅网络的相关文章：
庆祝：申请Google Adsense广告成功心得 (@netsh)	丑男教你申请qq网址安全认证! (@wx)	Html5新功能简介_CSS帝国 (@cssking)	新手急求帮助 (@dedeadmin)	屁孩博客：离开页面提示是否保存页面修改内容的简单实现 (@pihai)
无觅

您可能也喜欢：
从Excel表格拖放数据到Ext Grid中	Ext 动态读取grid 列数	Ext实现grid和form动态绑定	extjs换肤	Ext自定义LoadMask
无觅