ExtJS4 自定义 TreeComboBox
今天在弄这个自定义TreeComboBox的时候走了不少弯路,在"Ext技术交流群"的网友"java-青岛-小花园"指教下才修改好,十分感谢.
为了使自己印象深刻,特把结果发到这里来存档,以后随时看一下.
问题分析
最早代码如下,实例化一次倒也没有什么问题,实例化多次后就出问题了
Ext.define('keel.TreeComboBox',{
extend : 'Ext.form.field.ComboBox',
treeObj : new Ext.tree.Panel({.....})//关键处
});
解决问题
在网友"java-青岛-小花园"提示后,修改如下,主要是把new Ext.tree.Panel放到了initComponent里面
Ext.define('keel.TreeComboBox',{
extend : 'Ext.form.field.ComboBox',
treeObj : null,//修改处
initComponent : function(){
this.treeObj=new Ext.tree.Panel({.....});//修改处
});
});
最后运行效果
完整代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TreeComboBox</title>
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" charset="utf-8" src="ext4/ext-all.js"></script>
<script language="JavaScript" type="text/javascript">
Ext.require(['*']);
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
//自定义下拉树
Ext.define('keel.TreeComboBox',{
extend : 'Ext.form.field.ComboBox',
alias: 'widget.keeltreecombo',
store : {fields:[],data:[[]]},
editable : false,
allowBlank:false,
listConfig : {resizable:false,minWidth:200,maxWidth:450},
_idValue : null,
_txtValue : null,
callback : Ext.emptyFn,
treeObj : null,
initComponent : function(){
this.treeObj=new Ext.tree.Panel({
border : false,
autoScroll : true,
rootVisible: false,
renderTo:this.treeRenderId,
root: {text: 'root',draggable: false,expanded: true,
children:[{ text:'一级节点',expanded: true,
children:[{ text:'二级节点1',leaf:true},{ text:'二级节点2',leaf:true}]}
]}
});
this.treeRenderId = Ext.id();
this.tpl = "<tpl><div id='"+this.treeRenderId+"'></div></tpl>";
this.callParent(arguments);
this.on({
'expand' : function(){
if(!this.treeObj.rendered&&this.treeObj&&!this.readOnly){
Ext.defer(function(){
this.treeObj.render(this.treeRenderId);
},100,this);
}
}
});
this.treeObj.on('itemclick',function(view,rec){
if(rec){
this.setValue(this._txtValue = rec.get('text'));
this.collapse();//关闭tree
}
},this);
},
});
//实例化下拉树
var xltree1=new keel.TreeComboBox({
fieldLabel : '下拉树1',
name:'xltree1111',
allowBlank:true
});
var xltree2=new keel.TreeComboBox({
fieldLabel : '下拉树2',
name:'xltree2222',
allowBlank:true
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 500,
bodyPadding: 10,
title: 'TreeComboBox',
items: [xltree1, xltree2]
});
</script>
</body>
</html>