ExtJS 3.4.0 - ComboBox auto load with local mode

在這邊將提到如何設定自動載入ComboBox的資料，省掉當您點選下拉時向後端撈取資料

庫的時間，可以想像的是假如你的下拉有近千筆的資料，此時將省下一些時間。

ComboBox需搭配Store，透過它您可以決定raw data要組成的格式，從檔案或者是後端來

得到資料。Ext.data.Store有一config設定autoLoad ，當您設定為true時，此時在頁面剛載入

時，就會觸發store去做後端資料的查詢，載入相關資料!

當您此時點擊下拉選項時，必須設定mode為'local'，預設為remote，若沒有更改這裡的設定

將會再次觸發store去後端撈取資料。

片段程式碼如下：

var payernoStore = new Ext.data.Store({
  autoLoad: true,
  // load using HTTP
  url: "<%=request.getContextPath()%>/ActionServlet?action=composeComboBoxMuchData",
  // 此讀取器可以解析JSON DATA, 並轉換成Record. Record需定義其欄位名稱與型別
  reader: new Ext.data.JsonReader({
        root: 'rows',
        totalProperty: 'totalRows',
        fields: payernoColumns
  })
});

var payernoCombo = new Ext.form.ComboBox({
  valueField: 'code_no',
  mode : 'local',
  displayName: 'payer dataes',
  allowBlank: true,
  typeAhead: false,
  triggerAction: 'all',
  transform:'payerno',
  forceSelection:true,
  resizable:true,
  width:100,
  listWidth:250,
  minChars:0,
  lazyRender:false,
  store: payernoStore,
  displayField: 'code_na',
  selectOnFocus:false  
 });

autoLoad with local的搭配，由於資料已預先載入，因此當點擊下拉時直接顯示下拉內容

autoLoad with local

no autoLoad with remote的搭配，當點擊下拉時先顯示wait icon，再顯示下拉內容

no autoLoad with remote

由於在這邊測試的下拉資料有將近5000筆，因此wait icon會有近1~2秒的等待時間。哪種方

式較適合，大家可以依當下的情況做判斷來使用。