[Struts2+Spring2.5+Hibernate3(JPA)+ExtJS3基本后臺 將ExtJS替換為3..2版本后發現下拉數有些異常：之前展開下來樹的下級節點時，下拉菜單不會關掉。但是在3.2版本中無論

2年的工作中，下拉樹用的地方實在太多了，選區域、還有角色權限分配，都離不開下拉樹。也嘗試過不少框架的下拉樹，jqueryeasyui、extjs等原裝的下拉樹復雜不說，而且不夠強大。于是嘗試第三方下拉樹組件，

ztree果然不錯，簡單好用，而且相當的強大。先看看我把ztree引入Extjs4.2中的幾個場景：

角色權限分配：

下拉組件群，還帶搜索功能，風格與extjs無縫對接

表單多選：

下面說說在form表單中使用的方法[? /** * @class Ext.app.AdSiteGrid * @extends Ext.grid.GridPanel * 內容項Add */ Ext.define('ctiWsSort', { extend: 'Ext.data.Model', fields: [

使用起來也很方便，而且渲染速度很快，幾乎不耗時，只要在面板彈出時，綁定事件即可

var date1 = new Date().getTime()

windowSelect("institutionType",'SB_DICTIONARIES','INST');

windowSelect("companyType",'SB_DICTIONARIES','COMT');

windowSelect("department",'SB_DICTIONARIES','DEPX');

windowSelect("accordingManage",'SB_DICTIONARIES','ACMX');

windowSelect("politicsType",'SB_DICTIONARIES','POLT');

windowSelect("companyPolitics",'SB_DICTIONARIES','SBPL');

windowSelect("shegangcategory",'SB_DICTIONARIES','SHEG');

windowSelect("institution",'SB_DICTIONARIES','INSX');

windowSelect("institutionNature",'SB_DICTIONARIES','INSN');

windowSelect("companyNature",'SB_DICTIONARIES','COMN');

windowSelect("classType",'SB_DICTIONARIES','CLAX');

windowSelect("companyGrade",'SB_DICTIONARIES','GRAX');

windowSelect("registerType",'SB_DICTIONARIES','REGT');

windowSelect("companyBolPolitics",'SB_DICTIONARIES','CBPL');

windowSelect("industrycomments",'SB_DICTIONARIES','INDU');

windowSelect("sshy",'SB_DICTIONARIES','SSHY',true);

windowSelect("gytype",'SB_DICTIONARIES','GYLX');

var date2 = new Date().getTime()

console.log("本次請求共耗時："+(date2-date1)+" 毫秒")? ? ?一、面板出現后，綁定下拉框方法。

二、 表單里的內容，和普通的表單一樣，一個隱藏值存key，一個存value

{

name:'company.companyPolitics',

id:'companyPolitics',

hidden:true,

fieldLabel: '*單位所在政區key'

}, {

name:'null',

id:'companyPoliticsLab',

vtype:'isnotNull',

fieldLabel: '*單位所在政區'

}

三、封裝的方法：

/**

*

* @param str

* @param table

* @param label

*/

function windowSelect(str,table,label,beClick,check){

var kv_id = str+"-inputEl";//

var v_id = str+"Lab-inputEl";//

var obj = $("#"+v_id)

var kobj = $("#"+kv_id)

/**

* 初始化綁定方法

*/

$.select.init(v_id,kv_id,table,label,beClick,check);

// 轉成jquery對象

var $obj = $('

')

$("#"+v_id).parent().after($obj);

$obj.click(function(){

$.select.show(v_id,kv_id,table,label,"",beClick,check)

})

};

其中 ? $.select ?即為自己寫的方法，稍后傳上來。

[界面：　　MyWindowUi = Ext.extend(Ext.Window, { height : 150, width : 310, layout : 'column', title : '2011/10/20練

總結

以上是生活随笔為你收集整理的extjs tree下拉列表_使用ztree来代替Extjs的下拉树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。