实现通用的CRUD之四——视图定义

 

接上篇（javaEYE的图片只能插三个？），继续发截图。

选中一条，查看详细：

 

在详细中，显示子表数据：

 

截图完毕。

 

由于上文中我们已经总结出一个与数据库CRUD相对应的界面范式，那么进一步地，可以通过以下javascript代码，简单地给出必要的信息，

告诉ExtJS我们想获得怎样的界面。

相关代码如下：

 

BView.viewMap={
 "dao.hb.OStation":{
	req:{
		"pss" : [["id", "name","code","topology","tel", "longitude","latitude","status","tmCreate","tmModify","remark"]],
		"cns" : ["dao.hb.OStation"],
		"hql" : "from OStation"
	},
	func_title: function(o){ return o.items.map['name']+'详细信息'; },
	cfg_detail:{
	 btns:["保存"],
	 tabs:[{
		title : "基本信息",
		fset : [{
			legend : "",
			props :["id", "name","code","topology","tel", "longitude","latitude","status"]
		}]
		},{
			title : "电话",
			fset : [{
				legend : "",
				props :["tel"]
			}]
		},{
		title : "备注",
		fset : [{
			legend : "",
			props :["remark"]
		}]
	}]},
	cfg_grid:{
		btns:['增加','打开','保存','检索','刷新','排序'],
		hide: ["status","tmCreate","tmModify","remark"]
	},
	cfg_prop:{
	"id":{
	  display:'序号',
	  cfg:{
	  	readOnly:true
	  }
	},
	"name":{
	 display:"名称"
	},
	"code":{
	 display:"编号"
	},
	"topology":{
	 display:"拓扑附件"
	},"tel":{
	 display:"电话",
	 editor:"TextArea"
	},
	"longitude":{
	 display:"X坐标"
	},"latitude":{
	 display:"Y坐标"
	},
	"status":BView.cfg_status,
	"tmModify":{
	  editor:"DateField",
	  display:'更新时间',
	  dcfg:{
		readOnly:true
	 }
	},	
	"tmCreate":{
	  editor:"DateField",
	  display:'建立时间',
	  dcfg:{
		readOnly:true
	 }
	},"remark":{
	  display:'备注',
	  editor:"TextArea"
	}	

	
  },child_views : [{
  	title:"相关设备",
  	vn:"dao.hb.ODevice",
	func_filter: function(robj, ui) {
		var cn = robj.cns[0];
		var hql = " from ODevice where sid=" + (robj.items.map['id'] || 0)+" order by id";		
		ui.setHQL(hql);
	},
	func_setdefault:function(robj,objs){
		objs[0].items.map["sid"]=robj.items.map['id'];
	}
  },{
  	title:"相关附件",
  	vn:"dao.hb.OAttachment",
	func_filter: function(robj, ui) {
		var cn = robj.cns[0];
		var hql = " from OAttachment where entityName='"
		+ robj.cns[0]+"' and entityId=" + (robj.items.map['id'] || 0);		
		ui.setHQL(hql);
	},
	func_setdefault:function(robj,objs){
		objs[0].items.map["entityName"]="dao.hb.OStation";
		objs[0].items.map["entityId"]=robj.items.map['id'];
	}
  }],
  rel_views:[{
  	title:"关联附件",
  	vt:{
  		vn:"dao.hb.ODevice",
  		title:"已关联附件"
  	},
  	vs:{
  		vn:"dao.hb.UUser",
  		title:"可选附件"
  	}
  }]
 },
 "dao.hb.ODevice":{
	req:{
		"pss" : [["id","mid","sid","sno","name","cabinet","domain","ipaddr","status","iconid","comunityGet","comunitySet","showtip","tmCreate","tmModify","remark"]],
		"cns" : ["dao.hb.ODevice"],
		"hql" : "from ODevice order by id"
	},
	cfg_detail:{
	btns:["保存"],
	tabs:[{
		title : "基本信息",
		fset : [{
			legend : "",
			props :["id","mid","sid","sno","name", "cabinet","domain","ipaddr","status","iconid","comunityGet","comunitySet","showtip"]
		}]
		},{
		title : "备注",
		fset : [{
			legend : "",
			props :["tmCreate","tmModify","remark"]
		}]
	}]},
	cfg_grid:{
		hide: ["islinked","tmCreate","tmModify","remark"]
	},
	cfg_prop:{
	"id":{
	  display:'序号',
	  cfg:{
	  	readOnly:true
	  }
	},
	"mid":{
	 display:"设备类型",
	 editor : 'ComboBox',
	 cfg :BView.func_cfg_combo_hql("select id,model from ODeviceType order by id","id")
	},
	"sid":{
	 display:"位置序号"
	},
	"sno":{
	 display:"设备编号"
	},
	"name":{
	 display:"设备名称" 
	},
	"cabinet":{
	 display:"机柜编号"
	},
	"domain":{
	 display:"所属域/子系统"
	},
	"ipaddr":{
	 display:"ip地址"
	},
	"adminMode":{
	 display:"设备管理参数"
	},
	"adminUrl":{
	 display:"设备管理url"
	},
	"status":{
	 display:"状态",
		editor : 'ComboBox',
		renderer : function(val) {				
		  var dtxt = {						
			'0':'禁用',	
			'1':'启用',	
			'2':'备用'};
			return dtxt[val];
		},
		cfg :BView.func_cfg_combo([['启用', 1], ['禁用', 0], ['备用', 2]])
	},
	"iconid":{
	 display:"复用拓扑图设备图标ID"
	},
	"comunityGet":{
	 display:"snmp的Get方法"
	},
	"comunitySet":{
	 display:"snmp的Set方法"
	},
	"showtip":{
	 display:"是否显示tip"
	},
	"tmModify":{
	  editor:"DateField",
	  display:'更新时间',
	  dcfg:{
		readOnly:true
	 }
	},	
	"tmCreate":{
	  editor:"DateField",
	  display:'建立时间',
	  dcfg:{
		readOnly:true
	 }
	},"remark":{
	  display:'备注',
	  editor:"TextArea"
	}	
  }
 }
};

 

以上javascript代码遵循一个简单的视图定义规则，对规则简要描述如下：

 

 

父类成员	子类成员	类型	说明
Req 请求	Hql	String	列表方式下获得记录的查询语句
Rownum	Int	分页每页行数
Cns	String[]	多表查询的O/R mapping类名
Pss	String[][]	多表查询的O/R mapping类的属性子集
Start	Int	游标起始位置
SN	string	后台服务实例
Propdef 属性定义	display	string	属性的中文名
editor	string	属性的类型（文本框、组合框、树、附件等）
renderer	function	列表方式下对属性数据的显示方法
cfg	map	属性类型的配置参数
Grid 列表方式	Hide	String[]	列表方式下隐藏的成员列
Page	Boolean	是否分页
Hidebtns_objview	Int[]	查看权限下隐藏的按钮
Hidebtns_objmode	Int[]	编辑权限下隐藏的按钮
btns	Button[]	列表方式下的按钮数组
Edit 详细方式 包含多个标签页，每个标签页包括多个属性集合	Legend	String	属性集合名称
props	String[]	属性数组
Relviews 关联视图	titlefunc	Function	关联视图标题函数
V1	String	选中集合的视图
V2	string	待选集和的视图