快捷導(dǎo)航

Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹效果(自寫)

更新時(shí)間：2013年05月28日 16:44:29 投稿：whsnow

最近涉及到的一個(gè)項(xiàng)目中，需要實(shí)現(xiàn)ComboBoxTree的效果，由于在Extjs中是沒有這種效果，所以看看別人的資料自己寫了一個(gè)，感興趣的朋友可以參考下哈

最近涉及到的一個(gè)項(xiàng)目中，需要實(shí)現(xiàn)ComboBoxTree的效果，首先，看看效果吧……
在Extjs中是沒有這種效果的，所以得自己寫，在網(wǎng)絡(luò)上看了看別人的資料，自己再總結(jié)了一下，修改了一下，代碼如下：

復(fù)制代碼代碼如下:

Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {
constructor: function (cfg) {
cfg = cfg || {};
Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({
maxHeight: 300,
editable: false,
mode: 'local',
triggerAction: 'all',
rootVisible: false,
selectMode: 'all'
}, cfg));
},
store: new Ext.data.SimpleStore({
fields: [],
data: [[]]
}),
// 重寫onViewClick，使展開樹結(jié)點(diǎn)是不關(guān)閉下拉框
onViewClick: function (doFocus) {
var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
if (r) {
this.onSelect(r, index);
}
if (doFocus !== false) {
this.el.focus();
}
},
tree: null,
// 隱藏值
hiddenValue: null,
getHiddenValue: function () {
return this.hiddenValue;
},
getValue: function () { //增加適用性，與原來(lái)combo組件一樣
return this.hiddenValue;
},
setHiddenValue: function (code, dispText) {
this.setValue(code);
Ext.form.ComboBox.superclass.setValue.call(this, dispText);
this.hiddenValue = code;
},
initComponent: function () {
var _this = this;
var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId
this.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>"
this.tree = new Ext.tree.TreePanel({
border: false,
enableDD: false,
enableDrag: false,
rootVisible: _this.rootVisible || false,
autoScroll: true,
trackMouseOver: true,
height: _this.maxHeight,
lines: true,
singleExpand: true,
root: new Ext.tree.AsyncTreeNode({
id: _this.rootId,
text: _this.rootText,
iconCls: 'ico-root',
expanded: true,
leaf: false,
border: false,
draggable: false,
singleClickExpand: false,
hide: true
}),
loader: new Ext.tree.TreeLoader({
nodeParameter: 'ID',
requestMethod: 'GET',
dataUrl: _this.url
})
});
this.tree.on('click', function (node) {
if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {
if (_this.fireEvent('beforeselect', _this, node)) {
_this.fireEvent('select', _this, node);
}
}
});
this.on('select', function (obj, node) {
var dispText = node.text;
var code = node.id;
obj.setHiddenValue(code, dispText);
obj.collapse();
});
this.on('expand', function () {
this.tree.render(tplRandomId);
});
Ext.ux.TreeCombo.superclass.initComponent.call(this);
}
})
Ext.reg("treecombo", Ext.ux.TreeCombo);

之后呢，在主頁(yè)中添加Extjs類庫(kù)

復(fù)制代碼代碼如下:

<link href="../ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../ext/ext-all.js" type="text/javascript"></script>
<script src="../ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<script src="../ext/ComboBoxTree.js" type="text/javascript"></script>
<script src="login.js" type="text/javascript"></script>

其中，login.js的代碼如下：

復(fù)制代碼代碼如下:

/* File Created: 五月 27, 2013 */
Ext.onReady(function () {
var _window = new Ext.Window({
title: "查詢條件",
renderTo: Ext.getBody(),
frame: true,
plain: true,
buttonAlign: "center",
closeAction: "hide",
maximizable: true,
closable: true,
bodyStyle: "padding:20px",
width: 350,
height: 300,
layout: "form",
lableWidth: 110,
defaults: { xtype: "textfield", width: 180 },