[Struts2+Spring2.5+Hibernate3(JPA)+ExtJS3基本后臺(tái) 將ExtJS替換為3..2版本后發(fā)現(xiàn)下拉數(shù)有些異常：之前展開下來樹的下級(jí)節(jié)點(diǎn)時(shí)，下拉菜單不會(huì)關(guān)掉。但是在3.2版本中無論

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

ztree果然不錯(cuò)，簡(jiǎn)單好用，而且相當(dāng)?shù)膹?qiáng)大。先看看我把ztree引入Extjs4.2中的幾個(gè)場(chǎng)景：

角色權(quán)限分配：

下拉組件群，還帶搜索功能，風(fēng)格與extjs無縫對(duì)接

表單多選：

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

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

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("本次請(qǐng)求共耗時(shí)："+(date2-date1)+" 毫秒")? ? ?一、面板出現(xiàn)后，綁定下拉框方法。

二、 表單里的內(nèi)容，和普通的表單一樣，一個(gè)隱藏值存key，一個(gè)存value

{

name:'company.companyPolitics',

id:'companyPolitics',

hidden:true,

fieldLabel: '*單位所在政區(qū)key'

}, {

name:'null',

id:'companyPoliticsLab',

vtype:'isnotNull',

fieldLabel: '*單位所在政區(qū)'

}

三、封裝的方法：

/**

*

* @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);

// 轉(zhuǎn)成jquery對(duì)象

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練

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。