combotreeのまとめ
1:最近この需要があって、extの下のcomboのプルダウンは木で、ネット上の例は多くて、カプセル化するのもとても良くて、基本的にすべてプルダウンの下で望みの木が現れることを満たすことができて、しかし私の使用状況は例えばユーザーが編集する時、ユーザーがすでに選択した数の値を自動的にプルダウンの枠の中に更に値を割り当てて、例えば前にidが5のノードを選んだので、では、ユーザーを編集するときにcomboにこの値が自動的に表示されます
2:ネット上でこのような例が多くないことを発見して、1つはiteyeの上で書いたので、住所はhttp://zxlaiye.iteye.com/blog/1310556.テストを経て、この中にいくつかの問題があり、何人かの作者も雑用を理解していないので、修正して使えます.
3:インスタンスコードを送信:
new Ext.ux.ComboBoxTree({
fieldLabel : ' ',
hiddenName : 'testTreeName',
value : 11,
height : 180,
width : 200,
dataUrl : PATH
+ '/do.php?mod=util&action=query_parent_department_tree',
nodePathUrl : PATH
+ '/do.php?mod=util&action=query_department_path&id=11',
rootVisible : false,
rootSelectable : false,
showFullPath : false,
allowBlank : false,
emptyText : ' '
})hiddenNameはpostの過去のフィールドです
DataUrlは一般的なツリーを生成するパスです.これはいつもと同じで、異なる場所にnodePathUrlが増えています.この私の例では初期化したvalueは11です.このノードは私のデータベースで対応する父ノードが一番上のパスに押したのは/root/8/7/11です. すなわち,このノードはさっきの経路からtreepanelのselectPath法を用いて直接このノードを見つけ,そのノードtextをcomboに対応させてvalueをnameに設定する.以前この問題は中に経路の問題があって見つけることができなくて、また1つの場所の時1つのcuの関数のパッケージがあって、cuの関数はnodePathUrlを要求しました.中にはもう一つ問題があります.現在のtreeにrootノードがなければ対応できません.とにかく私が直してあげたのは使えます.ソースコードを見てください.
/**
* ， 。 。 Ext.form.ComboBox 。
* cu.get() 。
*/
/*
* new Ext.ux.ComboBoxTree({ fieldLabel:' ', hiddenName: 'parentId', value:
* this.modifyId ? '' : this.parentMenu.id, height: 180, dataUrl:
* 'sys/menu/getMenus.do', tree url nodePathUrl:
* 'sys/util/getEntityIdPath.do?c=sys.entity.Menu', parentId/parentId/.../ id
* root: {id:'root', text:' ', expanded: true}, rootVisible: true,
* rootSelectable: true, rootValue: null, showFullPath: true, allowBlank: false,
* });
*/
/**
* @author Linzongxue
* @create_date 2011-12-13
*/
Ext.ux.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
//
dataUrl : null, // url
// id id url， ：parentId1/parentId2/parentId3/../ id
// ，
nodePathUrl : null,
loader : null,
root : {},
rootVisible : false,
//
rootSelectable : false, // ， false
folderSelectable : true, // ， true
leafSelectable : true, // ， true
showFullPath : false, //
rootValue : undefined, // （ ， ）
// combo
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
mode : 'local',
triggerAction : 'all',
editable : false,
forceSelection : true,
tree : null, // ， expand
// private: combo ，
preventCollapse : false,
initComponent : function() {
this.treeId = Ext.id();
this.height = this.height || 200;
this.tpl = String.format(
'<tpl for="."><div id="{0}" style="height:{1}px"></div></tpl>',
this.treeId, this.height);
Ext.ux.ComboBoxTree.superclass.initComponent.call(this);
},
setValue : function(value) {
if (Ext.isObject(value)) { //
this.doSetValue(value);
} else { // ， ，
if (!this.tree)
this.initTree();
if (value === this.tree.root.id
|| (Ext.isDefined(this.rootValue) && value === this.rootValue)) { //
this.tree.root.select();
this.doSetValue(this.root);
return;
}
var url = this.nodePathUrl;
if (!url) {
this.doSetValue({
id : value
});
return;
}
Ext.Ajax.request({
url : url,
async : false,
scope : this,
success : function(resp, opts) {
var comboTree = this;
path = resp.responseText;
path = (path.indexOf('/') == 0 ? '' : '/')
+comboTree.tree.root.id+'/'+ path;
this.tree.selectPath(path, 'id', function(success,
node) {
comboTree.doSetValue(success
? node
: null);
});
},
faliure : function() {
alert(3)
}
});
/*
* cu.get(url, {id: value}).done(function(path){// id path =
* '/' + this.root.id + (path.indexOf('/') == 0 ? '' : '/') + path;
* var comboTree = this; this.tree.selectPath(path, 'id',
* function(success, node){ comboTree.doSetValue(success ? node :
* null); }); }, this);
*/
}
},
// private: ， value
doSetValue : function(value) {
var id = value ? value.id : '';
var text = value ? value.text : '';
if (value && (value.loader || value.attributes)) { //
var isRootNode = (value.id == this.tree.root.id);
if (isRootNode && Ext.isDefined(this.rootValue)) {
id = this.rootValue;
}
if (this.showFullPath) {
text = isRootNode ? '/' : value.getPath('text').replace(
'/' + this.tree.root.text, '');
}
}
this.value = id;
if (this.hiddenField) {
this.hiddenField.value = id; //
}
this.lastSelectionText = text;
this.el.dom.value = text; //
this.fireEvent('select', this, value);
},
getValue : function() {
return Ext.isDefined(this.value) ? this.value : '';
},
//
getValueNode : function() {
return this.tree
? this.tree.getSelectionModel().getSelectedNode()
: null;
},
getText : function() {
return this.lastSelectionText || '';
},
reload : function() {
if (!this.tree)
return;
var node = this.tree.getSelectionModel().getSelectedNode();
var path = node ? node.getPath() : null;
this.tree.getLoader().load(this.tree.root, function() {
if (path) {
this.tree.selectPath(path);
}
}, this);
this.preventCollapse = true;
},
// private: preventCollapse
collapse : function() {
if (this.preventCollapse) {
this.preventCollapse = false;
return;
}
Ext.ux.ComboBoxTree.superclass.collapse.call(this);
},
// private:
expand : function() {
Ext.ux.ComboBoxTree.superclass.expand.call(this);
if (!this.tree) {
this.initTree();
}
},
// private:
destroy : function() {
if (this.tree && this.tree.rendered)
this.tree.destroy();
Ext.form.ComboBox.superclass.destroy.call(this);
},
// private
initTree : function() {
if (!this.list) { // ， combotree ，
this.initList();
}
// this.preventCollapse=true， combo
var enableCollapse = function() {
this.preventCollapse = false;
};
// this.preventCollapse=false， combo
var disableCollapse = function() {
this.preventCollapse = true;
};
this.tree = new Ext.tree.TreePanel({
renderTo : this.treeId,
useArrows : false,
autoScroll : true,
height : this.height, // IE bug
animate : true,
enableDD : false,
containerScroll : true,
border : false,
dataUrl : this.dataUrl,
loader : this.loader,
root : this.root,
rootVisible : this.rootVisible,
// bbar:[
// '->', {text: ' ', handler: this.reload, iconCls:
// 'icon-refresh', scope: this} //
// ],
listeners : {
click : function(node) {
disableCollapse();
if (node == this.tree.root) { //
if (!this.rootSelectable)
return;
} else if (!node.isLeaf()) { //
if (!this.folderSelectable)
return;
} else { //
if (!this.leafSelectable)
return;
}
// ， value， getNodeValue select
node.select();
this.setValue(node);
enableCollapse();
},
// combo
beforeexpandnode : disableCollapse,
beforecollapsenode : disableCollapse,
beforeload : disableCollapse,
// combo
load : enableCollapse,
expandnode : enableCollapse,
scope : this
}
});
}
});
Ext.reg('combotree', Ext.ux.ComboBoxTree);