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
    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:


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

  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. How to customize the icon of Tree using checkable?
    By DavidHoffer in forum Sencha GXT Q&A
    Replies: 2
    Last Post: 7 Dec 2013, 1:25 AM
  3. GXT3.x: Filterable-checkable-tree with demo.
    By LoriSun in forum Sencha GXT Bugs
    Replies: 0
    Last Post: 8 Nov 2011, 7:40 PM
  4. [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
  •