Ext2.0本地模式動態修改combobox選擇項

2024-07-21 02:14:03

字體：大中小

來源：轉載

供稿：網友

在很多時候，combobox的選擇項已經下載到本地，只是存儲方式不同，我們就需要動態修改combobox的選擇項。例如有一顆樹，樹的節點就是combobox的選項，在Ext2.0中樹的存儲格式不是使用store的，而combobox必須使用store，這就需要進行數據轉換。本文就以此作為例子，研究一下如何動態修改combobox的選擇項。

我們先創建一個帶幾個選項的樹：

代碼里先創建了一個樹節點root，這個將作為樹的根節點，然后加入了id分別為1、2、3、4的子節點，這4個子節點就是combobox選擇項，id是combobox的提交值，text是顯示值。

下面創建一個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%'
})

combobox使用了SimpleStore作為它的sotre，SimpleStore定義了id和text兩個字段，id作為combobox的值字段（valueField :"id"），text作為combobox的顯示字段（displayField: "text"）。Combobox的操作模式是本地模式（mode: 'local'）。

下面創建一個formpanel，將combobox放到formpanel里。還定義一個“改變選項”按鈕來改變combobox的選擇項。

我們先來測試一下頁面。頁面加載完后，combobox是沒有選擇項的，我們單擊“改變選項”按鈕，就有選擇項了。

我們來分析一下按鈕的單擊事件：

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);

在第1行，首先定義了一個空數組data。在第2行清理combobox的值狀態，避免當前選擇值不存在，不過你也可以保留，不執行這句。第3和6行通過一循環，遍歷樹根節點root的子節點，第4行取得一個子節點，在第5行將子節點的id和text組成一個數組增加到data數組中。在第7行將數據加載到combobox的store中。

是不是很簡單？呵呵。希望本文能給大家一下幫助，多謝！

本文的完整代碼：

<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>動態修改combobox選擇項例子</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
</head>
<body>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>
<script>
Ext.onReady(function() {
    Ext.QuickTips.init();
    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();
    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%'
    }) 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);
});
</script>
</body>
</html>