Extjs下拉树代码测试总结

http://blog.csdn.net/kunoy/article/details/8067801

首先主要代码源自网络，对那些无私的奉献者表示感谢！

笔者对这些代码做了二次修改，并总结如下：

Extjs3.x版本下拉树代码：

1. Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {
2. constructor : function(cfg) {
3. cfg = cfg || {};
4. Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({
5. maxHeight : 300,
6. editable : false,
7. mode : 'local',
8. triggerAction : 'all',
9. rootVisible : false,
10. selectMode : 'all'
11. }, cfg));
12. },
13. store : new Ext.data.SimpleStore({
14. fields : [],
15. data : [[]]
16. }),
17. // 重写onViewClick，使展开树结点是不关闭下拉框
18. onViewClick : function(doFocus) {
19. var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
20. if (r) {
21. this.onSelect(r, index);
22. }
23. if (doFocus !== false) {
24. this.el.focus();
25. }
26. },
27. tree : null,
28. // 隐藏值
29. hiddenValue : null,
30. getHiddenValue : function() {
31. return this.hiddenValue;
32. },
33. getValue : function() {   //增加适用性，与原来combo组件一样
34. return this.hiddenValue;
35. },
36. setHiddenValue : function(code, dispText) {
37. this.setValue(code);
38. Ext.form.ComboBox.superclass.setValue.call(this, dispText);
39. this.hiddenValue = code;
40. },
41. initComponent : function() {
42. var _this = this;
43. var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId
44. this.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>"
45. this.tree = new Ext.tree.TreePanel({
46. border : false,
47. enableDD : false,
48. enableDrag : false,
49. rootVisible : _this.rootVisible || false,
50. autoScroll : true,
51. trackMouseOver : true,
52. height : _this.maxHeight,
53. lines : true,
54. singleExpand : true,
55. root : new Ext.tree.AsyncTreeNode({
56. id : _this.rootId,
57. text : _this.rootText,
58. iconCls:'ico-root',
59. expanded:true,
60. leaf : false,
61. border : false,
62. draggable : false,
63. singleClickExpand : false,
64. hide : true
65. }),
66. loader : new Ext.tree.TreeLoader({
67. nodeParameter:'ID',
68. requestMethod:'GET',
69. dataUrl : _this.url
70. })
71. });
72. this.tree.on('click', function(node) {
73. if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {
74. if(_this.fireEvent('beforeselect',_this,node)){
75. _this.fireEvent('select',_this,node);
76. }
77. }
78. });
79. this.on('select',function(obj,node){
80. var dispText = node.text;
81. var code = node.id;
82. obj.setHiddenValue(code, dispText);
83. obj.collapse();
84. });
85. this.on('expand', function() {
86. this.tree.render(tplRandomId);
87. });
88. Ext.ux.TreeCombo.superclass.initComponent.call(this);
89. }
90. })
91. Ext.reg("treecombo", Ext.ux.TreeCombo);

使用方法：

1. var treecombo=new Ext.ux.TreeCombo({
2. name : 'areaName',
3. tplId : 'tree_tpl',
4. rootVisible : true,
5. rootText : '/',
6. rootId:'root',
7. url : 'getTreeData.aspx',                                                                   maxHeight :300,
8. id: 'cmbJS',
9. allowBlank: true,
10. selectMode:'leaf',
11. width : '200'
12. });

Extjs4.x版本下拉树代码一：

1. Ext.define('Ext.ux.TreeComboBox',{
2. extend : 'Ext.form.field.ComboBox',
3. alias: 'widget.treecombo',
4. store : new Ext.data.ArrayStore({fields:[],data:[[]]}),
5. editable : false,
6. listConfig : {resizable:true,minWidth:100,maxWidth:400,minHeight:200,maxHeight:400},
7. _idValue : null,
8. _txtValue : null,
9. treeObj: null,
10. initComponent : function(){
11. var _this = this;
12. this.treeObj= new Ext.tree.Panel({
13. border : false,
14. id:Ext.id(),
15. height : 380,
16. width : 400,
17. autoScroll : true,
18. store : Ext.create('Ext.data.TreeStore', {
19. fields : ['id','text','leaf'],
20. autoLoad : false,
21. nodeParam: 'ID',
22. proxy: {
23. type: 'ajax',
24. url : _this.url
25. },
26. root: {
27. expanded: _this.expanded||false,
28. id:_this.rootId||'root',
29. text : _this.rootText||'/'
30. }
31. })
32. });
33. this.treeRenderId = Ext.id();
34. this.tpl = "<div id='"+this.treeRenderId+"'></div>";
35. this.callParent(arguments);
36. this.on({
37. 'expand' : function(){
38. if(!this.treeObj.rendered&&this.treeObj&&!this.readOnly){
39. Ext.defer(function(){
40. this.treeObj.render(this.treeRenderId);
41. },300,this);
42. }
43. }
44. });
45. this.treeObj.on('itemclick',function(view,rec){
46. if(rec&&((_this.selectMode == 'leaf' && rec.isLeaf() == true) || _this.selectMode == 'all')){
47. this.setValue(this._txtValue = rec.get('text'));
48. this._idValue = rec.get('id');
49. this.collapse();
50. _this.fireEvent('select',_this,rec);
51. }
52. },this);
53. },
54. getValue : function(){//获取id值
55. return this._idValue;
56. },
57. getTextValue : function(){//获取text值
58. return this._txtValue;
59. },
60. setLocalValue : function(id,txt){//设值
61. this._idValue = id;
62. this.setValue(this._txtValue = txt);
63. },
64. reLoad:function(id,url){
65. this.treeObj.getStore().proxy.url =url;
66. this.treeObj.setRootNode({
67. id:id,
68. text:'/',
69. expanded:true
70. });
71. }
72. });

