Question

extjs如何让下拉列表展开?

Answer 1

extjs中直接显示展开的下拉列表：

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，使展开树结点是不关闭下拉框
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;
},
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,
leaf : false,
border : false,
draggable : false,
singleClickExpand : false,
hide : true
}),
loader : new Ext.tree.TreeLoader({
dataUrl : _this.url
})
});
this.tree.on('click', function(node) {
if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {
// if (node.parentNode && node.parentNode.attributes.id != '000000') {
var dispText = node.text;
var code = node.id;
while (node.parentNode && node.parentNode.attributes.id != '000000') {
if (node.parentNode.text != dispText) {
dispText = node.parentNode.text + dispText;
}
node = node.parentNode;
}
_this.setHiddenValue(code, dispText);
_this.collapse();
}
});
this.on('expand', function() {
this.tree.render(tplRandomId);
});
Ext.ux.TreeCombo.superclass.initComponent.call(this);
}
})
Ext.reg("treecombo", Ext.ux.TreeCombo);

只要设置singleExpand : true, 即可！

Answer 2

Ext.getCmp("").expand() ;//传入要展开的下拉列表框id

追问

哦，谢谢