Java Blog for Alex Wan

Let life be beautiful like summer flowers and death like autumn leaves.

统计

留言簿(10)

BlogJava

Blogs

DIV+CSS

JQuery相关

友情链接

常去的地方

数据供应

阅读排行榜

评论排行榜

[Extjs]基于Ext2.0的树状选择框(TreeComboBox)

背景:有一些时候我们处理的数据本身就是树状的结构,当我们需要在从这些数据中做选择的时候,希望出来的数据也是树状,以方便在逻辑上区分.
实现方法:扩展和树相关的类,使得他们可以用于选择.
实现代码:
Ext.ux.OptionTreeNode
Ext.ux.OptionTreeNode=function(attributes)
{
    
    Ext.ux.OptionTreeNode.superclass.constructor.call(
this,attributes);
    
this.value=attributes.value||'';
    
this.proirity=attributes.proirity||'';
}
;
Ext.extend(Ext.ux.OptionTreeNode ,Ext.tree.TreeNode, 
{
}
);

Ext.ux.AsyncOptionTreeNode
Ext.ux.AsyncOptionTreeNode=function(attributes)
{
    
    Ext.ux.AsyncOptionTreeNode.superclass.constructor.call(
this,attributes);
    
this.value=attributes.value||'';
    
this.proirity=attributes.proirity||'';
}
;
Ext.extend(Ext.ux.AsyncOptionTreeNode ,Ext.tree.AsyncTreeNode, 
{
}
);

Ext.ux.OptionTreeLoader
Ext.ux.OptionTreeLoader = function(config) {
    Ext.ux.OptionTreeLoader.superclass.constructor.call(
this, config);
}
;

Ext.extend(Ext.ux.OptionTreeLoader, Ext.tree.TreeLoader, 
{
    createNode : 
function(attr){
        Ext.apply(attr, 
this.baseAttr || {});
        
if(typeof attr.uiProvider == 'string'){
            attr.uiProvider 
= this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
        }


        
return(attr.leaf ?
            
new Ext.ux.OptionTreeNode(attr) :
                
new Ext.ux.AsyncOptionTreeNode(attr));
    }

}
);

Ext.ux.TreeComboBox
Ext.ux.TreeComboBox=function(config)
{
    
var treeId=config.hiddenName + '-tree'+Ext.id();
    
var treeConfig = Ext.apply({}{
            border:
false,
            id:treeId
        }
{
        loader: 
new Ext.ux.OptionTreeLoader({dataUrl:'tree/optionNodes.html'}),
        border:
false,
         root:
new Ext.ux.AsyncOptionTreeNode({text: '根节点',id:'0',value:''})}

    );
    
this.tree=new Ext.tree.TreePanel(treeConfig);
    
//this.hiddenField=new Ext.form.Hidden({name:config.valueName});
    var _combobox=this;
    
var _tree=this.tree;
    _tree.on('click',
function(node){
        
var record=_combobox.setValueAndText(node.value,node.text);
          _combobox.collapse();
          _combobox.fireEvent('select', _combobox, record, 
0);
      }
);
      
this.onExpand=function()
      
{
          _tree.render(treeId);
      }

    Ext.ux.TreeCombobox.superclass.constructor.call(
this,Ext.apply(
{
        hiddenName:config.hiddenName,
        
//name:config.name,
        fieldLabel:config.fieldLabel,
        emptyText:config.emptyText,
        valueField:config.valueField
||'value',
        displayField:config.displayField
||'text',
        store:
new Ext.data.SimpleStore({fields:[],data:[[]]}),
        editable:
false,
        shadow:
false,
        autoScroll:
true,
        mode: 'local',
        triggerAction:'all',
        maxHeight: config.maxHeight
||200,
        tpl: '
<tpl for="."><div style="height:'+config.maxHeight+'px"><div id="'+treeId+'"></div></div></tpl>',
        selectedClass:'',
        onSelect:Ext.emptyFn
}
,config
));
}
;
Ext.extend(Ext.ux.TreeComboBox ,Ext.form.ComboBox, 
{
    onRender : 
function(ct, position){
        Ext.ux.TreeComboBox.superclass.onRender.apply(
this, arguments);
        
this.on("expand",this.onExpand,this);
        
if(this.allowBlanl==false)
        
this.setDefault();
    }
,
     setValue : 
function(v){
        
if(v)
        
this. setValueAndText(v.code,v.name);
        
else
        Ext.form.ComboBox.superclass.setValue.call(
this, v);
    }
,
    setValueAndText : 
function(v,t){
        
//Ext.log(v+t);
        var text = v==''?'根节点':t;
        
this.lastSelectionText = text;
        
if(this.hiddenField){
            
this.hiddenField.value = v;
        }

        Ext.form.ComboBox.superclass.setValue.call(
this, text);
        
this.value = v;
        
var RecordType = Ext.data.Record.create([
            
{name: this.valueField},
            
{name: this.displayField}
        ]);
        
var data={};
        data[
this.valueField]=v;
        data[
this.displayField]=t;
        
var record = new RecordType(data);
        
return record;
    }
,
    reset:
function()
    
{
        
this.tree.getRootNode().collapse();
        Ext.ux.RegionField.superclass.reset.call(
this);
    }

}
);


例子:
    var treeComboBox=new Ext.ux.TreeComboBox({
        hiddenName:'treeComboBox',
        fieldLabel:'树状选择框',
        maxHeight:
250,
        treeWidth:
200}
);


Let life be beautiful like summer flowers and death like autumn leaves.

posted on 2008-08-11 09:14 Alexwan 阅读(5160) 评论(5)  编辑  收藏 所属分类: JavaScript

评论

# re: [Extjs]基于Ext2.0的树状选择框(TreeComboBox) 2008-08-11 10:03 EricFan

这种纯累code的文章真的很难看下去啊  回复  更多评论   

# re: [Extjs]基于Ext2.0的树状选择框(TreeComboBox) 2008-08-11 10:30 万洪泉

不用思考的文章,看了又有什么用呢?  回复  更多评论   

# re: [Extjs]基于Ext2.0的树状选择框(TreeComboBox) 2008-08-11 10:42 zhuxing

现在ext真的有点走红了
最近看到不少产品中的web解决方案都用了ext  回复  更多评论   

# re: [Extjs]基于Ext2.0的树状选择框(TreeComboBox) 2008-08-11 11:02 万洪泉

EXT在内存方面比较薄弱,使用的内存多,而且没有一个好的释放内存机制!  回复  更多评论   

# re: [Extjs]基于Ext2.0的树状选择框(TreeComboBox) 2009-03-31 15:45 extjs

ie下显示不正常呀  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: