1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    224
    Vote Rating
    9
    dedoz will become famous soon enough

      0  

    Default Ext Direct update / delete

    Ext Direct update / delete


    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 ?




  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,047
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    224
    Vote Rating
    9
    dedoz will become famous soon enough

      0  

    Default


    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()

    Code:
       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

    Code:
    /*
    
    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();
        });
    });

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    25
    Vote Rating
    0
    danielleng is on a distinguished road

      0  

    Default


    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

Thread Participants: 2