posts - 39,  comments - 19,  trackbacks - 0
关键字:   Ext.form.TreeField 树形 菜单 下拉框    

最近项目中用到EXT,需要用到树形下拉框

在网上找了2个版本的EXT扩展.但都不合适,所以干脆自己来扩展一个

有什么错误,还望大家指点!

演示地址:www.moiom.cn/demo/ext/form/treeField.html

/**   
 * Ext JS Library 1.1 扩展   
 * 版本号:1.0测试版   
 * 作者:飞天色鼠   
 * 制作日期:2007年10月6日   
 * 电子邮箱:gx80@qq.com   
 * 主页:http://www.gx80.cn   
 
*/   
     
/**   
 *树形下拉框   
 
*/   
Ext.form.TreeField 
= function(config){    
    config.readOnly
=true;    
    Ext.form.TreeField.superclass.constructor.call(
this, config);    
    
this.addEvents({    
        'select' : 
true   
        ,'expand' : 
true   
        ,'collapse' : 
true   
        ,'beforeselect':
true   
    });    
}    
   
Ext.extend(Ext.form.TreeField, Ext.form.TriggerField, {    
    hiddenName: undefined    
    ,displayField : 'text'    
    ,displayValue : undefined    
    ,valueField: 'id'    
    ,listAlign: 'tl
-bl?'    
    ,shadow:'sides'    
    ,listClass: ''   
    ,url:'http:
//www.gx80.cn/ajax/data/json/tree.do'    
    ,rootText :'根节点'    
    ,rootId:'
-1'    
    ,setValue : 
function(node){    
        
var text = node[this.displayField];    
        
var value = node[this.valueField];    
        
if(this.hiddenField){    
            
this.hiddenField.value = value;    
        }    
        Ext.form.TreeField.superclass.setValue.call(
this, text);    
        
this.value = value;    
    }    
    ,getValue : 
function(){    
        
if(this.valueField){    
            
return typeof this.value != 'undefined' ? this.value : '';    
        }
else{    
            
return Ext.form.TreeField.superclass.getValue.call(this);    
        }    
    }    
    ,onSelect:
function(node){    
        
if(this.fireEvent('beforeselect', node, this)!= false){    
            
this.setValue(node);    
            
this.collapse();    
            
this.fireEvent('select', this, node);    
        }    
    }    
    ,createTree:
function(el){    
        
var tree = new Ext.tree.TreePanel(el,{    
            animate:
true,    
            enableDD:
true,    
            containerScroll: 
true,     
            loader: 
new Ext.tree.TreeLoader({    
                dataUrl:
this.url    
            })    
        });    
        
var root = new Ext.tree.AsyncTreeNode({    
            text: 
this.rootText,    
            draggable:
false,    
            id:
this.rootId    
        });    
        tree.setRootNode(root);    
        tree.render();    
        
return tree;    
    }    
    ,onRender : 
function(ct, position){    
        
var value = this.value;    
        Ext.form.TreeField.superclass.onRender.call(
this, ct, position);    
        
this.value = value;    
        
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');    
        }    
        
var cls = 'x-combo-list';    
        
this.list = new Ext.Layer({    
            shadow: 
this.shadow, cls: [cls, this.listClass].join(' '), constrain:false   
        });    
        
this.list.swallowEvent('mousewheel');    
        
this.innerList = this.list.createChild({cls:cls+'-inner'});    
        
var tree = this.createTree(this.innerList);    
        
var treeField = this;    
        tree.on('click',
function(node,e){    
            treeField.onSelect(node);    
        });    
        
this.tree = tree;    
        
var _id = this.value ? this.value : '';    
        
var _text = this.displayValue ? this.displayValue : '';    
        
var node = {id:_id,text:_text};    
        
this.setValue(node);    
    }    
    ,onDestroy : 
function(){    
        
if(this.list){    
            
this.list.destroy();    
        }    
        Ext.form.TreeField.superclass.onDestroy.call(
this);    
    }    
    ,isExpanded : 
function(){    
        
return this.list.isVisible();    
    }    
    ,collapse : 
function(){    
        
if(!this.isExpanded()){    
            
return;    
        }    
        
this.list.hide();    
        Ext.get(document).un('mousedown', 
this.collapseIf, this);    
        Ext.get(document).un('mousewheel', 
this.collapseIf, this);    
        
this.fireEvent('collapse', this);    
    }    
    ,collapseIf : 
function(e){    
        
if(!e.within(this.wrap) && !e.within(this.list)){    
            
this.collapse();    
        }    
    }    
    ,expand : 
function(){    
        
if(this.isExpanded()){    
            
return;    
        }    
        
this.list.alignTo(this.el, this.listAlign);    
        
this.list.show();    
        Ext.get(document).on('mousedown', 
this.collapseIf, this);    
        Ext.get(document).on('mousewheel', 
this.collapseIf, this);    
        
this.fireEvent('expand', this);    
    }    
    ,onTriggerClick : 
function(){    
        
if(this.disabled){    
            
return;    
        }    
        
if(this.isExpanded()){    
            
this.collapse();    
        }
else {    
            
this.expand();    
        }    
        
this.el.focus();    
    }    
});   

留着以后备用,这是Ext1.1的扩展,要用到2.0还得修改一下。

 

posted on 2007-12-06 10:35 阿门119 阅读(2804) 评论(1)  编辑 收藏 引用 网摘 所属分类: Ext

只有注册用户登录后才能发表评论。
网站导航: