ext-2.0扩展树形下拉框(代码及演示)

转自: http://www.iteye.com/topic/148441

演示地址：www.gx80.cn/example/ext-2.0/form/treeField.html

原代码：

js 代码

 /**
 *ExtJSLibrary2.0extend
 *Version:1.0
 *Author:飞天色鼠
 *Date:2007-12-13
 *E-mail:[email protected]
 *HomePage:http://www.gx80.cn
 */

 /**
 *TreeField
 */
 Ext.form.TreeField=Ext.extend(Ext.form.TriggerField,{
 readOnly:true,
 defaultAutoCreate:{tag:"input",type:"text",size:"24",autocomplete:"off"},
 displayField:'text',
 valueField:undefined,
 hiddenName:undefined,
 listWidth:undefined,
 minListWidth:50,
 layerHeight:undefined,
 minLayerHeight:60,
 dataUrl:undefined,
 tree:undefined,
 value:undefined,
 baseParams:{},
 treeRootConfig:{
 id:'',
 text:'pleaseselect...',
 draggable:false
 },
 initComponent:function(){
 Ext.form.TreeField.superclass.initComponent.call(this);
 this.addEvents(
 'select',
 'expand',
 'collapse',
 'beforeselect'
 );

 if(this.transform){
 this.allowDomMove=false;
 vars=Ext.getDom(this.transform);
 if(!this.hiddenName){
 this.hiddenName=s.name;
 }

 s.name=Ext.id();
 if(!this.lazyRender){
 this.target=true;
 this.el=Ext.DomHelper.insertBefore(s,this.autoCreate||this.defaultAutoCreate);
 Ext.removeNode(s);
 this.render(this.el.parentNode);
 }else{
 Ext.removeNode(s);
 }

 }
 },
 onRender:function(ct,position){
 Ext.form.TreeField.superclass.onRender.call(this,ct,position);
 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(Ext.isGecko){
 this.el.dom.setAttribute('autocomplete','off');
 }

 this.initList();
 },
 initList:function(){
 if(!this.list){
 varcls='x-treefield-list';

 this.list=newExt.Layer({
 shadow:this.shadow,cls:[cls,this.listClass].join(''),constrain:false
 });

 varlw=this.listWidth||Math.max(this.wrap.getWidth(),this.minListWidth);
 this.list.setWidth(lw);
 this.list.swallowEvent('mousewheel');

 this.innerList=this.list.createChild({cls:cls+'-inner'});
 this.innerList.setWidth(lw-this.list.getFrameWidth('lr'));
 this.innerList.setHeight(this.layerHeight||this.minLayerHeight);
 if(!this.tree){
 this.tree=this.createTree(this.innerList);
 }
 vartreeField=this;
 this.tree.on('click',function(node,e){
 treeField.onSelect(node);
 });
 this.tree.render();
 }
 },
 onSelect:function(node){
 if(this.fireEvent('beforeselect',node,this)!=false){
 this.setValue(node);
 this.collapse();
 this.fireEvent('select',this,node);
 }
 },
 createTree:function(el){
 varTree=Ext.tree;

 vartree=newTree.TreePanel({
 el:el,
 autoScroll:true,
 animate:true,
 containerScroll:true,
 loader:newTree.TreeLoader({
 dataUrl:this.dataUrl,
 baseParams:this.baseParams
 })
 });

 varroot=newTree.AsyncTreeNode(this.treeRootConfig);
 tree.setRootNode(root);
 returntree;
 },
 getValue:function(){
 if(this.valueField){
 returntypeofthis.value!='undefined'?this.value:'';
 }else{
 returnExt.form.TreeField.superclass.getValue.call(this);
 }
 },
 setValue:function(node){
 vartext=node[this.displayField];
 varvalue=node[this.valueField||this.displayField];
 if(this.hiddenField){
 this.hiddenField.value=value;
 }
 Ext.form.TreeField.superclass.setValue.call(this,text);
 this.value=value;
 },
 onDestroy:function(){
 if(this.list){
 this.list.destroy();
 }
 Ext.form.TreeField.superclass.onDestroy.call(this);
 },
 collapseIf:function(e){
 if(!e.within(this.wrap)&&!e.within(this.list)){
 this.collapse();
 }
 },
 expand:function(){
 if(this.isExpanded()||!this.hasFocus){
 return;
 }
 this.list.alignTo(this.wrap,this.listAlign);
 this.list.show();
 Ext.getDoc().on('mousewheel',this.collapseIf,this);
 Ext.getDoc().on('mousedown',this.collapseIf,this);
 this.fireEvent('expand',this);
 },
 collapse:function(){
 if(!this.isExpanded()){
 return;
 }
 this.list.hide();
 Ext.getDoc().un('mousewheel',this.collapseIf,this);
 Ext.getDoc().un('mousedown',this.collapseIf,this);
 this.fireEvent('collapse',this);
 },
 isExpanded:function(){
 returnthis.list&&this.list.isVisible();
 },
 onTriggerClick:function(){
 if(this.disabled){
 return;
 }
 if(this.isExpanded()){
 this.collapse();
 }else{
 this.onFocus({});
 this.expand();
 }
 this.el.focus();
 }

 });
Ext.reg('treefield',Ext.form.TreeField);