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、最终效果如下所示:
1 楼
天空之城
2011-03-18
请问要是执行修改操作的时候,如何动态的默认显示?