Ext 2.0 本地模式動態修改 ComboBox 選項實戰

場景

Tree 節點作為數據源，ComboBox 需要 Store，需將 Tree 數據轉換並動態載入 ComboBox。

構建 Tree 數據源

var root = new Ext.tree.TreeNode({
  text: '選項', allowDrag: false, allowDrop: false
});
root.appendChild(
  new Ext.tree.TreeNode({id:1, text:'選項一', allowDrag:false}),
  new Ext.tree.TreeNode({id:2, text:'選項二', allowDrag:false}),
  new Ext.tree.TreeNode({id:3, text:'選項三', allowDrag:false}),
  new Ext.tree.TreeNode({id:4, text:'選項四', allowDrag:false})
);
var tree = new Ext.tree.TreePanel({
  style:'margin:20px 0 0 20px', title:'選項列表', width:200, height:300, root:root
});
tree.render(document.body);
root.expand();

定義本地模式 ComboBox

var combo = new Ext.form.ComboBox({
  valueField: "id",
  displayField: "text",
  store: new Ext.data.SimpleStore({
    fields: ["id", "text"],
    data: []
  }),
  mode: 'local',
  blankText: '請選擇',
  emptyText: '請選擇',
  hiddenName: 'testhide',
  fieldLabel: '測試',
  name: 'test',
  anchor: '90%'
});

FormPanel 與動態載入按鈕

var simpleForm = new Ext.FormPanel({
  labelAlign: 'left',
  title: '動態修改 ComboBox 選項例子',
  buttonAlign: 'center',
  bodyStyle: 'padding:5px',
  style: 'margin:20px 0 0 20px;',
  width: 600,
  frame: true,
  labelWidth: 80,
  items: [combo],
  buttons: [{
    text: '改變選項',
    handler: function() {
      var data = [];
      combo.clearValue();
      for (var i = 0; i < root.childNodes.length; i++) {
        var node = root.childNodes[i];
        data.push([node.id, node.text]);
      }
      combo.store.loadData(data);
    }
  }]
});
simpleForm.render(document.body);

核心邏輯解析

1. 定義空數組 data
2. combo.clearValue() 清空當前值，避免無效選擇
3. 遍歷 Tree 根節點子節點，將 [id, text] 推入 data
4. combo.store.loadData(data) 載入數據，ComboBox 即時更新

完整 HTML 頁面

包含 ExtJS 2.0 核心 JS/CSS、中文語言包，單檔即可運行。（見原文完整代碼）