接上篇（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 |
待选集和的视图 |
|
|
|
|
|
|