ZK：如何在客戶端使用JavaScript填充zk組合框

Question

我想基於zk組合框創建新的zk組件，該組件可以保存先前輸入的歷史記錄。我想將這些先前的輸入存儲在客戶端的localStorage中。所以我必須在客戶端使用JavaScript填充組合框，但不知道如何執行此操作。

Answer 1

自己的解決方案：

的src \ COM \富\ HistoryLinkCombobox.java

package com.foo; 

import org.zkoss.zk.ui.sys.ContentRenderer; 
import org.zkoss.zul.Combobox; 

public class HistoryLinkCombobox extends Combobox 
{ 
    public static final String PR_HISTORY_INDEX = "historyIndex"; 
    private int _historyIndex; 

    public int getHistoryIndex() 
    { 
     return _historyIndex; 
    } 

    public void setHistoryIndex(int historyIndex) 
    { 
     if(_historyIndex == historyIndex) 
     return; 

     _historyIndex = historyIndex; 
     smartUpdate(PR_HISTORY_INDEX, _historyIndex); 
    } 

    protected void renderProperties(ContentRenderer renderer) 
     throws java.io.IOException 
    { 
     super.renderProperties(renderer); 
     render(renderer, PR_HISTORY_INDEX, _historyIndex); 
    } 
} 

的src \網絡\ JS \ COM \富\ HistoryLinkCombobox.js

com.foo.HistoryLinkCombobox = zk.$extends(zul.inp.Combobox, { 

    $define : { 
     historyIndex : function(value) { 
     if (this.desktop) 
      this.clear(); 
     } 
    }, 

    $init : function() { 
     this.$supers('$init', arguments); 
     this.setZclass('z-combobox'); 
    }, 

    open : function() { 
     this._getItemsFromLocalStorage(); 
     this.$supers('open', arguments); 
    }, 

    doBlur_ : function() { 
     this.$super('doBlur_', arguments); 
     this._storeInputInLocalStorage(); 
    }, 

    _getItemsFromLocalStorage : function() { 
     if (!this._canUseLocalStorage()) 
     return; 

     var prevInputs = this._getPrevInputs(); 

     for (var i = 0; i < prevInputs.length; i++) { 
     this._createComboitem(prevInputs[i]); 
     } 
    }, 

    _createComboitem : function(lbl) { 
     for (var ci = this.firstChild; ci; ci = ci.nextSibling) 
     if (ci.getLabel() == lbl) 
      return; 

     var item = new zul.inp.Comboitem({ 
     label : lbl 
     }); 
     this.appendChild(item); 
    }, 

    _storeInputInLocalStorage : function() { 
     if (!this._canUseLocalStorage()) 
     return; 

     var prevInputs = this._getPrevInputs(); 
     var currentInput = this.getValue(); 
     if (!currentInput || jq.inArray(currentInput, prevInputs) != -1) 
     return; 

     prevInputs.push(currentInput); 
     localStorage[this._getStorageKey()] = prevInputs.toString(); 
    }, 

    _canUseLocalStorage : function() { 
     return typeof (Storage) !== "undefined" && this.getHistoryIndex() != 0; 
    }, 

    _getStorageKey : function() { 
     return "com.foo.historyIndex." + this.getHistoryIndex(); 
    }, 

    _getPrevInputs : function() { 
     var prevInputs = localStorage[this._getStorageKey()]; 

     return prevInputs ? prevInputs.split(",") : []; 
    }, 

}); 

WEB- INF \ lang-addon-com-foo.xml

<?xml version="1.0" encoding="UTF-8"?> 
<language-addon> 
    <addon-name>comfoo</addon-name> 
    <language-name>xul/html</language-name> 

    <component> 
     <component-name>historylinkcombobox</component-name> 
     <component-class>com.foo.HistoryLinkCombobox</component-class> 
     <widget-class>com.foo.HistoryLinkCombobox</widget-class> 
    </component> 
</language-addon> 

WEB-INF \ zk.xml

<zk> 
    <language-config> 
     <addon-uri>/WEB-INF/lang-addon-com-foo.xml</addon-uri> 
    </language-config> 
</zk>