Ext Direct update / delete

[dedoz]

Hi, im new to ExtJs and im evaluating this library to develop a commercial project (prolly goin to buy to get premium support but first wanted to try it out) sorry for my bad english , still learning

im using extjs-4.0.7-gpl and i followed guide
http://docs.sencha.com/ext-js/4-0/#!/guide -> Ext Direct and Grid

First sad thing was seeing the guide with a mix of code from ext3 and not with the "best practices" and "file structure" for ext4 (mvc), scares not having good documentation if you are goin to develop a big commercial proyect.

After i build the example using my own sql server and databases.
second sad thing was to know it doesnt work in firefox, gives me the error that is posted in sencha forums
http://www.sencha.com/forum/showthre...ull=1&langid=4 (happens sometimes)

most ppl in my company uses pc with firefox or IE and some mobile devices.
so i had to run my example code in IE 8 and Chrome and runs without problems.
its running in http://dacow.no-ip.org/extTest/ref2/
The code is the same as the guide i mentioned, just modified the columns for my own simple DB table.
You can view source code in that page and see everthing is just like in the guide.

Create records works fine (cheked in the server database and the new record was there)
Update and delete records wont work, always creates a new record.
i saw the httprequest params and i saw that ExtJs always sends a "createRecord" to the server

When i dbl click a record, modify the text and press Update (in the row editor) the library sends
{"action":"QueryDatabase","method":"createRecord","data":[{"rubId":27,"rubNom":"pescaditos2"}],"type":"rpc","tid":3}
Says method : createRecord, when im updating a record.
happens the same when deleting one.
in the server database it adds new records when updating or deleting using extjs grid.

its been hours trying to get this work. can someone help me ?

[mitchellsimoens]

About the tutorial... I scanned through it and didn't see any Ext JS 3 code.

After you delete/update a record, have you looks at the Store to see if the records are in the correct property. The store keeps take of the modifications.

[dedoz]

in the delete function (activated after pressing a button "del") i added a alert to see the store new records, the records that are updated and the deleted ones. Added this alert before and after the store.remove()

   alert('Before - new :'+store.getNewRecords().length+
          ' update:'+store.getUpdatedRecords().length+
          ' removed:'+store.getRemovedRecords().length);
                 
    rowEditing.cancelEdit();
    var sm = grid.getSelectionModel();
    store.remove(sm.getSelection());
    /*store.sync();  added a comment to this just to prevent modifications in the DB while testing*/ 
                    
     alert('After - new :'+store.getNewRecords().length+
             ' update:'+store.getUpdatedRecords().length+
             ' removed:'+store.getRemovedRecords().length);

it shows
Before - new : 18 update:0 removed:0
After - new : 17 update:0 removed:0

it is correct that is showing Before - new:18 when i havent added new records ? and its correct that in After removed:0 when i have deleted a record using the store.remove() ?

im totally lost i guess this is a simple example of deleting records and i cant do it

this is the full code of grid.js

/*

This file is a modified version of direct-grid.js in the Ext JS 4 package.

Copyright (c) 2011 Sencha Inc

Contact:  http://www.sencha.com/contact

GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/

Ext.require([
    'Ext.direct.*',
    'Ext.data.*',
    'Ext.grid.*'
]);

Ext.onReady(function() {
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
    
    Ext.define('PersonalInfo', {
        extend: 'Ext.data.Model',
        fields: [{name:'rubId',type:'int'}, 'rubNom'],
        proxy: {
            type: 'direct',
            api: {
                create:    QueryDatabase.createRecord,
                read: QueryDatabase.getResults,
                update:    QueryDatabase.updateRecords,
                destroy: QueryDatabase.destroyRecord
            }
        }
    });
    
    var store = Ext.create('Ext.data.Store', {
        model: 'PersonalInfo',
        autoLoad: true
    });
        
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });
    
    var alphaSpaceTest = /^[-\sa-zA-Z]+$/;
    
    Ext.apply(Ext.form.field.VTypes, {
        //  vtype validation function
        alphaSpace: function(val, field) {
            return alphaSpaceTest.test(val);
        },
        alphaSpaceText: 'Not a valid state. Must not contain numbers.',
        alphaSpaceMask: /^[-\sa-zA-Z]+$/
    });
    
    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        height: 450,
        width: 700,
        cls: 'grid',
        title: 'Lista de Rubros',
        store: store,
        columns: [{
            dataIndex: 'rubId',
            width: 50,
            text: 'ID'
        }, {
            dataIndex: 'rubNom',
            flex: 1,
            text: 'Name',
            allowBlank: false,
            field: {
                type: 'textfield',
                allowBlank: false
            }
        }],
        renderTo: Ext.getBody(),
        plugins: [
            rowEditing
        ],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            //creating, add items
            items: [{
                iconCls: 'add',
                text: 'Add',
                handler: function() {
                    rowEditing.cancelEdit();
                    // create a blank record from PersonalInfo
                    var record = Ext.create('PersonalInfo');
                    //insert at top
                    store.insert(0, record);
                    //edit at row 0
                    rowEditing.startEdit(0, 0);
                }
            }, {
                iconCls: 'delete',
                text: 'Delete',
                handler: function() {
                    
                    alert(    'new :'+store.getNewRecords().length+
                            ' update:'+store.getUpdatedRecords().length+
                            ' removed:'+store.getRemovedRecords().length);
                    
                    rowEditing.cancelEdit();
                    var sm = grid.getSelectionModel();
                    store.remove(sm.getSelection());
                    /*store.sync();*/
                    
                    alert(    'new :'+store.getNewRecords().length+
                            ' update:'+store.getUpdatedRecords().length+
                            ' removed:'+store.getRemovedRecords().length);
                    
                }
            }]
        }]
    });
    
    grid.on('edit', function(e) {
        e.record.save();
    });
});

[danielleng]

In your model's config try specifying the property
{
idProperty: 'rubId'
}

Every model needs to have an unique ID field, just like a database record. The default name for the id is "ID"... but i assume yours is "RubId" instead. Try adding the property above to manually specify that your unique ID is 'rubId'....

And please take a look at this... RakaGod has taken the trouble to update the tutorial to extjs 4.0 mvc...
http://www.sencha.com/forum/showthread.php?156365-Ext.-Direct-and-Grid-Tutorial-Code-updated-to-ExtJs-4-Architecture-from-version-3.

And see this too. The API is a good place for info. Although not very complete...
http://docs.sencha.com/ext-js/4-0/#!...cfg-idProperty