1. 程式人生 > >Ext入門之---動態新增樹節點

Ext入門之---動態新增樹節點

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>DynamicAddTreeNode</title>
    <script language="javascript" type="text/javascript" src="../../Scripts/Ext/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="../../Scripts/ext-all.css" />
    <script language="javascript" type="text/javascript">
        Ext.require([
            'Ext.data.*',
            'Ext.grid.*',
            'Ext.tree.*'
            ]);

        var index = 0;
        Ext.onReady(function () {
            var treePanel = Ext.create('Ext.tree.Panel', {
                title: '介面卡',
                width: 180,
                root: {
                    id: "adapter",
                    expanded: true
                },
                height: 750,
                animate: false,
                autoScroll: true,
                collapsible: true,
                rootVisible: true,
                renderTo: Ext.getBody(),
                tbar: [
                    {
                        text: '新增',
                        handler: function () {
                            var node = treePanel.getRootNode();
                            var newnode = Ext.data.NodeInterface.create({
                                text: index,
                                expanded: true,
                                checked: true,
                                leaf: true
                            });
                            newnode.text = index;
                            newnode.expanded = true;
                            newnode.leaf = true;
                            newnode.qtitle = true;
                            newnode.cls = "";
                            node.appendChild(newnode);
                            index++;
                        }
                    }
                  ]
            });
        });
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>