TreeComboField.js 代码：
Ext.namespace(“Ext.tet”);
Ext.tet.TreeComboField = Ext.extend(Ext.form.TriggerField, {
valueField : “Id”,
displayField : “Name”,
haveShow : false,
editable : false,
on
TriggerClick : function() {
if (!this.tree.rendered) {
this.treeId = Ext.id();
var panel = document.createElement(‘div’);
panel.style.backgroundColor=’#ffffff’;
panel.id = this.treeId;
this.getEl().dom.parentNode.appendChild(panel);
this.tree.render(this.treeId);
this.tree.setWidth(this.width);
this.tree.getEl().alignTo(this.getEl(), “tl-bl”);
}
this.tree.show();
},
initComponent : function() {
Ext.tet.TreeComboField.superclass.initComponent.call(this);
},
on
Render : function(ct, position) {
Ext.tet.TreeComboField.superclass.on
Render.call(this, ct, position);
this.tree.on(“click”, this.choice, this);
//this.tree.on(“dblclick”,function(){this.tree.hide();},this);
if (this.hiddenName) {
this.hiddenField = this.el.insertSibling({
tag : ‘input’,
type : ‘hidden’,
name : this.hiddenName,
id : (this.hiddenId || this.hiddenName)
}, ‘before’, true);
this.hiddenField.value = this.hiddenValue !== undefined ? this.hiddenValue : this.value !== undefined ? this.value : ”;
this.el.dom.removeAttribute(‘name’);
}
if (!this.editable) {
this.editable = true;
this.setEditable(false);
}
},
getValue : function() {
return typeof this.value != ‘undefined’ ? this.value : ”;
},
clearValue : function() {
if (this.hiddenField) {
this.hiddenField.value = ”;
}
this.setRawValue(”);
this.lastSelectionText = ”;
this.applyEmptyText();
},
readPropertyValue : function(obj, p) {
var v = null;
for (var o in obj) {
if (o == p)
v = obj[o];
}
return v;
},
setValue : function(obj) {
if (!obj) {
this.clearValue();
return;
}
var v = obj;
var text = v;
var value = this.valueField || this.displayField;
if (typeof v == “object” && this.readPropertyValue(obj, value)) {
text = obj[this.displayField || this.valueField];
v = obj[value];
}
var node = this.tree.getNodeById(v);
if (node) {
text = node.text;
} else if (this.valueNotFoundText !== undefined) {
text = this.valueNotFoundText;
}
this.lastSelectionText = text;
if (this.hiddenField) {
this.hiddenField.value = v;
}
Ext.tet.TreeComboField.superclass.setValue.call(this, text);
this.value = v;
},
setEditable : function(value) {
if (value == this.editable) {
return;
}
this.editable = value;
if (!value) {
this.el.dom.setAttribute(‘readOnly’, true);
this.el.on(‘mousedown’, this.on
TriggerClick, this);
this.el.addClass(‘x-combo-noedit’);
} else {
this.el.dom.setAttribute(‘readOnly’, false);
this.el.un(‘mousedown’, this.on
TriggerClick, this);
this.el.removeClass(‘x-combo-noedit’);
}
},
choice : function(node, eventObject) {
if (node.id != “root”)
this.setValue(node.id);
else
this.clearValue();
this.tree.hide();
},
on
Destroy : function() {
if (this.tree.rendered) {
this.tree.getEl().remove();
}
Ext.tet.TreeComboField.superclass.on
Destroy.call(this);
}
});
Ext.reg(‘treecombo’, Ext.tet.TreeComboField);
调用代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
“>
<html xmlns=”
http://www.w3.org/1999/xhtml
” >
<head>
<title>无标题页</title>
<link rel=”stylesheet” type=”text/css” href=”../../Client/Ext/resources/css/ext-all.css” />
<script type=”text/javas
cript” src=”../../Client/Ext/adapter/ext/ext-base.js”></script>
<script type=”text/javas
cript” src=”../../Client/Ext/ext-all.js”></script>
<script type=”text/javas
cript” src=”TreeComboField.js”></script>
</head>
<script>
Ext.on
Ready(function(){
Ext.BLANK_IMAGE_URL=”../../Client/Images/s.gif”;
Ext.QuickTips.init();
var tree = new Ext.tree.TreePanel({
});
var root = new Ext.tree.TreeNode({text:’我是根’});
var node1 = new Ext.tree.TreeNode({text:’我是根的第一个枝子’});
var node2 = new Ext.tree.TreeNode({text:’我是根的第一个枝子的第一个叶子’});
var node3 = new Ext.tree.TreeNode({text:’我是根的第一个叶子’});
node1.appendChild(node2);
root.appendChild(node1);
root.appendChild(node3);
tree.setRootNode(root);
var treeCombox = new Ext.tet.TreeComboField({fieldLabel:”请选择”,anchor:”97%”,tree:tree});
new Ext.form.FormPanel({
title:”测试”,
frame: true,
width:400,
items:[treeCombox],
buttons:[{text:”test”,handler:function(){
}
}],
renderTo: ‘form’
});
});
</script>
<body bgcolor=white>
<div id=”form” style=”margin:20px;”></div>
</body>
</html>