Sencha Touch. NestedList move, insert, remove items

Question

My question is about how to move, insert and remove items in NestedList I have a NestedList like this:

// MODEL
Ext.define('MyApp.model.Comments', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'text',   type: 'string'}
        ]
    }
});

// NESTEDLIST
Ext.define('MyApp.view.Comments', {
    requires: [
        'Ext.data.TreeStore'
    ],

    config: {
        id: 'comments',
        store: {
            type: 'tree',
            root: {},
            model: 'MyApp.model.Comments',
            proxy: {
                type: 'ajax',
                actionMethods: {read: 'POST'},
                url: './comments.php',
                timeout: 4000,
                enablePagingParams: false,
                extraParams: {
                    action: 'get-comments'
                }
            }
        },
        displayField: 'text',

        detailCard: {
            xtype: 'container',
            layout: 'vbox',
            items: [
                {
                    id: 'comment-text-field',
                    flex: 1
                }
            ]
        },

        listeners: {
            leafitemtap: function(el, list, index, target, record) {
                var detailCard   = el.getDetailCard(),
                    text  = record.data.text,
                    commentField = detailCard.query("#comment-text-field");
                var textHtml = '<b>text: </b>' + text;
                if (commentField) {
                    commentField[0].setHtml(textHtml);
                }
            },

            destroy: function(el) {
                el.getDetailCard().destroy();
            }
        }
    }
});


// './comments.php' response
[
    {
        "text": "New comments",
        "children": [
            {
                "text": "NestedList provides a miller column interface to navigate between",
                "leaf": true
            },
            {
                "text": "The absolute bottom position of this Component; must be a valid CSS length value",
                "leaf": true
            }
        ]
    },
    {
        "text": "Checked comments",
        "children": [
            {
                "text": "Whether or not this Component is absolutely centered inside its Container",
                "leaf": true
            },
            {
                "text": "Component is absolutely centered inside its Container",
                "leaf": true
            },
            {
                "text": "More comments",
                "leaf": true
            }
        ]
    }
]

It works fine but i need to move, remove and add items in NestedList. F.e. when i open one of "New comments" (leaf item is opened and leafitemtap fired), opened item should be removed from "New comments" and inserted into "Checked comments".

I see 2 ways to do it:

Send request to update comments.php response AND update store via Sencha functionality
Send request to update comments.php response AND reload comments.php each time when some items are clicked to update NestedList

Of course 1st way is better, but I have no idea how to do at least one of them.

Hope you will help me, thsnk's!

Yaroslav Yaroslav · Accepted Answer · 2014-03-24T18:26:33

Well, looks like there is no convenient way to do that. Here is comment on official forum: http://www.sencha.com/forum/showthread.php?205097-How-to-create-a-Nested-List-with-dynamic-loading-of-each-node

Sencha Touch. NestedList move, insert, remove items

1 Answers