关键字:
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