使用EXTjs預先加載組合框的項目

我有從商店加載的組合框的項目，但是當組合框項目列表因爲用戶單擊以「展開」而顯示時會發生什麼情況，，它必須從商店代理'重新加載'數據。這會導致列表閃爍並變爲未選中狀態，迫使用戶再次點擊下拉列表。使用EXTjs預先加載組合框的項目

步驟1（在頁面加載）：

Page is loaded, combo not visible, but firebug shows priorities is already loaded

點擊細胞進行編輯：

cell is clicked to edit, combo box now visible, firebug shows no changes

點擊在組合框中的向下箭頭。同樣，這個ajax調用強制組合框自動關閉，迫使用戶重新點擊向下的箭頭。

down arrow on dropdown clicked, firebug shows another ajax call was made.

查看

Ext.define('AM.view.card.BacklogList', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.backlogcardlist', 

    title: 'Backlog', 
    store: 'BacklogCards', 

    selType: 'cellmodel', 
    plugins: [ 
     Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1 
     }) 
    ], 

    columns: [ 
     { header: 'ID', dataIndex: 'id' }, 
     { header: 'Name', dataIndex: 'name', field: 'textfield' }, 
     { 
      header: 'Priority', 
      dataIndex: 'priority_id', 
      renderer: function(value){ 
       if (value==3) 
       { 
        return "L"; 
       } 
       else if (value==2) 
       { 
        return "M"; 
       } 
       else 
       { 
        return "H"; 
       } 
      }, 
      width: 130, 
      field: { 
       xtype: 'combobox', 
       typeAhead: true, 
       store: 'Priorities', 
       displayField: 'name', 
       valueField: 'id', 
       listClass: 'x-combo-list-small' 
      } 
     } 
    ] 

});

商店：

Ext.define('AM.store.Priorities', { 
    extend: 'Ext.data.Store', 
    model: 'AM.model.Priority', 
    autoLoad: true, 

    proxy: { 
     type: 'ajax', 
     api: { 
      read: 'app/data/priorities.json', 
      update: 'app/data/updateUsers.json' 
     }, 
     reader: { 
      type: 'json', 
      root: 'priorities', 
      successProperty: 'success' 
     } 
    } 
});

priorities.json

{ 
    success: true, 
    priorities: [ 
     { 
      id    : 1, 
      name   : "High", 
      short_name  : "H" 
     }, 
     { 
      id    : 2, 
      name   : "Medium", 
      short_name  : "M" 
     }, 
      { 
      id    : 3, 
      name   : "Low", 
      short_name  : "L" 
     } 
    ] 
}

來源

2011-07-05 Robodude

確保您使用* queryMode *'local'，* autoLoad * true，並且在將其附加到組合前將您的商店實例化。這應該強制它在將其展示給最終用戶之前獲取值。 –

嘿扭扭的梨！謝謝（你的）信息！將querymode設置爲本地伎倆！如果您提交它作爲答案，我會盡快接受:) – Robodude

我相信你需要做的是設置queryMode什麼：「本地」在th e組合框字段配置。

field: { 
xtype: 'combobox', 
queryMode: 'local', 
typeAhead: true, 
store: 'Priorities', 
displayField: 'name', 
valueField: 'id', 
listClass: 'x-combo-list-small' 
}

從the Ext JS Combobox API documentation (emphasis added)：

在queryMode： '遠程'，組合框加載其存儲與用戶交互動態爲主。

這通常用於「自動完成」類型的輸入，並且在用戶完成打字後，商店被加載。

您的商店的autoLoad設置爲true，這意味着您不應該將queryModel設置爲本地問題，因爲您的數據在創建時應該已經存儲在商店中。我會說我沒有深入挖掘解釋行爲，也許有人可以詳細闡述組合框的錯綜複雜。

來源

2011-07-05 21:37:04 zyphos

使用EXTjs預先加載組合框的項目

回答

相關問題