<script>
      // 创建 accordion
      var html = '<div id="accord-menu" fit="true" animate="false">';
      var accord = $(html).appendTo('body');
      
      accord.accordion({onSelect: doAccordSelect});

      // 展开时, 初始化内容
      function doAccordSelect(title, index){
         var els = $("#accord-menu-" + index);

         // 这里为什么得不到?
         if (els.length == 0){
            alert("not found");
         }else{         
            els.html("<span>text</span>");
         };
      };
      
      // 动态添加
      accord.accordion('add', {
         title: 'abc',
         selected: true,
         content:'<ul id="accord-menu-0"></ul>'
      });

      // 选中第一个
      accord.accordion('select', 0);
   </script>

创建日历控件比较耗费时间, 而用户每次操作时不一定都要修改日期控件
如果日历控件能支持延迟初始化, 即点击日历控件右侧的图标的时候, 才创建日历 panel
再配合 sharedCalendar, 页面加载速度会有一点儿改善

应用场景:
一个页面垂直放置2-3个datagrid, 如果指定高度, datagrid 没内容时, 占地方, 而且空荡荡的.
datagrid 的高度最好随内容变化, 如: 允许设置 datagrid 的最小高度和最大高度

高度计算逻辑:
当 datagrid 没有数据时, 使用最小高度值
当 datagrid 里新增行时, datagrid 的高度跟着变化, 以不出现垂直滚动条为准
当 datagrid 的高度超过最大高度值时, 则不再扩展, 这时候用滚动条控制

1.3.6 似乎还没有解决这个 bug ?

stworthy 对这个主题兴趣不大, 只好自己动手了, 期待 stworthy 的官方版本.

下面是示例:
<input type="checkbox" id="ck1" name="ck1" data-options="data: {'value':'1', 'text':'启用', 'uncheckedValue':'0', 'uncheckedText':'禁用'}" />
<input type="checkbox" id="ck2" name="ck2" checked />
   
<script>
$("#ck1").checkbox();

var ck = $("#ck2");
ck.checkbox({
   data: {'value':'1', 'text':'启用', 'uncheckedValue':'0', 'uncheckedText':'禁用'}
});

ck.bind("change", function(evt){
   var ck = $(this);
   var value = ck.checkbox("getValue");
   var text = ck.checkbox("getText");
   
   alert(value + ":"+ text);
});

</script>

下面是扩展的代码:

// 参照easyui 的代码, 封装 checkbox 控件
(function ($) {
   
    function init(target){
       // 用隐藏控件提交选中/非选中的值
       var el = $('<input type="hidden" />');
        el.insertAfter(target);
       
        var name = $(target).attr('name');
        if (name){
                el.attr('name', name);
                $(target).removeAttr('name').attr('checkboxName', name);
        }
       
        return el;
    }
   
    function destroy(target){
        var el = $.data(target, 'checkbox').valueEl;
        if (el) {el.remove();}
       
        $(target).remove();
    }

    // 根据checkbox的勾选状态, 更新hidden控件的值
   function updateValue(target){
      var state = $.data(target, 'checkbox');
      
      var data = state.options.data;      
      var value = (target.checked?data.value:data.uncheckedValue);
      var text = (target.checked?data.text:data.uncheckedText);

      var el = state.valueEl;
      el.val(value);
      el.attr("text", text);
   }
   
   function getValue(target){
      var el = $.data(target, 'checkbox').valueEl;
      return el.val();
   }

   function getText(target){
      var el = $.data(target, 'checkbox').valueEl;
      return el.attr("text");
   }
          
    function setDisabled(target, disabled){
       var state = $.data(target, 'checkbox');
       if (!state) {
          // 有可能在控件初始化前先调用了本方法
          target.disabled = disabled;
          return;
       }
       
        var opts = state.options;
        if (disabled){
            opts.disabled = true;
            $(target).attr('disabled', true);
        } else {
            opts.disabled = false;
            $(target).removeAttr('disabled');
        }
    }
   
    // 勾选时更新值
   function bindEvents(target){
      $(target).unbind(".checkbox");
   
      $(target).bind("change.checkbox",function(){
         updateValue(this);
      });
   }
   
   // 解析 html 的内容
   function parseOptions(target){
      return $.extend({}, $.parser.parseOptions(target));
   };
   
   // 加载数据
   // 格式: {'value':'1', 'text':'男', 'uncheckedValue':'0', 'uncheckedText':'女'}
   function loadData(target, data){
      var opts = $.data(target, 'checkbox').options;
      opts.data = data;
      
      updateValue(target);
   }

   $.fn.checkbox = function (options, param) {
      if (typeof options == 'string') {
         return $.fn.checkbox.methods[options](this, param);
      }
      
      options = options || {};
      return this.each(function () {
         var state = $.data(this, 'checkbox');
         if (!state) {
            var opts = $.extend({}, $.fn.checkbox.defaults, parseOptions(this), options);
            var el = init(this);
            
            state = {
               options: opts,
               data: [],
               valueEl: el
            };
            $.data(this, 'checkbox', state);
            
         } else {
            $.extend(state.options, options);
         }
         
         if (state.options.data){
            loadData(this, state.options.data);
         }
         
         setDisabled(this, state.options.disabled);
         bindEvents(this);
      });
   };
   
   
   $.fn.checkbox.methods = {
        options: function(jq){
            return $.data(jq[0], 'checkbox').options;
        },
      readonly: function(jq, readonly){
         //if (readonly == undefined) readonly = true;
         
            jq.each(function(){
                setDisabled(this, readonly);
            });
        },
       
        getText: function(jq){
            return getText(jq[0]);
        },
       
        getValue: function(jq){
            return getValue(jq[0]);
        }

   };
   
   $.fn.checkbox.defaults = {
        disabled: false
   };
   
})(jQuery);

