[JS] Sencha Touch i zapisywanie danych do pliku

[heavy1123]

Mam aplikację napisaną na bazie Sencha Touch, w której można tworzyć proste notatki (tytuł + opis), ale ona zapisuje dane do pamięci podręcznej, a chciałbym, żeby zapisywała je do jakiegoś pliku (np. txt czy php). Z góry dzięki za pomoc:

app.js

Kod:

var App = new Ext.Application({
    name: 'Sterbox',
    useLoadMask: true,
    launch: function () {

        Ext.regModel('Note', {
            idProperty: 'id',
            fields: [
                { name: 'id', type: 'int' },
                { name: 'date', type: 'date', dateFormat: 'c' },
                { name: 'title', type: 'string' },
                { name: 'narrative', type: 'string' }
            ],
            validations: [
                { type: 'presence', field: 'id' },
                { type: 'presence', field: 'title', message: 'Please enter a title for this note.' }
            ]
        });

        Ext.regStore('NotesStore', {
            model: 'Note',
            sorters: [{
                property: 'date',
                
            }],
            proxy: {
                type: 'localstorage',
                id: 'notes-app-store'
            },
            getGroupString: function (record) {
                if (record && record.data.date) {
                    return record.get('date').toDateString();
                } else {
                    return false;
                }
            }
        });

        Sterbox.views.noteEditorTopToolbar = new Ext.Toolbar({
            title: 'Edit Note',
            items: [
                {
                    text: 'Home',
                    ui: 'back',
                    handler: function () {
                        Sterbox.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
                    }
                },
                { xtype: 'spacer' },
                {
                    text: 'Save',
                    ui: 'action',
                    handler: function () {

                        var currentNote = Sterbox.views.noteEditor.getRecord();

                        Sterbox.views.noteEditor.updateRecord(currentNote);

                        var errors = currentNote.validate();
                        if (!errors.isValid()) {
                            Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
                            return;
                        }

                        var notesStore = Sterbox.views.notesList.getStore();
                        if (null == notesStore.findRecord('id', currentNote.data.id)) {
                            notesStore.add(currentNote);
                        }
                        notesStore.sync();
                        notesStore.sort([{ property: 'date', direction: 'DESC'}]);
                        Sterbox.views.notesList.refresh();
                        Sterbox.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
                    }
                }
            ]
        });

        Sterbox.views.noteEditorBottomToolbar = new Ext.Toolbar({
            dock: 'bottom',
            items: [
            { xtype: 'spacer' },
            {
                iconCls: 'trash',
                iconMask: true,
                handler: function () {

                    var currentNote = Sterbox.views.noteEditor.getRecord();
                    var notesStore = Sterbox.views.notesList.getStore();
                    if (notesStore.findRecord('id', currentNote.data.id)) {
                        notesStore.remove(currentNote);
                    }
                    notesStore.sync();
                    Sterbox.views.notesList.refresh();
                    Sterbox.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
                }
            }
        ]
        });

        Sterbox.views.noteEditor = new Ext.form.FormPanel({
            id: 'noteEditor',
            dockedItems: [Sterbox.views.noteEditorTopToolbar, Sterbox.views.noteEditorBottomToolbar],
            items: [
                {
                    xtype: 'textfield',
                    name: 'title',
                    label: 'Title',
                    required: true
                }, {
                    xtype: 'textareafield',
                    name: 'narrative',
                    label: 'Narrative'
                }
            ]
        });

        Sterbox.views.notesList = new Ext.List({
            id: 'notesList',
            store: 'NotesStore',
            grouped: true,
            emptyText: '<div style="margin:5px;">No notes cached.</div>',
            onItemDisclosure: function (record) {
                Sterbox.views.noteEditor.load(record);
                Sterbox.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
            },
            itemTpl: '<div class="list-item-title">{title}</div>' +
                '<div class="list-item-narrative">{narrative}</div>',

            listeners: {
                'render': function (thisComponent) {
                    thisComponent.getStore().load();
                }
            }
        });

        Sterbox.views.notesListToolbar = new Ext.Toolbar({
            id: 'notesListToolbar',
            title: 'My Notes',
            layout: 'hbox',
            items: [
                { xtype: 'spacer' },
                {
                    id: 'btn-new-note',
                    text: 'New',
                    ui: 'action',
                    handler: function () {
                        var now = new Date();
                        var noteId = now.getTime();
                        var note = Ext.ModelMgr.create(
                            { id: noteId, date: now, title:'', narrative:'' },
                            'Note'
                        );
                        Sterbox.views.noteEditor.load(note);
                        Sterbox.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
                    }
                }
            ]
        });

        Sterbox.views.notesListContainer = new Ext.Panel({
            id: 'notesListContainer',
            layout: 'fit',
            dockedItems: [Sterbox.views.notesListToolbar],
            items: [Sterbox.views.notesList]
        });

        Sterbox.views.viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            cardAnimation: 'slide',
            items: [Sterbox.views.notesListContainer, Sterbox.views.noteEditor]
        })
    }
});

index.html

Kod:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Notes</title>
    <script src="sencha-touch-debug.js" type="text/javascript"></script>
    <link href="sencha-touch.css" rel="stylesheet" type="text/css" />
    <link href="app.css" rel="stylesheet" type="text/css" />
    <script src="app.js" type="text/javascript"></script>  
    
</head>
<body>
<div id="loading-mask" style="margin:auto;width:200px;padding-top:50px">Loading My Notes...</div>
</body>
</html>