Как я могу использовать DataView с DataItem в моем приложении Sencha Touch?

Question

У меня есть приложение сенсорного Сенча. (Я новичок с сенсорным Сенча!). Я пытаюсь создать диалоговое окно для добавления новой папки virtuel и поместить туда файл. Пример:

В моем главном приложении я могу выбрать файл и открыть диалоговое окно с изображением. Если диалоговое окно открыто, я хочу добавить этот выбранный файл в одну или несколько папок или создать новую папку в моем магазине.

Вот мой код:

Моя модель: для файла

Ext.define('tara.model.WorkFolder',
{
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'filePath', type: 'string' },
            { name: 'addedAt', type: 'date' },
            { name: 'size', type: 'integer' }
        ]
    }
});

Моя модель для папки:

Ext.define('tara.model.WorkFolders',
{
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'id', type: 'integer' },
            { name: 'name', type: 'string' },
            { name: 'createdAt ', type: 'date' }
        ]
    }
});

Мои магазины:

Ext.define('tara.store.WorkFolderStore',
{
    extend: 'tara.core.taraStorageStore',

    mixins: {
        translatable: "Ext.ux.Translatable"
    },

    requires: [
        'tara.model.WorkFolder',
        'tara.core.taraStorageStore'
    ],

    config: {
        model: 'tara.model.WorkFolder'
    }
});

а также

Ext.define('tara.store.WorkFoldersStore',
{
    extend: 'tara.core.taraStorageStore',

    mixins: {
        translatable: "Ext.ux.Translatable"
    },

    requires: [
        'tara.model.WorkFolders',
        'tara.core.taraStorageStore'
    ],

    config: {
        model: 'tara.model.WorkFolders',
        autoLoad: true,
        saveKey: "workfolderRecords",
        storeId: 'Workfolders'
    }
});

Вот моя диалоговая панель:

Ext.define('tara.view.AddToWorkFolderPopup', {

    extend: 'Ext.Panel',
    xtype: 'addToWorkFolderPopup',
    alias: 'widget.addToWorkFolderPopup',

    requires: [
        'tara.core.FileUtil',
        'tara.view.WorkFolderDataView',
        'tara.store.WorkFoldersStore'
    ],

...

    constructor: function()
    {
        this.callParent(arguments);

        this.setItems({
            flex:1,
            xytpe: 'container',
            items: [
                {
                xtype : 'toolbar',
                docked: 'top',
                title: this.tr("Arbeitsmappen"),
                items: [{
                    xtype: 'spacer'
                },{
                    xtype: 'button',
                    itemId: 'minimizeButton',
                    align: 'right',
                    hidden: true,
                    iconMask: true,
                    handler: this.onMinimizeButtonTapped,
                    scope: this
                }]
              },{
                    xtype: 'spacer'
                },{
                    xtype: 'component',
                    itemId: 'title',
                    margin: '4 0 0 25',
                    html: '<h3>'+this.selectedFile+'</h3>'
                },{
                    xtype: 'spacer',
                    height:20
                },{
                    xtype: 'workFolderDataView'
                },{
                    xtype: 'button',
                    height: 30,
                    margin: '4 0 0 25',
                    ui: 'confirm-filled',
                    itemId: 'syncButton',
                    maxWidth:200,
                    text: this.tr('Neue Arbeitsmappe'),
                    scope: this,
                    handler: function()
                    {

                        Ext.Msg.prompt('Arbeitsmappe Erstellen', 'Bite gebe einen namen ein:', function(workFolderTitle)
                        {
                            // Create a new workfolder for the workfolder store.
                            var workFolder = {
                                id: 1,
                                name: workFolderTitle,
                                createdAt: new Date()
                            }

                            // get current workfolder store.
                            var workFolderStore = Ext.getStore("Workfolders");
                            workFolderStore.add(workFolder);
                            workFolderStore.sync();

                        });
                    }
                }

            ]
        });
    }
});

Вот мой dataview:

Ext.define('tara.view.WorkFolderDataView',
    {
        extend: 'Ext.dataview.DataView',
        alias: 'widget.workFolderDataView',

        requires: [
            'tara.view.WorkFolderDataItem'
        ],

        mixins: [
            'Ext.ux.Translatable'
        ],

        config: {
            width:300,
            height:100,
            defaultType: 'workFolderDataItem',
            useComponents: true
        }
    });

Вот мой DataItem:

Ext.define('tara.view.WorkFolderDataItem',
    {
        extend: 'Ext.dataview.component.DataItem',
        alias: 'widget.workFolderDataItem',

        mixins: [
            'Ext.ux.Translatable'
        ],

        config: {
            padding: 10,
            layout: {
                type: 'hbox'
            },
            defaults: {
                margin: 5
            },
            items: [{
                xtype: 'checkboxfield',
                text: 'Val1'
            },{
                xtype: 'component',
                flex: 1,
                html: 'val2',
                itemId: 'textCmp'
            }]
        },

        /**
         * To save whether the last tap was a longpress tap
         */
        longPressed: false,

        /**
         * On every record update the thumbnail will be loaded and the a listener will be added, for getting if a website thumbnail gets tapped
         *
         * @param
         */
        updateRecord: function(_record)
        {
            // Provide an implementation to update this container's child items
            var me = this;

            me.down('#textCmp').setHtml(record.get('val2'));

            me.callParent(arguments);
        }
    });