comboboxTree的使用

zqding

浏览: 93397 次
性别:
来自: 苏州

最近访客更多访客>>

kaiserlu

xxyyddzz

青龙之祖

hong_yx123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT JavaScript CSS json J#

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>&nbsp;</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、最终效果如下所示：