在不指定 <!DOCTYPE html> 时, combo控件的宽度与原始 input 控件的显示宽度是一致的
页面加上 <!DOCTYPE html> 后, combo控件的宽度比原始 input 控件窄 6px, 会导致页面打开后跳动, 这个能解决吗?

<input type="text" style="width:150px"><br/>
<input type="text" id="cc" style="width:150px"><br/>

       <script type="text/javascript">
      $(function(){
         $('#cc').combo({
            required:true,
            editable:false
         });
      });
   </script>

现在换了一个思路, 把 change 事件绑定在原控件上, 而不是 combo 的 onChange 事件上
$("#cc").bind("change", function(e){
     ....
});

在 combo 的 onChange 里:
$(this).trigger("change");

就是拼音检索 filter 的时候, onChange 调用的太频繁了, 而且是无意义的调用
所以我在 onChange 里又过滤掉多余的调用

如果能够覆写 setValues 方法, 把 trigger 放在这里也挺合适的,
并且在 remainText = true 时, 不 trigger

   function onCombotreeShowPanel(){
      // 显示下拉框, 展开到当前节点
      var t = $(this).combotree('tree');
      var node = t.tree('getSelected');
      if (node){
         t.tree('expandTo', node.target);
         }
   }
   


(function($){
   // 实现下拉树的本地检索功能
   $.fn.combotree.defaults.editable = true;
   
   $.extend($.fn.combotree.methods,{
      nav:function(jq, dir){
         return jq.each(function(){
            var opts = $(this).combotree('options');
            var t = $(this).combotree('tree');
            var nodes = t.tree('getChildren');
            if (!nodes.length) {return;}
            
            var node = t.tree('getSelected');
            if (!node){
               t.tree('select', dir>0 ? nodes[0].target : nodes[nodes.length-1].target);
            } else {
               var index = 0;
               for(var i=0; i<nodes.length; i++){
                  if (nodes.target == node.target){
                     index = i;
                     break;
                  }
               }
               
               if (dir>0){
                  while (index < nodes.length-1){
                     index++;
                     if ($(nodes[index].target).is(':visible')){break;}
                  }
               } else {
                  while (index > 0){
                     index--;
                     if ($(nodes[index].target).is(':visible')){break;}
                  }
               }
               t.tree('select',nodes[index].target);
               t.tree('scrollTo',nodes[index].target);
               
            }

            if (opts.selectOnNavigation){
               var node = t.tree('getSelected');
               $(this).combotree("setValue", node.id);
//               $(node.target).trigger('click');
//               $(this).combotree('showPanel');
            }
         });
      }
   });
   
   // 检测当前能否编辑
   function checkEditable(el){
      var opt = el.combo("options");                  
      if (opt.readonly || opt.disabled) {
         return false;
      }
      return opt.editable;
   }
   
   $.extend($.fn.combotree.defaults.keyHandler,{
      up:function(){
         var el = $(this);
         if (!checkEditable(el)) return;
         
         // 当前 panel 已展开, 则处理nav, 否则先显示 panel
         var p = el.combotree('panel');
         if (p.is(':visible')){
            el.combotree('nav', -1);
         }else{
            el.combotree('showPanel');   
         }
      },
      down:function(){
         var el = $(this);
         if (!checkEditable(el)) return;
         
         // 当前 panel 已展开, 则处理nav, 否则先显示 panel
         var p = el.combotree('panel');
         if (p.is(':visible')){
            el.combotree('nav', 1);
         }else{
            el.combotree('showPanel');   
         }
      },
      right:function(){
         var el = $(this);
         if (!checkEditable(el)) return;
         
         var p = el.combotree('panel');
         if (!p.is(':visible')){return;}
         
         // 展开当前节点的分支
         var t = el.combotree('tree');
         var node = t.tree('getSelected');
         if (node){
            t.tree('expand', node.target);
         }
      },
      left:function(){
         var el = $(this);
         if (!checkEditable(el)) return;
         
         var p = el.combotree('panel');
         if (!p.is(':visible')){return;}
         
         var t = el.combotree('tree');
         var node = t.tree('getSelected');
         if (node){
            var isLeaf = t.tree('isLeaf', node.target);
            if (!isLeaf && node.state == "open"){
               // 如果不是叶子节点, 并且当前是展开状态, 则收缩当前分支
               t.tree('collapse', node.target);
            }else{
               // 如果有父节点, 则收缩父节点, 并且选中父节点
               var parent = t.tree('getParent', node.target);
               if (parent){
                  t.tree('collapse', parent.target);
                  t.tree('select', parent.target);
                  
                  // 需要时, 更新textbox的值
                  var opts = el.combo("options");   
                  if (opts.selectOnNavigation){
                     el.combotree("setValue", parent.id);                        
                  }
               }
            }
         }
      },
      enter:function(){
         var el = $(this);
         if (!checkEditable(el)) return;
         
         var p = el.combotree('panel');
         if (!p.is(':visible')){return;}
         
         var t = el.combotree('tree');
         var node = t.tree('getSelected');
         if (node){
            $(node.target).trigger('click');
         }
         $(this).combotree('hidePanel');
      }
   });
   
   $.extend($.fn.combotree.defaults.keyHandler,{
      query:function(q){
         if (q == "") {
            // 用于触发 onchange
            $(this).combotree('setValue', "");
            return;
         }
         
         var opts = $(this).combotree('options');
         
         var t = $(this).combotree('tree');
         var nodes = t.tree('getChildren');
         for(var i=0; i<nodes.length; i++){
            var node = nodes;
            
//            if (node.text.indexOf(q) >= 0){
            if (opts.filter && opts.filter(q, node)){
               if (q != ""){
                  // 必须展开, 否则显示不出来
                  t.tree('expandTo', node.target);
               }
               $(node.target).show();
            } else {
               $(node.target).hide();
            }
         }
         
         // 点击下拉, 则恢复显示
         if (!opts.hasSetEvents){
            opts.hasSetEvents = true;
            var onShowPanel = opts.onShowPanel;
            opts.onShowPanel = function(){
               // 恢复显示
               var nodes = t.tree('getChildren');
               for(var i=0; i<nodes.length; i++){
                  $(nodes.target).show();
               }
               onShowPanel.call(this);
            };
            
            $(this).combo('options').onShowPanel = opts.onShowPanel;
         }
      }
   });
})(jQuery);

