Results 1 to 4 of 4

Thread: Ext Direct update / delete

  1. #1
    Sencha User
    Join Date
    Dec 2011

    Default 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!/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 (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
    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
    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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    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 @LikelyMitch

    Check out my GitHub:

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

  3. #3
    Sencha User
    Join Date
    Dec 2011


    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);
        var sm = grid.getSelectionModel();
        /*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
    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:
    If you are unsure which license is appropriate for your use, please contact the sales department at
    Ext.onReady(function() {;
        Ext.define('PersonalInfo', {
            extend: '',
            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('', {
            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: [
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                //creating, add items
                items: [{
                    iconCls: 'add',
                    text: 'Add',
                    handler: function() {
                        // 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);
                        var sm = grid.getSelectionModel();
                        alert(    'new :'+store.getNewRecords().length+
                                ' update:'+store.getUpdatedRecords().length+
                                ' removed:'+store.getRemovedRecords().length);
        grid.on('edit', function(e) {

  4. #4


    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...

    And see this too. The API is a good place for info. Although not very complete...!...cfg-idProperty

Posting Permissions

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