动态加载选择树

fix.jsp
//派工表单
function getAddOrgForm() {

   var addOrgForm = new Ext.FormPanel({ 
      layout : 'column',
border : false,
       bodyStyle:'padding:5px 5px 0',
iconCls:'icon-form-add',
labelAlign:'right',
       items: [
       {
          columnWidth: 1,
          layout:'column',
          border : false,        
     items:[  
        {
        columnWidth : 1,  //占100%
        layout : 'form',
        labelWidth : 100,
        border : false,
          items:{fieldLabel : '',
width : 200,
xtype : 'textfield',
name:"createId",
maxLength : 128,
xtype:'hidden'
        }
       },
         {
        columnWidth : 1,
        layout : 'form',
        labelWidth : 100,
        border : false,
        items:{
                   fieldLabel:'维修单编号',
                   width : 200,
xtype : 'textfield',
                   name:'ws_num',
                   id:"ws_num",
                maxLength : 128,
                   readOnly: true
               }
                },
                
               {
                columnWidth : 1,
layout : 'form',
border : false,
labelWidth : 100,
items : {
                   fieldLabel:cf_getRequiredItem('工种编号'),
                   xtype:"textfield",
                   name:'tow_id',
                   id:'tow_id',
                   width : 200,
                   allowBlank:false,
                   blankText:'<s:text name="com.messages.required"/>',
               xtype:"hidden"
                           }
               },
               
               {
                           columnWidth:0.85,
                           layout:'form',
                           labelWidth:100,
                           border:false,
                           items:{
                fieldLabel:cf_getRequiredItem('派工'),
                 xtype:"textarea",
                         name:'person_name',
                              id:'person_name',
                 blankText:'<s:text name="com.messages.required"/>',
                           width:200,   
                          allowBlank:false,
    readOnly:"true"
                          }
               },{
columnWidth : 0.15,
layout : 'form',
border : false,
items : {
                  xtype:'button',
    text:'派工',
    listeners: {
       click:function(){
                var url = '<iframe id="menuPopup" src ="<%= jspPath %>/fix/menu.jsp" frameBorder="0" height="100%" width="100%"></iframe>';
            var win = cf_ShowWindowDialog(url,320,420);
            win.setIconClass('grid');
      win.setTitle('派工');
       win.show();
    win.buttons[0].on('click',function() {
   
var treePanel;

if(Ext.isIE)
        treePanel = document.frames['menuPopup'].getTreePanel();
        else
        treePanel = document.getElementById('menuPopup').contentWindow.getTreePanel();
        var array;
        if(Ext.isIE)
        array = document.frames['menuPopup'].getRecordArray();
        else
        array = document.getElementById('menuPopup').contentWindow.getRecordArray();
       
      var records = filterDupFunctionRecord(array);     //注意使用到底下的方法

      if (array.length < 1 || records.length < 1) {
      Ext.MessageBox.alert('<s:text name="com.title.notice"/>', '对不起，您没有选择任何人员');
      return false;
      }
     
      console.log(records);


      var name = "";
                                                    var tow_id = "";
              for(var i = 0,len = records.length; i < len; i++) {
              //alert(records[i].get('name'));
               if(records[i].get('checked'))
               {
               if(name == "")
               {
              name=records[i].get('name');
              tow_id = records[i].get('id');
              }else
              {
               name =name + "," + records[i].get('name');
              tow_id=tow_id+ "," + records[i].get('id');
              }
       }
              }
          Ext.getCmp("person_name").setValue(name); 
             Ext.getCmp("tow_id").setValue(tow_id); 
                                                  win.close();
}
);
       }
    }
                      }
   }
  ]
               }
       ],
       buttons: [
         {
           text: '<s:text name="com.label.save"/>',
           handler: function() {
           /*
            if (addOrgForm.getForm().isValid()) { //如果验证通过
            if (isExist == true) {      //如果部门编号已经存在
            addOrgForm.getForm().findField('person_id').markInvalid('<s:text name="com.messages.org.exists"/>');
            return false;
            }    
            cf_ShowMessageBox('<s:text name="com.messages.saving"/>');
               addOrgForm.form.doAction('submit',{ //将表单数据提交到服务器
            url:'repairmanAction!insertRepairman.shtml',
            method:'post',
            success:function(form,action) {
            Ext.MessageBox.alert('<s:text name="com.title.notice"/>','<s:text name="com.messages.save.success"/>',
            function(btn) {
            if (btn == BUTTON_OK) {
        win.hide();
            roleDs.removeAll();
            root.reload();
            };
            });
            },
            failure:function() {
            Ext.MessageBox.alert('<s:text name="com.title.notice"/>','<s:text name="com.messages.save.failure"/>');
            }            
            });
            }
            */
           } 
       },{
           text: '<s:text name="com.label.reset"/>',
           handler: function() {
            //addOrgForm.getForm().findField('person_name').setValue("");


           }
       },{
           text: '<s:text name="com.label.cancel"/>',
           handler: function() {
            win.hide();
           }
       }]
   });  
   return addOrgForm;
}   