感谢回复, 还是希望 easyui 统一逻辑.
要不各种不便.

看来 stworthy 还没空解决这个问题, 我的变通方案是在 onChange 里过滤多余的调用.

   function onComboChange(value, oldValue){
      var el = $(this);
      var text = el.combo("getText");
      
      if (checkTextInCombo(el, text)) {
         el.trigger("change", value);
      }else{
         // 处理拼音检索后, 用鼠标点选的情况
         if (text == oldValue && text != value){
            el.trigger("change", value);
         }
      }
   }
   
   function checkTextInCombo(el, text){
      // 清空数据的情况, 也触发
      if (text == "") return true;
      
      var datas = null;
      var opt = el.combo("options");
      
      if (opt.type == "combobox"){
         datas = el.combobox("getData");
      }else if (opt.type == "combogrid"){
         var grid = el.combogrid("grid");   // get datagrid object
         datas = grid.datagrid("getRows");
      }else if (opt.type == "combotree"){
         // 没有拼音检索的情况可以直接确认
         return true;
      }
      
      // 校验 text 是否在数据里
      for(var i=0,len=datas.length;i<len;i++){
         var data = datas;
         if (data[opt.textField] == text){
            return true;
         }
      }
      
      return false;
   }
   
   

我想在combo 控件的 onChange 里写如下代码:
   function onComboChange(value, oldValue){
      // 触发原控件的 change 事件
      var el = $(this);
      el.trigger("change", value);
   }

但是发现 doQuery 拼音检索, 执行 filter 时, 会不断触发 onChange 事件
我看 setValues 有第3个参数 remainText, 能否在 remainText==true 时不触发 onChange 事件?

需要修改 combo 的 setValues 方法, 增加 remainText 参数, 然后把 combobox 的 remainText 参数传递过去
在 combo 的 setValues 方法里判断 remainText , 就不调用 onChange

建议把 remainText 参数公开, 有的情况下用起来挺方便的.

function onCombotreeHidePanel(){
   var el = $(this);
   var value = el.combo("getValue");

   alert(value)// 得到的是旧值!
   el.trigger("change", value);
}

combobox 和 combogrid 取的就是最新的值.

在检索时, 自动高亮第一条符合的记录(同时保留textbox的内容不变),
当 panel 关闭时, 才更新 textbox 的值
对 easyui 改动较多, 希望未来版本直接合并进去.

(function($){
   
   $.extend($.fn.combobox.defaults, {
      filter: filterComboboxData,
      onHidePanel: onComboboxHidePanel
   });

   $.extend($.fn.combobox.defaults.keyHandler,{
      query: doQuery
   });
   
   function doQuery(q, evt){
      var target = this;
      var el = $(this);
      
      var state = $.data(target, 'combobox');
      var opts = state.options;
      
      if (opts.multiple && !q){
         el.combobox("setValues", [], true);
      } else {
         el.combobox("setValues", [q], true);
      }
      
      if (opts.mode == 'remote'){
         
      } else {
         var panel = el.combo('panel');
         panel.find('div.combobox-item-selected,div.combobox-item-hover').removeClass('combobox-item-selected combobox-item-hover');
         panel.find('div.combobox-item,div.combobox-group').hide();
         var data = opts.data;
         var vv = [];
         var qq = opts.multiple ? q.split(opts.separator) : [q];
         $.map(qq, function(q){
            q = $.trim(q);
            for(var i=0; i<data.length; i++){
               var row = data;
               if (opts.filter.call(el, q, row)){
                  var v = row[opts.valueField];
                  var s = row[opts.textField];
                  var g = row[opts.groupField];
                  var item = opts.finder.getEl(target, v).show();
                  vv.push(v);
//                  if (s.toLowerCase() == q.toLowerCase()){
//                     vv.push(v);
//                     item.addClass('combobox-item-selected');
//                  }
               }
            }
         });
         
         // 默认高亮第一项
         if (vv.length > 0 && q){
            var v = vv[0];
            var item = opts.finder.getEl(target, v);
            item.addClass('combobox-item-selected');
            
            // 只改value, 不改text
            el.combo("setValues", [v], true);
         }
         
//         $(target).combo('setValues', vv);
      }
   }
   
})(jQuery);




   function filterComboboxData(input, row) {
      // 清空内容, 则不过滤
      if (input == "") return true;
      
      input = input.toUpperCase();
      
      // 先判断显示值
      var opts = $(this).combobox('options');
      var text = row[opts.textField].toUpperCase();
      if (text.indexOf(input) >= 0) {
         return true;
      }
      
      // 优先用top里共享的拼音检索函数(避免每个页面都加载拼音js)
      var spell = top.getFirstSpellLetter;
      if (!spell) spell = getFirstSpellLetter;
      if (spell) {
         var letter = spell(text);
         //alert(letter+":"+input)
         if (letter.indexOf(input) >= 0) {
            return true;
         }
         return false;
      }

      // 默认不过滤
      return true;
   }

   function onComboboxHidePanel(){
      var el = $(this);
      el.combobox('textbox').focus();
      
      // 检查录入内容是否在数据里            
      var opts = el.combobox("options");
      var data = el.combobox("getData");
      var value = el.combobox("getValue");
                  
      // 有高亮选中的项目, 则不进一步处理
      var panel = el.combobox("panel");
      var items = panel.find(".combobox-item-selected");
      if (items.length > 0) {
         var values = el.combobox("getValues");
         el.combobox("setValues", values);
         return;
      }
      
      var allowInput = opts.allowInput;            
      if (allowInput){
         // 允许录入, 并且当前下拉没内容(过滤掉了), 则加入下拉列表里
         var idx = data.length;
         
         data[idx] = [];
         data[idx][opts.textField] = value;
         data[idx][opts.valueField] = value;
         
         el.combobox("loadData", data);               
      }else{
         // 不允许录入任意项, 则清空
         el.combobox("clear");
      }

   }
   

combogrid 设置 panelHeight: "auto"
似乎没有计算datagrid的title的高度和水平滚动条的高度
导致combogrid只有2-3行数据时, 很拥挤, 而且看不到垂直滚动条

另外:
建议 combogrid 的 panelWidth 支持 "auto"
取各个 columns 的width 的合计值, 再加上垂直滚动条的宽度即可

主要是下面的事件:
onBeforeLoad
onLoadSuccess
onLoadError

虽然 combotree 和 combogrid 也有这些事件, 但是下面的代码不能通用
function onBeforeLoad(param){
   var el = $(this);
   var text = el.combo("getText");
   return true;
}

因为 combotree 的 onBeforeLoad 是 tree 的事件, 所以
el.combo("getText"); 会出错

给 combobox 和 combotree 注册同一个 onBeforeLoad 事件, 目前有下面2个问题:
1. 我如何判断当前的 $(this) 到底是 combobox 还是 combotree
2. 我如何得到tree对应的combotree对象