Sencha Touch。 NestedList移动​​,插入,删除项目

时间:2014-03-23 13:55:42

标签: extjs sencha-touch sencha-touch-2 nested-lists

我的问题是如何在NestedList中移动,插入和删除项目 我有一个像这样的NestedList:

// 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
            }
        ]
    }
]

它工作正常,但我需要在NestedList中移动,删除和添加项目。 F.E.当我打开其中一条&#34;新评论&#34; (叶子项目打开并且leafitemtap被解雇),打开的项目应该从&#34;新评论&#34;并插入&#34;经过检查的评论&#34;。

我看到了两种方法:

  1. 通过Sencha功能发送更新comments.php响应和更新商店的请求
  2. 发送请求以更新comments.php响应并在每次单击某些项目以更新NestedList时重新加载comments.php
  3. 当然第一种方式更好,但我不知道如何做至少其中一种。

    希望你能帮助我,thsnk's!

1 个答案:

答案 0 :(得分:0)

好吧,看起来没有方便的方法。以下是官方论坛的评论: http://www.sencha.com/forum/showthread.php?205097-How-to-create-a-Nested-List-with-dynamic-loading-of-each-node