function filterDupFunctionRecord(receiveArray) { //过滤数组中的重复记录
   var arrResult = new Array();  //定义一个返回结果数组
   for (var i = 0; i < receiveArray.length; i++) {
       if (isDuplicateFunction(arrResult, receiveArray[i]) == -1) { //把不重复的记录放入新数组
           arrResult.push(receiveArray[i]);
       } else { //重复的记录取最后一个,å› ä¸ºè¦èŽ·å¾—æœ€åŽçš„é€‰é¡¹
        arrResult.removeAt(isDuplicateFunction(arrResult, receiveArray[i]));
        arrResult.insert(i,receiveArray[i]);
       }
   }
   return arrResult;
}
  
  
  
function isDuplicateFunction(receiveArray, checkItem) { //判断记录是否重复
   var index = -1;  // 函数返回值用于布尔判断
   for (var i = 0; i < receiveArray.length; i++) {
       if (receiveArray[i].get('functionId') == checkItem.get('functionId')) {
           index = i; //如果重复,返回当前index
           break;
       }
   }
   return index;
}


Ext.apply(Ext.form.VTypes, {
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : '与输入密码不匹配'
});

menu.jsp

<%@ include file="/jsp/include/doctype.jsp" %>
<%@ include file="/jsp/include/head.jsp" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title><s:text name="com.title.funcmenu"/></title>
</head>
<script type="text/javascript" src="<%= extPath %>/source/widgets/TreeCheckNodeUI.js"></script>
<script type="text/javascript">
var treePanel;
var records;
var array = new Array();
Ext.onReady(function() {  
  var dataStore = new Ext.data.Store({ //èŽ·å¾—æ ¹èŠ‚ç‚¹æ•°æ®å†…å®¹
proxy: new Ext.data.HttpProxy({
url:  'servicemanAction!getTypeOfWorkTree.shtml?parentId=' + ROOT_PARENTCODE  //全局变量，默认值为0
}),
reader: new Ext.data.JsonReader({root: 'list'},
[
{name: 'functionId'},
               {name: 'name'},                                
               {name: 'href'},
               {name: 'url'},
               {name: 'selfCode'},
               {name: 'parentCode'},
               {name: 'checked'},
               {name: 'isLeaf'}
           ]),
autoLoad:false
});
       dataStore.load();
       
  var RecordSet = Ext.data.Record.create([ //这里的id就是self code
  {name: 'id'},
    {name: 'roleId'},
    {name: 'name'},
    {name: 'functionId'},
    {name: 'checked'}
  ]);
                 
  dataStore.on('load',function(store,record,options){
  
  records = record;
  
  
  treePanel = new Ext.tree.TreePanel({
       el: 'treeList',
       border: false,
       useArrows: false, //true:ä½¿ç”¨ç®­å¤´æ˜¾ç¤ºæ ‘ç»“æž„,false:ä½¿ç”¨åž‚ç›´çº¿æ˜¾ç¤ºæ ‘ç»“æž„
       autoScroll: true,
       checkModel: 'childCascade',   //å¯¹æ ‘çš„çº§è”å¤šé€‰
       animate: true,
       enableDD: false,
       containerScroll: true, 
       lines: true,
       loader: new Ext.tree.TreeLoader({
        baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } 
       })
  });
  
  root = new Ext.tree.AsyncTreeNode({ //è®¾ç½®ç»“çš„æ ¹èŠ‚ç‚¹
       text: '<s:text name="com.messages.data.loading"/>', //从数据库中读取text后填充
       draggable: false,
       id: '<%= CommonConstant.ROOT_NODE_ID %>' //æ ¹èŠ‚ç‚¹ID
  });
  root.on('beforeload',function(){
root.setText(record[0].data.name);
  });

  treePanel.setRootNode(root); //æ·»åŠ æ ¹èŠ‚ç‚¹
  treePanel.on('beforeload', function(node){  //查找子节点   
  //alert(node.id);
  //if(records[0].data.isLeaf==1){
  //alert(node.id);
  //alert(records[0].data.isLeaf);
  treePanel.loader.dataUrl = 'servicemanAction!getJsonTowTree.shtml?parentId=' + node.id;  
  if(node.id!=100){
  treePanel.loader.dataUrl = 'servicemanAction!getJsonTowTreeByIbsUser.shtml?parentId=' + node.id;
  }
 
  });
  treePanel.on('click',function(node) { 

//alert(node.id);


node.toggle(); 
  });
  treePanel.on('check',function(node,checked) {
        var rs = new RecordSet({
        id: node.id,
        name: node.attributes.name,
        roleId: <%=request.getParameter("roleId")%>,
        functionId: node.attributes.functionId,
        checked: checked
        });
        array.push(rs);  
  });

  treePanel.render();
  root.expand();
  });        
});

function getRecordArray() {
return array;
}

function getTreePanel() {
return treePanel;
}
</script>
<body>
<div id="treeList" style="overflow:auto;width:302px;height:343px;border:0px solid #c3daf9;"></div>
</body>
</html>