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

[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.