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的下拉树完美了，世界太平了！

最新文章

  1. 设置sublime text2/3中默认预览浏览器快捷键的方法
  2. EF 之 MVC 排序，查询，分页 Sorting, Filtering, and Paging For MVC About EF
  3. 2015年第14本（英文第10本）：The A.B.C. Murders (A.B.C谋杀案)
  4. Servlet+Jsp实现图片或文件的上传功能
  5. php导出word格式数据的代码
  6. CSS学习之盒子模式
  7. (4/18)重学Standford_iOS7开发_框架和带属性字符串_课程笔记
  8. 《A First Course in Mathematical Modeling》-chaper2-建模过程、比例性及几何相似性
  9. 你好，C++（22） 排排坐，吃果果——4.3.3 for循环：某个范围内…每个都…
  10. N - Picture - poj 1177（扫描线求周长）
  11. 处理IIS报“由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置，无法提供您请求的页面”
  12. linux添加到普通用户sudo才干
  13. iOS 代码实现获得应用的版本号（Version／Build）
  14. Windows2008/2012多用户同时远程连接终端服务授权
  15. 接口请求，上传byte数组byte[]数据异常，负数变正数/负数变63
  16. abap 常用TCODE
  17. C#调用原生C++ COM对象（在C++中实现C#的接口）
  18. 扒一扒开源世界有哪些licenses？
  19. mysql 架构 ~ binlog_server
  20. sql语句，加引号和不加引号的区别

热门文章

  1. 在ubuntu中安装puppeteer
  2. Learning a Deep Compact Image Representation for Visual Tracking
  3. 动手编写TCP服务器系列之一：日志文件
  4. Codeforces 798D - Mike and distribution(二维贪心、（玄学）随机排列)
  5. cin关闭同步[转]
  6. 使用Guava retryer优雅的实现接口重试机制
  7. [BZOJ4942][Noi2017]整数 线段树+压位
  8. spring boot 扩展之AutoConfigurationImportListener
  9. cordova 导致css中绝对定位top:0会被顶到视图之外
  10. ubuntu各种软件安装-装机整套系列