使用方法与前面基本相同。这个版本存在很多问题，当一个界面存在两个下拉树时，其中一个下拉树在第二次下拉操作时，树不会显示，如图：

另外由于tree渲染到div上，当节点过多出现滚动条时，会显示两条滚动条，一条是div本身的，一条是treepanel的，如图：

所以此版本不采用，其中添加了一个reLoad()方法，这是由于两个下拉树需要联动才添加的。

Extjs4.x版本下拉树代码二：

1. Ext.define("Ext.ux.ComboTree", {
2. extend : "Ext.form.field.Picker",
3. alias : 'widget.combotree',
4. requires : ["Ext.tree.Panel"],
5. _idValue : '',
6. _txtValue : '',
7. initComponent : function() {
8. this.callParent();
9. var self = this;
10. var store = Ext.create('Ext.data.TreeStore', {
11. proxy : {
12. type : 'ajax',
13. url : self.storeUrl
14. },
15. nodeParam: 'ID',
16. root : {
17. id : self.rootId,
18. text : self.rootText,
19. expanded:self.expanded||false
20. }
21. });
22. self.picker = new Ext.tree.Panel({
23. id:Ext.id(),
24. height : self.treeHeight||300,
25. resizable:true,minWidth:100,maxWidth:400,minHeight:200,maxHeight:500,
26. autoScroll : true,
27. floating : true,
28. focusOnToFront : false,
29. shadow : true,
30. ownerCt : this.ownerCt,
31. useArrows : self.useArrows||true,
32. store : store,
33. rootVisible : true
34. });
35. self.picker.on({
36. 'itemclick' : function(view,rec) {
37. if(rec&&((self.selectMode == 'leaf' && rec.isLeaf() == true) || self.selectMode == 'all')){
38. //self.setRawValue(rec.get('id'));// 隐藏值
39. self._idValue = rec.get('id');
40. self.setValue(self._txtValue=rec.get('text'));// 显示值
41. self.collapse();
42. self.fireEvent('select',self,rec);
43. }
44. }
45. });
46. },
47. //  createPicker : function() {
48. //    var self = this;
49. //    var store = Ext.create('Ext.data.TreeStore', {
50. //        proxy : {
51. //              type : 'ajax',
52. //              url : self.storeUrl
53. //         },
54. //         nodeParam: 'ID',
55. //         root : {
56. //             id : self.rootId,
57. //             text : self.rootText,
58. //             expanded:self.expanded||true
59. //         }
60. //    });
61. //    self.picker = new Ext.tree.Panel({
62. //           id:Ext.id(),
63. //           height : 300,
64. //           //resizable:true,minWidth:100,maxWidth:400,minHeight:200,maxHeight:400,
65. //           autoScroll : true,
66. //           floating : true,
67. //           focusOnToFront : false,
68. //           shadow : true,
69. //           ownerCt : this.ownerCt,
70. //           useArrows : self.useArrows||true,
71. //           store : store,
72. //           rootVisible : true
73. //    });
74. //    self.picker.on({
75. //       'itemclick' : function(view,rec) {
76. //           if(rec&&((self.selectMode == 'leaf' && rec.isLeaf() == true) || self.selectMode == 'all')){
77. //                //self.setRawValue(rec.get('id'));// 隐藏值
78. //                self._idValue = rec.get('id');
79. //                self.setValue(self._txtValue=rec.get('text'));// 显示值
80. //                self.collapse();
81. //                self.fireEvent('select',self,rec);
82. //           }
83. //       }
84. //    });
85. //    return self.picker;
86. //  },
87. getValue : function(){//获取id值
88. return this._idValue;
89. },
90. getTextValue : function(){//获取text值
91. return this._txtValue;
92. },
93. reLoad:function(id,url){
94. var store=this.picker.getStore();
95. var root=this.picker.getRootNode();
96. store.proxy.url =url;
97. root.set('id',id);
98. store.load();
99. },
100. alignPicker : function() {
101. var me = this, picker, isAbove, aboveSfx = '-above';
102. if (this.isExpanded) {
103. picker = me.getPicker();
104. if (me.matchFieldWidth) {
105. picker.setWidth(me.bodyEl.getWidth());
106. }
107. if (picker.isFloating()) {
108. picker.alignTo(me.inputEl, "", me.pickerOffset);
109. isAbove = picker.el.getY() < me.inputEl.getY();
110. me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls+ aboveSfx);
111. picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls+ aboveSfx);
112. }
113. }
114. }
115. });

此版本解决了上述两大问题，其中注解的部分为原作者代码，使用createPicker存在一个问题，必须点击下拉操作后，treepanel才会进行渲染，那么数据联动也就谈不上了（需要联动的tree没有渲染，如何进行数据加载?)，所以笔者移到initComponent下执行，另外也解决了resize的问题。
       使用方法：

1. var treecombo=new Ext.ux.ComboTree({
2. fieldLabel: 'Test',
3. labelWidth: 60,
4. rootText : '/',
5. rootId:'root',
6. expanded:true,
7. storeUrl : 'getTreeData.aspx',
8. id: 'cmbJS',
9. selectMode:'leaf',
10. treeHeight:300,
11. width : 200
12. });

到此，Extjs4.1的下拉树完美了，世界太平了！