將ext Combobox中的建議值渲染爲DOM中的元素

我有一個ext組合框，它使用商店在用戶輸入時向用戶建議值。將ext Combobox中的建議值渲染爲DOM中的元素

其中的一個例子可以在這裏找到：combobox example

有沒有使它所以建議文本列表呈現在DOM元素的方式。請注意，我不是指「applyTo」配置選項，因爲這會渲染整個控件，包括DOM元素的文本框。

2008-09-16 qui

您可以使用插件這個，因爲你可以打電話或者甚至從插件中重寫私有方法：

var suggested_text_plugin = { 

    init: function(o) { 

     o.onTypeAhead = function() { 
      // Original code from the sources goes here: 

      if(this.store.getCount() > 0){ 
       var r = this.store.getAt(0); 
       var newValue = r.data[this.displayField]; 
       var len = newValue.length; 
       var selStart = this.getRawValue().length; 
       if(selStart != len){ 
        this.setRawValue(newValue); 
        this.selectText(selStart, newValue.length); 
       } 
      } 

     // Your code to display newValue in DOM 
     ......myDom.getEl().update(newValue); 
     }; 
    } 
}; 


// in combobox code: 

var cb = new Ext.form.ComboBox({ 
    .... 
    plugins: suggested_text_plugin, 
    .... 
});

我認爲它甚至有可能創造的方法全產業鏈，之前調用原始方法或在你之後，但我還沒有嘗試過。

此外，請不要強迫我使用非標準的插件定義和調用方法（無證）。這只是我看待事物的方式。

編輯：

我認爲法條鏈可以實現類似的東西（未經測試）：

.... 
o.origTypeAhead = new Function(this.onTypeAhead.toSource()); 
// or just 
o.origTypeAhead = this.onTypeAhead; 
.... 

o.onTypeAhead = function() { 
    // Call original 
    this.origTypeAhead(); 
    // Display value into your DOM element 
    ...myDom.... 
};

來源

2008-09-16 18:45:21 Thevs

因此，澄清一下，您希望選定的文本在文本輸入的正下方除外。正確？

組合框只是Ext.DataView，文本輸入和可選觸發按鈕的組合。對於你想要的東西並沒有官方的選擇，並且爲了讓它做你想做的事情將會非常痛苦。因此，最簡單的方法（除了查找和使用某個其他庫的組件完全符合您的要求），您可以使用上述組件自行構建：

創建一個文本框。如果需要，您可以使用Ext.form.TextField，並觀察keyup事件。
創建一個綁定到您的商店的DataView，呈現給您想要的任何DOM元素。根據您的需要，聽取'selectionchange'事件並採取您所需的任何操作來響應選擇。例如，Ext.form.Hidden（或純HTML輸入類型=「隱藏」元素）上的setValue。
在您的keyup事件偵聽器中，調用商店的篩選器方法（請參閱doc），傳遞字段名稱和來自文本字段的值。例如，store.filter（「名」，新的正則表達式（值+「*」））

這是多一點的工作，但它比從頭開始編寫自己的組件或黑客攻擊的組合框的行爲更短了很多像你要的那樣。

來源

2008-09-16 17:14:14 noah

@Thevs

，我認爲你是在正確的軌道上。

我所做的是重寫Combobox的initList方法。

Ext.override(Ext.form.ComboBox, { 
    initList : function(){

如果你看看代碼，你可以看到它向數據視圖呈現建議列表的位。因此，只要設置應用到你想要的DOM元素：

  this.view = new Ext.DataView({ 
      //applyTo: this.innerList, 
      applyTo: "contentbox",

來源

2008-09-17 10:20:46 qui

@qui

確定。我以爲你想要一個額外的DOM字段（除了現有的組合字段）。

但是你的解決方案會覆蓋ComboBox類中的方法，不是嗎？這將導致你所有的組合框會呈現給同一個DOM。使用插件只會覆蓋一個特定的實例。

來源

2008-09-17 14:18:40 Thevs

你可能是對的，但在這種情況下，我一定會只使用一個組合框，所以它並不重要:) 感謝您的建議 – qui 2008-09-17 14:29:41

@qui

另一個要考慮的是，initList不是API的一部分。該方法可能會消失，或者在未來的Ext版本中行爲可能會發生重大變化。如果你從未計劃升級，那麼你不必擔心。

來源

2008-09-17 17:36:36 noah

將ext Combobox中的建議值渲染爲DOM中的元素

回答

相關問題