Results 1 to 5 of 5

Thread: Checkable tree two way binding value problem

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    3

    Default Answered: Checkable tree two way binding value problem

    I create a checkable tree, and I bind array to checkable tree, then when I set the viewmodel, it works fine -- the nodes are checked. But when I check the tree node, the viewmodel hasn't changed at all.
    Here is the code:
    https://fiddle.sencha.com/#view/editor&fiddle/2mks

    app/view/Panel.js
    app/view/CheckTree.js

  2. If you mean the properties of the viewmodel then you can use formulas (I have updated the fiddle):

    Code:
    Ext.define('Fiddle.view.PanelModel', {
        extend: 'Ext.app.ViewModel',
        alias: 'viewmodel.fiddle_view_panel',
    
        formulas: {
            selectedIds: {
                bind: {
                    bindTo: '{checkTreeStore}',
                    deep: true
                },
                get: function (store) {
                    var selectedIds = [];
                    this.getStore('checkTreeStore').each(function (record) {
                        if (record.get('checked')) {
                            selectedIds.push(record.getId());
                        }
                    }, this);
                    return selectedIds;
                },
    
                set: function (selectedIds) {
                    this.getStore('checkTreeStore').each(function (record) {
                        record.set('checked', selectedIds.indexOf(record.getId()) > -1);
                    }, this);
                    return this;
    
                }
            }
        },
    
        stores: {
            checkTreeStore: {
                type: 'tree',
                root: {
                    expanded: true,
                    children: [{
                        id: 1,
                        text: 1,
                        leaf: false,
                        expanded: true,
                        checked: false,
                        children: [{
                            id: 2,
                            text: 2,
                            checked: false,
                            leaf: true
                        }, {
                            id: 3,
                            text: 3,
                            checked: false,
                            leaf: true
                        }, {
                            id: 4,
                            text: 4,
                            checked: false,
                            leaf: true
                        }, {
                            id: 5,
                            text: 5,
                            checked: false,
                            leaf: true
                        }]
                    }]
                }
            }
        }
    });

  3. #2
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    99

    Default

    Why don't you define the store in ViewModel and bind it to tree?
    Something like that:

    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

  4. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    3

    Default

    Thank you very much!
    But I want the viewmodel auto update some property when I checked the node.

    So, I add this code in checkchange event:
    Code:
    me.bind && me.bind.value && me.bind.value.owner.getView().getViewModel() && me.bind.value.owner.getView().getViewModel().set(me.bind.value.stub.name, me.value);

    And I update the code : https://fiddle.sencha.com/#view/editor&fiddle/2mks


    Is there have better way?

  5. #4
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    99

    Default

    If you mean the properties of the viewmodel then you can use formulas (I have updated the fiddle):

    Code:
    Ext.define('Fiddle.view.PanelModel', {
        extend: 'Ext.app.ViewModel',
        alias: 'viewmodel.fiddle_view_panel',
    
        formulas: {
            selectedIds: {
                bind: {
                    bindTo: '{checkTreeStore}',
                    deep: true
                },
                get: function (store) {
                    var selectedIds = [];
                    this.getStore('checkTreeStore').each(function (record) {
                        if (record.get('checked')) {
                            selectedIds.push(record.getId());
                        }
                    }, this);
                    return selectedIds;
                },
    
                set: function (selectedIds) {
                    this.getStore('checkTreeStore').each(function (record) {
                        record.set('checked', selectedIds.indexOf(record.getId()) > -1);
                    }, this);
                    return this;
    
                }
            }
        },
    
        stores: {
            checkTreeStore: {
                type: 'tree',
                root: {
                    expanded: true,
                    children: [{
                        id: 1,
                        text: 1,
                        leaf: false,
                        expanded: true,
                        checked: false,
                        children: [{
                            id: 2,
                            text: 2,
                            checked: false,
                            leaf: true
                        }, {
                            id: 3,
                            text: 3,
                            checked: false,
                            leaf: true
                        }, {
                            id: 4,
                            text: 4,
                            checked: false,
                            leaf: true
                        }, {
                            id: 5,
                            text: 5,
                            checked: false,
                            leaf: true
                        }]
                    }]
                }
            }
        }
    });
    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

  6. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    3

    Default

    Oh, thank you!!!!!!

Similar Threads

  1. Checkable Async Tree populated with SelectionModel
    By wojciech.kalkus in forum Sencha GXT 3.1
    Replies: 0
    Last Post: 29 Nov 2016, 2:17 AM
  2. GXT3.x: Filterable-checkable-tree with demo.
    By LoriSun in forum Sencha GXT Bugs
    Replies: 0
    Last Post: 8 Nov 2011, 7:40 PM
  3. [FIXED] GXT 2.0 m3 checkable tree bug?
    By ypfamily in forum Ext GWT: Bugs (2.x)
    Replies: 5
    Last Post: 25 Jun 2009, 9:00 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •