背景:有一些时候我们处理的数据本身就是树状的结构,当我们需要在从这些数据中做选择的时候,希望出来的数据也是树状,以方便在逻辑上区分.
实现方法:扩展和树相关的类,使得他们可以用于选择.
实现代码:
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.