在ExtJS EditorGridPanel中級聯組合框

我有一個工作的EditorGrid面板，其中兩列有ComboBox編輯器。這兩個組合框都從數據庫遠程加載（countryStore和cityStore）。在ExtJS EditorGridPanel中級聯組合框

我想限制cityComboBox只顯示所選國家的城市。我需要用數據庫中的過濾器重新加載cityStore（有太多城市需要過濾localy）。篩選器值是countryComboBox值。

countryComboBox中總是有一個值，因爲我在創建新記錄時添加了默認值= 1，所以這不是問題。

我不知道哪位聽衆會適合這裏。當countryComboBox顯示出來並在顯示之前過濾組合框（或者在檢索數據時顯示等待消息）之前，我需要趕上雙擊國家單元格的時刻。

如果這是不可能的，我可以通過雙擊一個單元格打開一個彈出窗口，從過濾城市的組合框中選擇「確認」並將值輸入到單元格中？

2010-10-20 Jure Srpcic

我終於成功了。我創建了兩個解決方案 - 用於網格內的本地和遠程下拉搜索。最後，我決定使用本地搜索（我可以在ExtJS中將country_id添加到我的cities查詢和過濾器中），但是可以將此工作用於遠程搜索 - 如果有人需要，我也可以準備該解決方案。

LOCAL SOLUTION

我不得不使用beforeQuery事件從countryCombo同一行中過濾cityCombo，使用id。下面的代碼爲cityCombo：

var cityCombo = new Ext.form.ComboBox({ 
    triggerAction: 'all', 
    mode: 'local', 
    lastQuery: '', // to make sure the filter in the store is not cleared the first time the ComboBox trigger is used 
    store: cityDropdownStore, 
    displayField: 'city', 
    valueField: 'city_id', 
    listeners: { 
     beforeQuery: function(query) { 
      currentRowId = myGrid.getSelectionModel().getSelected().data.country_id; 
      this.store.clearFilter(); 
      this.store.filter({ property: 'country_id', value: currentRowId, exactMatch: true }); 
     } 
    } 
});

正如你可以看到，當電網內cityCombo被雙擊，我當前行中得到country_id，並使用該值過濾cityStore。這就要求cityStore有以下字段：id，country_id，city

一個問題仍然存在：當用戶改變countryCombo，市場應該改變/警告說，這不是當前國家正確的用戶。這個解決方案很複雜......你可能知道，你無法獲得對comboBox的parentGrid的引用（否則你可以調用countryCombo --> parentGrid --> currentRecord --> cityCombo --> change it）。

我試着聆聽網格本身的rowchange事件，但如果用戶在更改countryCombo後直接點擊另一行，它會更改錯誤行的城市。

該解決方案有些進步：我不得不從網格的beforeedit事件中將當前行的引用複製到cityCombo。下面是網格的監聽器此：

listeners: { 
    beforeedit: function(e) { 
     // reference to the currently clicked cell 
     var ed = e.grid.getColumnModel().getCellEditor(e.column, e.row);  
     if (ed && ed.field) { 
      // copy these references to the current editor (countryCombo in our case) 
      Ext.copyTo(ed.field, e, 'grid,record,field,row,column'); 
     } 
    } 
},

現在我們的countryCombo擁有的所有信息neccessary當它被改爲重置的城市。這裏是整個countryCombo代碼：

var countryCombo = new Ext.form.ComboBox({ 
    id: 'skupina_combo', 
    typeAhead: true, 
    triggerAction: 'all', 
    lazyRender: true, 
    mode: 'local', 
    store: countryDropdownStore, 
    displayField: 'country', 
    valueField: 'country_id', 
    listeners: { 
     change: function(t, n, o) { // t is the reference to the combo 
      // I have t.record available only because I copied it in the beforeEdit event from grid 
      t.record.set('city_id', '0'); 
     } 

    } 
});

單元渲染並未有一個問題，我過濾自己的店，所以我只需要一個商店渲染和編輯的組合框（cityStore）。

遠程解決方案需要我爲城市創建兩個存儲 - cityRendererStore和cityDropdownStore，每次查詢數據庫而不是使用過濾器。如果你有太多的城市在本地過濾，那麼這種方法是必要的。我應該提到我在應用程序中並沒有真正使用城市和國家，我只是創建了這個例子來簡化事情。

我對最終結果感到非常高興 - 它提供了網格的所有優點以及通常僅在表單中可用的有條件下拉菜單。

來源

2010-10-22 10:08:29

我可以在這裏看到幾個選項。您可以捕獲商店的update事件（當底層記錄更新或標記爲髒）或捕獲countryComboBox的select事件。這兩者都會爲您提供所選國家/地區的ID值，然後您可以將其添加到城市ComboBox的baseParams以進行遠程過濾。

來源

2010-10-20 19:03:58 wes

我嘗試了第一個建議（商店的'更新'事件），但它不工作 - 想象我想編輯現有記錄的城市 - 我雙擊城市下拉菜單，沒有商店更改。 cityComboBox上的「選擇」僅在您選擇下拉列表中的某個值時觸發 - 我需要在選擇任何內容之前對其進行過濾。 countryComboBox上的'select'不會在編輯現有記錄的城市時觸發（與'update store'問題相同）。 – 2010-10-20 20:14:08

但是您已經知道城市組合應該默認設置了什麼，因爲您默認'country = 1'對嗎？在你的問題中的代碼示例顯示你的網格配置和事件處理程序將是有幫助的:) – wes 2010-10-20 21:46:14

那麼，我的代碼不會有太大的好處，因爲一切工作都可以在可編輯網格中的動態下拉列表中進行。我需要新的代碼。關於你的評論：是的，我總是有國家= 1（或國家=記錄中的現有價值），但我的問題是如何過濾當前行'countryComboBox'字段（我有）的'cityCombobBox'。 – 2010-10-20 21:56:30

在ExtJS EditorGridPanel中級聯組合框

回答

相關問題