comboboxTree的使用:
由于系统中的下拉机构树及专栏模块树的内容太多,下拉框会拉的好长,客户要求可以把它们折叠起来。所以就在网上看到了Ext的comboboxTree下拉树。下面简单介绍一下它的使用。
1、首先在页面引入Ext及ComboBoxTree的定义和CSS样式:
<link rel="stylesheet" type="text/css" href="/commonExt/page/ext-2.2.1/resources/css/ext-all.css" />
<script language="javascript" type="text/javascript" src="/InfoIssue/page/jscripts/ext.js"></script>
<script language="javascript" type="text/javascript" src="/commonExt/page/ext-2.2.1/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="/commonExt/page/ext-2.2.1/ComboBoxTree.js"></script>
2、ComboBoxTree.js内容如下:
/** * Ext下拉树定义 * 2010-05-13 */ Ext.ux.ComboBoxTree = function(){ this.treeId = Ext.id()+'-tree'; this.maxHeight = arguments[0].maxHeight || arguments[0].height || this.maxHeight; this.tpl = new Ext.Template('<tpl for="."><div style="height:'+this.maxHeight+'px"><div id="'+this.treeId+'"></div></div></tpl>'); this.store = new Ext.data.SimpleStore({fields:[],data:[[]]}); this.selectedClass = ''; this.mode = 'local'; this.triggerAction = 'all'; this.onSelect = Ext.emptyFn; this.editable = false; this.emptyText = '请选择...', //all:所有结点都可选中 //exceptRoot:除根结点,其它结点都可选 //folder:只有目录(非叶子和非根结点)可选 //leaf:只有叶子结点可选 this.selectNodeModel = arguments[0].selectNodeModel || 'exceptRoot'; Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments); } Ext.extend(Ext.ux.ComboBoxTree,Ext.form.ComboBox, { expand : function(){ Ext.ux.ComboBoxTree.superclass.expand.call(this); if(!this.tree.rendered){ this.tree.height = this.maxHeight; this.tree.border=false; this.tree.autoScroll=true; if(this.tree.xtype){ this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype); } this.tree.render(this.treeId); var combox = this; this.tree.on('click',function(node){ var isRoot = (node == combox.tree.getRootNode()); var selModel = combox.selectNodeModel; var isLeaf = node.isLeaf(); if(isRoot && selModel != 'all'){ return; }else if(selModel=='folder' && isLeaf){ return; }else if(selModel=='leaf' && !isLeaf){ return; } combox.setValue(node); combox.collapse(); }); var root = this.tree.getRootNode(); if(!root.isLoaded()) root.reload(); } }, setValue : function(node){ var text = node.text; this.lastSelectionText = text; if(this.hiddenField){ this.hiddenField.value = node.id; } Ext.form.ComboBox.superclass.setValue.call(this, text); this.value = node.id; }, getValue : function(){ return typeof this.value != 'undefined' ? this.value : ''; }, clearValue : function() { if (this.passField) { this.passField.value = ''; } this.setRawValue(''); } }); Ext.reg('combotree', Ext.ux.ComboBoxTree);
3、在页面加入comboBoxTree的引用:
<%@ page language="java" contentType="text/html; charset=GB2312"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing ComboBoxTree</title>
<link rel="stylesheet" type="text/css" href="/commonExt/page/ext-2.2.1/resources/css/ext-all.css" />
<script language="javascript" type="text/javascript" src="/InfoIssue/page/jscripts/ext.js"></script>
<script language="javascript" type="text/javascript" src="/commonExt/page/ext-2.2.1/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="/commonExt/page/ext-2.2.1/ComboBoxTree.js"></script>
<script type="text/javascript">
var comboBoxTree;
Ext.BLANK_IMAGE_URL = '/commonExt/page/ext-2.2.1/resources/images/default/s.gif';
Ext.onReady(function(){
comboBoxTree = new Ext.ux.ComboBoxTree({
renderTo : 'comboBoxTree',
width : 350,
tree : {
xtype:'treepanel',
loader: new Ext.tree.TreeLoader({dataUrl:'ctbTestFlow.pr.prGetJsonData.do'}),
root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'})
},
//all:所有结点都可选中
//exceptRoot:除根结点,其它结点都可选(默认)
//folder:只有目录(非叶子和非根结点)可选
//leaf:只有叶子结点可选
selectNodeModel:'exceptRoot'
});
});
function showValue(){
alert(comboBoxTree.getValue());
}
</script>
</head>
<body>
<table>
<tr>
<td> </td>
<td> <div id="comboBoxTree"></div> </td>
</tr>
</table>
</body>
</html>
4、写一个构件把相应的数据转换成Json对象:
package com.starit.utils;
import org.w3c.dom.*;
import com.primeton.business.bncommon.bizlet.util.BNXmlUtil;
import com.primeton.tp.core.api.BizContext;
/**
* @author zqding
* @version 1.0
* @date 2010-5-12
* @class_displayName ConvertJsonData
*
*/
public class ConvertJsonData {
/**
* 转换的形式为[{......},{......},{......}.....]
* @param doc type: Document, DOM;
* @param param type: BizContext;
* @return: int ,运算逻辑返回值,如果失败返回0,成功返回1
* @throws Exception
* <p>
* ** bizlet 的显示名称 **
* @bizlet_displayName ConvertJson
* @bizlet_param passing="in" type="EOSEntityList" value="list" name="" desc=""
* @bizlet_param passing="in_out" type="field" value="str" name="" desc=""
*/
public static int GetJsonData(Document doc, BizContext param)
throws Exception {
Node node = (Node) param.getParaObjectAt(0);
Node str = (Node) param.getParaObjectAt(1);
StringBuffer strBuffer = new StringBuffer("[");
NodeList entityNodeList = node.getChildNodes();
for(int i=0; i<entityNodeList.getLength();i++) {
Node entityNode = entityNodeList.item(i);
NodeList fieldNodeList = entityNode.getChildNodes();
strBuffer.append("{");
boolean flag_1 = true;
for(int j=0;j<fieldNodeList.getLength();j++) {
Node fieldNode = fieldNodeList.item(j);
if(!flag_1) {
strBuffer.append(", ");
} else {
flag_1 = false;
}
strBuffer.append(fieldNode.getNodeName()+" : \""+fieldNode.getFirstChild()+"\"");
}
strBuffer.append("}");
if(i!=(entityNodeList.getLength()-1))
{
strBuffer.append(", ");
}
}
strBuffer.append("]");
BNXmlUtil.setNodeValue(str, new String(strBuffer));
return 1;
}
}
5、把转换成的Json对象作为comboboxTree的数据out出去:
<%@include file="/internet/common.jsp"%>
<%@ page import="com.primeton.tp.core.prservice.context.RequestContext"%>
<%
try {
RequestContext requestContext = (RequestContext) request.getAttribute(RequestContext.REQUEST_REQUEST_CONTEXT);
String jsonData = requestContext.getProperty("str"); //根据xPath获取相应的节点的值。
StringBuffer jsonDataBuffer = new StringBuffer(jsonData);
out.print(jsonDataBuffer);
System.out.println(jsonDataBuffer);
out.flush();
//out.close();
} catch (Exception e) {
e.printStackTrace();
}
%>
6、最终效果如下所示: