Extjs and fpweb db delete action problem
lazarus / 38-Networking and Web Programming

----------------------------------------------------------------------
bills · 2013-02-27 13:41

Dear all,im a fpweb newbie.
 
server:apache2.2, windows7, FPC 2.6.0, lazarus 1.1,Extjs 4.2

im studing the fpweb example of

lazarus\fpc\2.6.0\source\packages\fcl-
web\examples\webdata\demo\extgrid.lpi

its readme file say that this program can show,delete,update,insert db
data.
i build it,get the extusers.exe file and then copy it and users.dbf
file to the D:\apache2.2\cgi-bin directory,
then i run the url in firefox:

Code: [Select]http://localhost/cgi-bin/extusers.exe/Provider/read
i get the correct result:

Quote{ "rows" : [{ "ID" : 0, "LOGIN" : "Daniel", "NAME" : "Daniel
mantione", "EMAIL" : "daniel@freepascal.org", "LASTLOGIN" : null }, {
"ID" : 1, "LOGIN" : "Florian", "NAME" : "Florian Klaempfl", "EMAIL" :
"florian@freepascal.org", "LASTLOGIN" : null }, { "ID" : 2, "LOGIN" :
"Joost", "NAME" : "Joost van der Sluis", "EMAIL" :
"joost@freepascal.org", "LASTLOGIN" : null }, { "ID" : 3, "LOGIN" :
"Jonas", "NAME" : "Jonas Maebe", "EMAIL" : "jonas@freepascal.org",
"LASTLOGIN" : null }, { "ID" : 4, "LOGIN" : "Michael", "NAME" :
"Michael van canneyt", "EMAIL" : "michael@freepascal.org", "LASTLOGIN"
: null }, { "ID" : 5, "LOGIN" : "Marco", "NAME" : "Marco Van De
Voort", "EMAIL" : "marco@freepascal.org", "LASTLOGIN" : null }, { "ID"
: 6, "LOGIN" : "Pierre", "NAME" : "Pierre Muller", "EMAIL" :
"pierre@freepascal.org", "LASTLOGIN" : null }, { "ID" : 7, "LOGIN" :
"Tomas", "NAME" : "Tomas Hajny", "EMAIL" : "tomas@freepascal.org",
"LASTLOGIN" : null }, { "ID" : 14, "LOGIN" : "eeedd", "NAME" :
"BBBQqqq", "EMAIL" : null, "LASTLOGIN" : null }, { "ID" : 15, "LOGIN"
: "AAA", "NAME" : "BBBddd", "EMAIL" : "CCC", "LASTLOGIN" : null }],
"success" : true }
but when i run the url:

Quotehttp://localhost/cgi-bin/extusers.exe/Provider/delete/1
its result is:

Quote{ "success" : false, "message" : "No key value specified" }
The delete action is unsuccessful!!

----------------------------------------------------------------------
bills · 2013-02-28 08:22

It seems that its not the problem of fpweb,because after i change
extjs version from 4.2 to 3.4(the js app file is not same) ,this fpweb
CGI app run well.
But I failed to  make Extjs 4.2 example to fit to fpweb program.

This is the Extjs 4.2 program,restful.js,it need Extjs4.2:

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

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'ID',
        type: 'int',
        useNull: true
    }, 'LOGIN', 'NAME', 'EMAIL', 'LASTLOGIN']
});

Ext.onReady(function(){

    var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'Person',
        proxy: {
            type: 'ajax',

         api: {
              read: "/cgi-bin/extgrid.exe/Provider/Read/",
              update: "/cgi-bin/extgrid.exe/Provider/Update/",
              create: "/cgi-bin/extgrid.exe/Provider/Insert/",
              destroy: "/cgi-bin/extgrid.exe/Provider/Delete/"
         },

            reader: {
                type: 'json',
                successProperty: 'success',
                root: 'rows',
                messageProperty: 'message'
            },
            writer: {
                type: 'json',
                writeAllFields: false,
                root: 'rows'
            }
        },
        listeners: {
            write: function(store, operation){
                var record = operation.getRecords()[0],
                    name = Ext.String.capitalize(operation.action),
                    verb;
                   
                   
                if (name == 'Destroy') {
                    record = operation.records[0];
                    verb = 'Destroyed';
                } else {
                    verb = name + 'd';
                }
                Ext.example.msg(name, Ext.String.format("{0} user:
{1}", verb, record.getId()));
               
            }
        }
    });
   
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
   
    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: document.body,
        plugins: [rowEditing],
        width: 400,
        height: 300,
        frame: true,
        title: 'Users',
        store: store,
        iconCls: 'icon-user',
      //["ID","LOGIN","NAME","EMAIL", "LASTLOGIN"]
        columns: [{
            text: 'ID',
            width: 40,
            sortable: true,
            dataIndex: 'ID'
        }, {
            text: 'LOGIN',
            flex: 1,
            sortable: true,
            dataIndex: 'LOGIN',
            field: {
                xtype: 'textfield'
            }
        }, {
            header: 'NAME',
            width: 80,
            sortable: true,
            dataIndex: 'NAME',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'EMAIL',
            width: 80,
            sortable: true,
            dataIndex: 'EMAIL',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'LASTLOGIN',
            width: 80,
            sortable: true,
            dataIndex: 'LASTLOGIN',
            field: {
                xtype: 'textfield'
            }
        }],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Add',
                iconCls: 'icon-add',
                handler: function(){
                    // empty record
                    store.insert(0, new Person());
                    rowEditing.startEdit(0, 0);
                }
            }, '-', {
                itemId: 'delete',
                text: 'Delete',
                iconCls: 'icon-delete',
                disabled: true,
                handler: function(){
                    var selection =
grid.getView().getSelectionModel().getSelection()[0];
                    if (selection) {
                        store.remove(selection);
                    }
                }
            }]
        }]
    });
    grid.getSelectionModel().on('selectionchange', function(selModel,
selections){
        grid.down('#delete').setDisabled(selections.length === 0);
    });
});

And the Extjs 3.4 program, extgrid-json.js,it need Extjs 3.4:
QuoteExt.ns('FPC');

FPC.ShowPage = function () {
  var myproxy = new Ext.data.HttpProxy ( {
    api : {
      read: "/cgi-bin/extgrid.exe/Provider/Read/",
      update: "/cgi-bin/extgrid.exe/Provider/Update/",
      create: "/cgi-bin/extgrid.exe/Provider/Insert/",
      destroy: "/cgi-bin/extgrid.exe/Provider/Delete/"
    }
  });
  var myreader = new Ext.data.JsonReader ({
      root: "rows",
      idProperty: "ID",
      messageProperty: 'message', // Must be specified here
      fields: ["ID","LOGIN","NAME","EMAIL", "LASTLOGIN"]
  });
  var mywriter = new Ext.data.JsonWriter({
      encode: true,
      writeAllFields: true,
      idProperty: "ID"
  });
  var data = new Ext.data.Store({
    proxy: myproxy,
    reader: myreader,
    writer: mywriter,
    autoSave: false,
    idProperty: "ID",
  });
  // Listen to errors.
  data.addListener('exception', function(proxy, type, action, options,
res) {
    if (type === 'remote') {
        Ext.Msg.show({
            title: 'REMOTE EXCEPTION',
            msg: res.message,
            icon: Ext.MessageBox.ERROR,
            buttons: Ext.Msg.OK
        });
    }
  });
  data.load({ params:{start: 0, limit: 30}});
  var grid = new Ext.grid.EditorGridPanel({
    renderTo: Ext.getBody(),
    frame: true,
    title: "Known users",
    height: 600,
    width: 800,
    store: data,
    columns: [
      {header: 'ID', dataIndex: "ID", sortable: true, hidden: true},
      {header: 'Login', dataIndex: "LOGIN", sortable: true, editor:
new Ext.form.TextField({allowBlank: false})},
      {header: 'Name', dataIndex: "NAME", sortable: true, editor: new
Ext.form.TextField({allowBlank: false})},
      {header: 'Email', dataIndex: "EMAIL", sortable: true, editor:
new Ext.form.TextField({allowBlank: false})},
      {header: 'Last login', dataIndex: "LASTLOGIN", sortable: true,
editor: new Ext.form.TextField()},
    ],
    bbar: new Ext.PagingToolbar({
      pageSize: 30,
      store: data,
      displayInfo: true
    }),
    tbar : [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function(btn, ev) {
              var u = new grid.store.recordType();
              grid.stopEditing();
              grid.store.insert(0, u);
              grid.startEditing(0, 1);
            },
            scope: grid
        }, '-', {
            text: 'Delete',
            iconCls: 'icon-delete',
            handler: function(btn, ev) {
         var index = grid.getSelectionModel().getSelectedCell();
         if (!index) {
        return false;
         }
         var rec = grid.store.getAt(index[0]);
         grid.store.remove(rec);
         },
            scope: grid
        }, '-', {
            text: 'Save',
            iconCls: 'icon-save',
            handler: function(btn, ev) {
         grid.store.save();
       },
            scope: grid
        }
   ]
  });
  grid.show();
}
Ext.onReady(FPC.ShowPage);

