Results 1 to 2 of 2

Thread: Store doesn't save(), just load()

  1. #1
    Sencha User Gr3yh0und's Avatar
    Join Date
    Aug 2011
    Location
    Germany
    Posts
    10

    Default Answered: Store doesn't save(), just load()

    Hey guys,
    I'm developing my first application and I'm running into a problem with my tries with a form.
    So there is a grid and I have buttons for create/remove entries. I now added a form to add a entry.

    Code:
        Ext.define('Location', {
            extend: 'Ext.data.Model',
            fields: ['id', 'idcity', 'idrange', 'name', 'street', 'postal', 'city', 'comment']
        });
    
    
        var columns_location = [
        { id: 'xid', header: 'ID', dataIndex: 'id', flex: 1, sortable: true, editor: {allowBlank: false} },
        { id: 'xidcity', header: 'IDcity', dataIndex: 'idcity', flex: 1, sortable: true, editor: {allowBlank: false} },
        { id: 'xidrange', header: 'IDrange', dataIndex: 'idrange', flex: 1, sortable: true, editor: {allowBlank: false} },
        { id: 'xname', header: 'name', dataIndex: 'name', flex: 1, sortable: true, editor: {allowBlank: false} },
        { id: 'xstreet', header: 'street', dataIndex: 'street', flex: 1, sortable: true, editor: {allowBlank: false} },
        { id: 'xpostal', header: 'postal', dataIndex: 'postal', flex: 1, sortable: true, editor: {allowBlank: false} },
        { id: 'xcitys', header: 'city', dataIndex: 'city', flex: 1, sortable: true, editor: {allowBlank: false} },
        ];
    
    var proxy_location = new Ext.data.proxy.Ajax({
            type: 'ajax',
            autoSave: true,
            url: 'config/api.php',
            // Which actions to use for each method
            extraParams: {
                select: 'id, idcity, idrange, name, street, postal, city',
                table:    'location',
                where:    ''
            },
            actionMethods: {
                read:         'POST',
                update:     'POST',
                create:     'POST',
                destroy:     'POST'
            },
            // Reader plugin
            reader: {
                type:             'json',
                model:             'Location',
                root:             'results',
                totalProperty:     'total',
                idProperty:     'id'
            },
            // Writer plugin
            writer: {
                type:         'json',
                model:         'Location',
                root:         'results',
                encode:     'true'    // important to get JSON formated data
                
            },
            // URLs to query for each action
            api: {
                read:        'config/api.php?do=read',
                update:     'config/api.php?do=update',
                create:     'config/api.php?do=create',
                destroy:     'config/api.php?do=destroy'
            }
        });
    
        var store_location = new Ext.data.Store({
            model: 'Location',
            autoLoad: true,
            pageSize: 25,
            proxy: proxy_location
        });
    
    var win;
            function showContactForm() {
                if (!win) {
                    var form = Ext.widget('form', {
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        border: false,
                        bodyPadding: 10,
                        fieldDefaults: {
                            labelAlign: 'top',
                            labelWidth: 100,
                            labelStyle: 'font-weight:bold'
                        },
                        defaults: { margins: '0 0 10 0'    },
                        // Textfields
                        items: [ {
                            xtype: 'textfield',
                            fieldLabel: 'Lokationskuerzel im Format: AAA000-0',
                            allowBlank: false
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Bezeichnung',
                            id: 'name',
                            allowBlank: false
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Uebergeordneter Standort',
                            allowBlank: false
                        },{
                            xtype: 'fieldcontainer',
                            fieldLabel: 'Adresse',
                            labelStyle: 'font-weight:bold;padding:0',
                            layout: 'hbox',
                            defaultType: 'textfield',
    
                            fieldDefaults: { labelAlign: 'top' },
    
                            items: [{
                                flex: 3,
                                name: 'street',
                                fieldLabel: 'Strasse',
                                allowBlank: true
                            }, {
                                flex: 1,
                                name: 'postal',
                                fieldLabel: 'PLZ',
                                margins: '0 0 0 5',
                                allowBlank: true
                            }, {
                                flex: 2,
                                name: 'city',
                                fieldLabel: 'Ort',
                                allowBlank: false,
                                margins: '0 0 0 5',
                                allowBlank: true
                            }]
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'IP Range',
                            allowBlank: true
                        },{
                            xtype: 'textareafield',
                            fieldLabel: 'Kommentar',
                            labelAlign: 'top',
                            flex: 1,
                            margins: '0',
                            allowBlank: true
                        }],
    
                        buttons: [{
                            text: 'Abbrechen',
                            handler: function() {
                                this.up('form').getForm().reset();
                                this.up('window').hide();
                            }
                        }, {
                            text: 'Erstellen',
                            handler: function() {
                                if (this.up('form').getForm().isValid()) {
                                    // In a real application, this would submit the form to the configured url
                                    //this.up('form').getForm().submit();
    
                                    var r = Ext.ModelManager.create({
                                        id: 'id22',
                                        idcity: '11',
                                        idrange: '11',
                                        idregion: '11',
                                        name: '11',
                                        street: '11',
                                        postal: '11',
                                        city: '11',
                                        comment: '11'
                                    }, 'Location');
                                    store_location.insert(0, r);
                                    store_location.save();
                                    this.up('form').getForm().reset();
                                    this.up('window').hide();
                                    Ext.MessageBox.alert('Success!', 'Die neue Lokation bla wurde erfolgreich angelegt!');
    
                                    
                                    //store_location.load();
                                }
                            }
                        }]
                    });
    
                    win = Ext.widget('window', {
                        title: 'Neue Lokation erstellen',
                        closeAction: 'hide',
                        width: 300,
                        height: 550,
                        minHeight: 400,
                        layout: 'fit',
                        resizable: true,
                        modal: true,
                        items: form
                    });
                }
                win.show();
                
            }
            
            
            // Create Location Grid panel
            var grid_location = Ext.create('Ext.grid.Panel', {
                title: 'Lokationen',
                store: store_location,
                columns: columns_location,
                frame: false,
                width: 800,
                height: 587,
                loadMask: true,
                dockedItems: [{
                    // Paging
                    xtype: 'pagingtoolbar',
                    store: store_location,
                    dock: 'bottom',
                    displayInfo: true,
                    pageSize: 25
                },{ 
                    xtype: 'toolbar',
                    dock: 'top', 
                    items: [{ 
                        // Create Button
                        xtype: 'button', 
                        text: 'Erstellen', 
                        iconCls: 'employee-add', 
                        handler: showContactForm
                    },{
                        // Delete Button
                        xtype: 'button', 
                        text: 'Entfernen', 
                        iconCls: 'employee-remove', 
                        handler: function() {
                            var sm = grid_location.getSelectionModel();
                            rowEditing.cancelEdit();
                            store_location.remove(sm.getSelection());
                            sm.select(0);
                            store_location.save();
                        }
                    }] 
                }],
                listeners: {
                    'selectionchange': function(view, records) {
                        //grid.down('#removeGrid').setDisabled(!records.length);
                    },
                    'edit': function(data){
                        store_location.save();
                        //if(result !== '1'){ Ext.MessageBox.alert('Error','Could not save data!'); }
                    }
                }
            });
            
        
            
            
            // Create Tabs with everything
            Ext.create('Ext.tab.Panel', {
            renderTo: 'editor-grid',
            activeTab: 0,
            width: 800,
            height: 600,
            plain: true,
            layout: 'fit',
            border: true,
            closable: false,
            defaults :{
                autoScroll: true,
                layout:'fit'
            },
            items: [ grid_overview, grid_city, grid_location ]
        });
    Any ideas? The entry is in the local store in the browser, but there is no usual CREATE event as JSON to the server

  2. Store doesn't have a save method, only the Model does. Store does have a sync method.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Store doesn't have a save method, only the Model does. Store does have a sync method.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •