2

シンプルな ExtJS 4.1 チェックボックス TreePanel があります。ツリーは単純なロジックに基づいて構築されています。

  1. いずれかのノードのすべての子ノードを選択した場合は、すべての子ノードの選択を解除し、親ノードを選択します。
  2. 親ノードを選択した場合は、すべての子ノードを選択解除します。

上記の要件を模倣する次のフィドルを使用してください。 フィドルによる例

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    renderTo: Ext.getBody(),
    width: 400,
    height: 400,
    store: {
        root: {
            expanded: true,
            children: [{
                checked: false,
                text: "1 detention",
                expanded: true,
                children: [{
                    checked: false,
                    text: '1.1 foo',
                    leaf: false,
                    children: [{
                        checked: false,
                        text: "1.1.1 India",
                        expanded: true
                    }, {
                        checked: false,
                        text: "1.1.2 Singapore",
                        expanded: true
                    }, {
                        checked: false,
                        text: "1.1.3 USA",
                        expanded: true
                    }]
                }, {
                    checked: false,
                    text: '1.2 bar',
                    leaf: true
                }]
            }, {
                checked: false,
                text: "2 homework",
                expanded: true,
                children: [{
                    checked: false,
                    text: "2.1 book report",
                    leaf: true
                }, {
                    checked: false,
                    text: "2.2 algebra",
                    expanded: true,
                    children: [{
                        checked: false,
                        text: "2.2.1 buy lottery tickets",
                        leaf: true
                    }, {
                        checked: false,
                        text: "2.2.2 buy lottery tickets 2",
                        leaf: true
                    }]
                }, {
                    checked: false,
                    text: "2.3 English report",
                    leaf: true
                }]
            }, {
                checked: false,
                text: "3 buy lottery tickets",
                leaf: true
            }]
        }
    },
    rootVisible: false,
    disableSelection: true,
    //selModel: {mode: 'SIMPLE'},
    listeners: {
        checkchange: function (record, checked, opts) {
            if (!checked) return;
            var parentNode = record.parentNode;

            // Deselect children
            function deselectChildren(record) {
                record.eachChild(function (record) {
                    record.set('checked', false);
                    deselectChildren(record);
                });
            }
            deselectChildren(record);

            // See if all siblings are selected now
            var allSiblingSelected = false;
            if (parentNode) {
                allSiblingSelected = parentNode.childNodes.reduce(function (previous, node) {
                    return previous && node.get('checked');
                }, true);
            }

            if (allSiblingSelected) {
                parentNode.set('checked', true);
                // Apparently won't fire on its own. Below line creates problem
                this.fireEvent('checkchange', parentNode, true, opts);
            }

            // Deselect ancestors
            else {
                while (parentNode) {
                    parentNode.set('checked', false);
                    parentNode = parentNode.parentNode;
                }
            }
        }
    }
});

コードを見ると、ノードのすべての兄弟が選択されているときに、親ノードの「checked」構成を手動で true に設定し、96 行目で親ノードの checkchange イベントを手動で発生させることがわかります。すべての子ノードの選択を解除します。

問題: このイベントが発生せず、ツリーによって一貫性のない結果が生成される場合があります。デバッグ ポイントを配置するか、console.log を使用すると、システムは毎回このイベントを発生させます。

私が観察した興味深いことは、コードをデバッグするか、console.log を使用してデバッグ情報を書き込むと、システムが正常に動作することです。checkchangeを使用して手動でトリガーしているときに、どういうわけかイベントが発生しないと思いますfireEvent

親ノードの「チェック済み」構成を設定したとき、または他のアプローチを使用できる場合、checkchange イベントを自動的に発生させるために必要なオプションは何ですか。

助けてください

ありがとうございました

4

0 に答える 0