ExtJS4 自定义 TreeComboBox

最新推荐文章于 2020-12-31 13:10:59 发布

邓学彬

最新推荐文章于 2020-12-31 13:10:59 发布

阅读量6.4k

点赞数 1

分类专栏： HTML/WEB ExtJS 文章标签： extjs function stylesheet javascript null xhtml

本文链接：https://blog.csdn.net/cometnet/article/details/7569247

版权

HTML/WEB 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

ExtJS

1 篇文章 0 订阅

订阅专栏

今天在弄这个自定义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>

邓学彬

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
ExtJS4 自定义 TreeComboBox

今天在弄这个自定义TreeComboBox的时候走了不少弯路,在"Ext技术交流群"的网友"java-青岛-小花园"指教下才修改好,十分感谢.为了使自己印象深刻,特把结果发到这里来存档,以后随时看一下.问题分析最早代码如下,实例化一次倒也没有什么问题,实例化多次后就出问题了Ext.define('keel.TreeComboBox',{ extend : 'Ext.form.f
复制链接

扫一扫