----------------------------------------------------------------------
bills · 2013-03-01 05:28

I have changed the js file and now it runs well.

the js file:
QuoteExt.require(['Ext.data.*', 'Ext.grid.*']);

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'ID',
        type: 'int',
        useNull: true
    }, 'LOGIN', 'NAME', 'EMAIL'],
    validations: [{
        type: 'length',
        field: 'LOGIN',
        min: 1
    }, {
        type: 'length',
        field: 'NAME',
        min: 1
    }, {
        type: 'length',
        field: 'EMAIL',
        min: 1
    }]
});

Ext.onReady(function(){

    var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'Person',
        proxy: {
            type: 'ajax',

         api: {
              read: "/cgi-bin/extgrid.exe/Provider/Read/",
              update: "/cgi-bin/extgrid.exe/Provider/Update/",
              create: "/cgi-bin/extgrid.exe/Provider/Insert/",
              destroy: "/cgi-bin/extgrid.exe/Provider/Delete/"
         },

            reader: {
                type: 'json',
                successProperty: 'success',
                root: 'rows',
                messageProperty: 'message'
            },
            writer: {
                type: 'json',
            encode: true,
                //writeAllFields: false,
                root: 'rows'
            }
        },
        listeners: {
            write: function(store, operation){
                var record = operation.getRecords()[0],
                    name = Ext.String.capitalize(operation.action),
                    verb;
                   
                if (name == 'Destroy') {
                    record = operation.records[0];
                    verb = 'delete';
                } else if (name == 'Update') {
                    verb = 'update';
                } else if (name == 'Create') {
                    verb = 'add';
                }
            Ext.example.msg(verb, Ext.String.format("{0} user: {1}",
verb, record.get('NAME')));
            }
        }
    });
   
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
   
    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: document.body,
        plugins: [rowEditing],
        width: 400,
        height: 300,
        frame: true,
        title: 'Users',
        store: store,
        iconCls: 'icon-user',
        columns: [
         {
            text: 'LOGIN',
            flex: 1,
            sortable: true,
            dataIndex: 'LOGIN',
            field: {
                xtype: 'textfield'
            }
        }, {
            header: 'NAME',
            width: 80,
            sortable: true,
            dataIndex: 'NAME',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'EMAIL',
            width: 80,
            sortable: true,
            dataIndex: 'EMAIL',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'LASTLOGIN',
            width: 80,
            sortable: true,
            dataIndex: 'LASTLOGIN',
            field: {
                xtype: 'textfield'
            }
        }],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Add',
                iconCls: 'icon-add',
                handler: function(){
                    // empty record
                    store.insert(0, new Person());
                    rowEditing.startEdit(0, 0);
                }
            }, '-', {
                itemId: 'delete',
                text: 'Delete',
                iconCls: 'icon-delete',
                disabled: true,
                handler: function(){
                    var selection =
grid.getView().getSelectionModel().getSelection()[0];
                    if (selection) {
                        store.remove(selection);
                    }
                }
            }]
        }]
    });
    grid.getSelectionModel().on('selectionchange', function(selModel,
selections){
        grid.down('#delete').setDisabled(selections.length === 0);
    });
});

----------------------------------------------------------------------
BigChimp · 2013-03-01 06:08

Thanks for your investigation! If those files are part of the demo
(they seem to be), could you open a new issue in the bugtracker and
add a diff with the changes so it can be fixed for all users?

Please don't forget to mention the FPC version you are using (see
help/about in Lazarus)

More info:
http://wiki.lazarus.freepascal.org/How_do_I_create_a_bug_report
http://wiki.lazarus.freepascal.org/Creating_A_Patch

Thanks a lot!

----------------------------------------------------------------------
bills · 2013-03-01 13:44

Quote from: BigChimp on March 01, 2013, 07:08:35 amThanks for your
investigation! If those files are part of the demo (they seem to be),
could you open a new issue in the bugtracker and add a diff with the
changes so it can be fixed for all users?

Please don't forget to mention the FPC version you are using (see
help/about in Lazarus)

More info:
http://wiki.lazarus.freepascal.org/How_do_I_create_a_bug_report
http://wiki.lazarus.freepascal.org/Creating_A_Patch

Thanks a lot!

Ok,I'm very glad to contribute to Lazarus. I'll report this issue As
soon as possible.

----------------------------------------------------------------------
bills · 2013-03-01 14:38

I have submit the three changed client files.

----------------------------------------------------------------------
BigChimp · 2013-03-01 14:51

Thanks, bills!