下拉框树形

前端之家收集整理的这篇文章主要介绍了下拉框树形前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. Ext.require(['Ext.tree.*','Ext.data.*','Ext.window.MessageBox']);
  2. Ext.define("Ext.ux.comboBoxtree",{
  3. extend : "Ext.form.field.Picker",requires : ["Ext.tree.Panel"],initComponent : function() {
  4. var self = this;
  5. Ext.apply(self,{
  6. fieldLabel : self.fieldLabel,labelWidth : self.labelWidth
  7. // pickerAlign : "tl"//悬浮到其上面
  8. });
  9. self.callParent();
  10. },createPicker : function() {
  11. var self = this;
  12. var store = Ext.create('Ext.data.TreeStore',{
  13. proxy : {
  14. type : 'ajax',?
  15. url : self.storeUrl
  16. },sorters : [{
  17. property : 'leaf',direction : 'ASC'
  18. },{
  19. property : 'text',direction : 'ASC'
  20. }]
  21. });
  22. self.picker = new Ext.tree.Panel({
  23. height : 300,autoScroll : true,floating : true,focusOnToFront : false,shadow : true,ownerCt : this.ownerCt,useArrows : true,store : store,rootVisible : false
  24. });
  25. self.picker.on({
  26. beforehide : function(p) {
  27. var records = self.picker.getView().getChecked(),names = [];
  28. Ext.Array.each(records,function(rec) {
  29. names.push(rec.get('text'));
  30. });
  31. // Ext.MessageBox.show({
  32. // title : 'Selected Nodes',// msg : names.join('<br />'),// icon : Ext.MessageBox.INFO
  33. // });
  34. // alert(names.join(','));
  35. self.setValue(names.join(','));
  36. p.setVisible(true);// 隐藏树
  37. }
  38. });
  39. return self.picker;
  40. },alignPicker : function() {
  41. // override the original method because otherwise the height of
  42. // the treepanel would be always 0
  43. var me = this,picker,isAbove,aboveSfx = '-above';
  44. if (this.isExpanded) {
  45. picker = me.getPicker();
  46. if (me.matchFieldWidth) {
  47. // Auto the height (it will be constrained by min and
  48. // max width) unless there are no records to display.
  49. picker.setWidth(me.bodyEl.getWidth());
  50. }
  51. if (picker.isFloating()) {
  52. picker.alignTo(me.inputEl,"",me.pickerOffset);// ""->tl
  53. // add the {openCls}-above class if the picker was
  54. // aligned above
  55. // the field due to hitting the bottom of the viewport
  56. isAbove = picker.el.getY() < me.inputEl.getY();
  57. me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
  58. + aboveSfx);
  59. picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
  60. + aboveSfx);
  61. }
  62. }
  63. }
  64. });
  65. Ext.onReady(function() {
  66. var com = Ext.create("Ext.ux.comboBoxtree",{
  67. storeUrl : 'check-nodes.json',width : 270,fieldLabel : '行政区划',labelWidth : 60,renderTo : 'tree-div'
  68. });
  69. });
  70. http://www.sencha.com/forum/showthread.PHP?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList

猜你在找的Ajax相关文章