Results 1 to 10 of 10

Thread: grid with editing functions

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5
    Vote Rating
    0
      0  

    Default Answered: grid with editing functions

    Hello,
    i'm still a beginner and i desperate on a editing grid.

    I search for an example (not from sencha) which
    -> lays in a new row (id will be create in a database and should be direct sent to grid-store)
    -> editing a row (update)
    -> delete a row (delete)

    Everytime should be opened a php-script which connected to database, do the required work and send back a json string.
    I tried to convert the writer.js from sencha examples, but i surrender.

    Can someone help me, please? As simple as possible!

  2. If your php-scripts return valid json data after each writing operation (creating, updating or destroying), it will be automatically updated in store and then in grid. So it is not need to re-load your store after such an operation.
    Let me explain more details about this. Suppose, your store is configured with autoSync set to true.
    Below is what will happen with adding new record:
    - You add new record (without id) to your store by using grid row editing plugin.
    - Store will automaticallly generate a creating request to send this new added record to server script.
    - Your script give new record with id and updates it into database. Then it returns a json data reflecting record with new id to client under Json format.
    - On receiving returned json data, store will update its respective record and then grid update the related row. This will be done automatically by the framework, so you don't have to re-load store. The same with updating and destroying.

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    Did you check the "Row Editing Grid Example". To send request to php script, you only need to modify the proxy to use ajax proxy instead of memory proxy as in this example. Something like this:
    Code:
    var store = Ext.create('Ext.data.Store', {
        // destroy the store if the grid is destroyed
        autoDestroy: true,
        model: 'Employee',
        autoSync: true, 
        proxy: {
            type: 'ajax',
            api: {
                read: 'url points to php script for loading records',
                create: 'url points to php script for creating new record',
                update: 'url points to php script for updating existing record',
                destroy: 'url points to php script for removing record',
            },
            reader: {
                type: 'json',
                ...  
            },
            writer: {
                type: 'json'
            }
        },
        data: data,
        sorters: [{
            property: 'start',
            direction: 'ASC'
        }]
    });

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5
    Vote Rating
    0
      0  

    Default

    Yes I tried it:

    Code:
    <html>
        <head>
            <meta http-equiv=Content-Type content=text/html; charset=UTF-8? />
            <title>MassnahmenBudgetierung (Mabu)</title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
      
        
        <link rel="stylesheet" type="text/css" href="extjs/examples/shared/example.css" />
        <link rel="stylesheet" type="text/css" href="extjs/examples/ux/css/CheckHeader.css" />
        <link rel="stylesheet" type="text/css" href="includes/writer.css" />
        <script type="text/javascript" src="extjs/ext-all.js"></script>    
        <!--script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script-->    
        <!-- script type="text/javascript" src="extjs/ext-lang-de.js"></script -->    
        <script type="text/javascript" src="extjs/bootstrap.js"></script>
        <!--style type="text/css">
            .employee-add {
                background-image: url('extjs/examples/shared/icons/fam/user_add.gif') !important;
            }
    
            .employee-remove {
                background-image: url('extjs/examples/shared/icons/fam/user_delete.gif') !important;
            }
        </style-->
    <script type="text/javascript">
    
    //berprfen der Session Daten
    
    
    
    Ext.Loader.setConfig({
        enabled : true,
        paths : {
            Fake: 'jsd'  // <- do not use Ext, it is for Ext framework source
        } 
    });
    Ext.Loader.setPath('Ext.ux', '/mabu/extjs/examples/ux');
    
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*',
        'Ext.form.*',
        'Ext.ux.CheckColumn'
    ]);
    
    //{"success":true,"message":"Created record","data":{"id":11,"email":"sdfdsf@sdfsd.de","first":"asf","last":"sdfsdf"}}
    Ext.onReady(function(){
        // Define our data model
    
     Ext.define('Employee', {
        extend: 'Ext.data.Model',
        fields: [
        {name: 'fuid_konto', type: 'numeric'},
                {name: 'kontoinhaber', type: 'string'},
                {name: 'kontonummer', type: 'numeric'},
                {name: 'blz', type: 'numeric'},
                {name: 'institut', type: 'string'},
                {name: 'iban', type: 'numeric'},
                {name: 'swift', type: 'numeric'},
                {name: 'aktiv', type: 'numeric'},
                {name: 'freigegeben', type: 'numeric'}
                                                            
            ]
    
    });
    var sub = 1;
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            // destroy the store if the grid is destroyed
            autoDestroy: true,
            autoLoad: true,
            autoSync: true,
    
            model: 'Employee',
              proxy: {
                type: 'ajax',
                api: {
                    read: "includes/konto.php?pid="+sub,
                    create: "includes/konto.php?pid="+sub+"&konto=create",
                    update: "includes/konto.php?pid="+sub+"&konto=update",
                    destroy: "includes/konto.php?pid="+sub+"&konto=destroy"
                },
                reader: {
                    type: 'json',
                    successProperty: 'success',
                    //root: 'data',
                    messageProperty: 'message'
                },
                writer: {
                    type: 'json',
                    writeAllFields: false,
                    //root: 'data'
                },
                listeners: {
                    exception: function(proxy, response, operation){
                        Ext.MessageBox.show({
                            title: 'Fehler',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });
    
        var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 1,
            autoCancel: false
        });
    
        // create the grid and specify what field you want
        // to use for the editor at each column.
        
      
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [                                     {header:"fuid_konto",dataIndex:"fuid_konto",flex:1},
                                                        {header:"Inhaber",dataIndex:"kontoinhaber",flex:1,editor: {allowBlank: false}},
                                                        {header:"Kontonummer",dataIndex:"kontonummer",flex:1},
                                                        {header:"BLZ",dataIndex:"blz",flex:1},
                                                        {header:"Institut",dataIndex:"institut",flex:1},
                                                        {header:"IBAN",dataIndex:"iban",flex:1,hidden:true},
                                                        {header:"Swift",dataIndex:"swift",flex:1,hidden:true},
                                                        {header:"Aktiv",dataIndex:"aktiv",flex:1,hidden:true},
                                                        {header:"Freigabe",dataIndex:"freigegeben",flex:1,hidden:true}
    ],
          //  renderTo: 'editor-grid',
            width: 600,
            height: 400,
            title: 'Employee Salaries',
            frame: true,
            tbar: [{
                text: 'Add Employee',
                iconCls: 'employee-add',
                handler : function() {
                    rowEditing.cancelEdit();
    
                    // Create a model instance
                    var r = Ext.create('Employee', {
                        name: 'New Guy',
                        email: 'new@sencha-test.com',
                        start: new Date(),
                        salary: 50000,
                        active: true
                    });
    
                    store.insert(0, r);
                    rowEditing.startEdit(0, 0);
                }
            }, {
                itemId: 'removeEmployee',
                text: 'Remove Employee',
                iconCls: 'employee-remove',
                handler: function() {
                    var sm = grid.getSelectionModel();
                    rowEditing.cancelEdit();
                    store.remove(sm.getSelection());
                    if (store.getCount() > 0) {
                        sm.select(0);
                    }
                },
                disabled: true
            }],
            plugins: [rowEditing],
            listeners: {
                'selectionchange': function(view, records) {
                    grid.down('#removeEmployee').setDisabled(!records.length);
                }
            }
        });
    
    
        
        
                            var tab_konto = Ext.create('Ext.tab.Panel', {
                                            items: [{
                                                title: 'Stammdaten'
                                                },
                                                {
                                                title: 'Ansprechpartner'
                                            },{
                                                title: 'Adressen'
                                            },{
                                                title: 'Kontoverbindungen',
                                                   id: 'konto',
                                                items: [grid]
                                            }]
                                            ,activeTab: 'konto'
                                        });
                                        var frage =  Ext.create('Ext.window.Window', {
                                               title: 'Detailansicht Tr&auml;ger',
                                               height: 600,
                                                width: 800,
                                                
                                                items:[tab_konto]
    
                                            
                                        }).show();
        
    })
    
    
    </script>
        
        </head>
        <body>
            <div>
                <header>
                    <h1>cell_edit</h1>
                </header>
                <nav>
                    <p>
                        <a href="/">Home</a>
                    </p>
                    <p>
                        <a href="/contact">Contact</a>
                    </p>
                </nav>
                <div></div>
                <footer>
                    <p>
                        &copy; Copyright  by slibera
                    </p>
                </footer>
            </div>
        </body>
    </html>
    My problems here are:
    1: Click first time on update. he sent a create request
    2: second time it works
    3: third time he sents create and update
    4: how can i reload the store when i add a new row. i need the id from database

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    1. You should define a field in your model to be the key. If this field name is not 'id', then you should config your model with idProperty to tell model which field plays the role of key.
    2. Each time store does a sync with server, all modified records with no id will be sent in creating request. Updating request only be sent with modified records with id.
    3. After each request (creating or updating), you should returns data with id to update the data in store. In case, you creating/updating multiple records, you should config clientIdProperty for your model also. If you follow this, you don't have to re-load store. It will be automatically updated. In case you want to load data again, just call <store>.load({...})

  6. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5
    Vote Rating
    0
      0  

    Default

    Can you add your comments into the code?
    I have problems with understanding and the implementation.

    THX

  7. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5
    Vote Rating
    0
      0  

    Default

    Thx for reply! 90 % works

    But. When the php-script returns the changed store, the store is already reloaded. Already asynchronous. Sometimes it works, but ext is too fast. How can i stop the reload until php sends back the new data? Or how can i reload the store after php does his work?

    i tried it so:
    Code:
    var store = Ext.create('Ext.data.Store', {
           
            autoDestroy: true,
            autoSync: true,
    
            model: 'Employee',
              proxy: {
                type: 'ajax',
                api: {
                    read: "includes/konto.php?pid="+sub,
                    create: "includes/konto.php?pid="+sub+"&konto=create",
                    update: "includes/konto.php?pid="+sub+"&konto=update",
                    destroy: "includes/konto.php?pid="+sub+"&konto=destroy",
                    
                },
                reader: {
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    
                },
                writer: {
                    type: 'json',
                    writeAllFields: false,
                },
                listeners: {
                    exception: function(proxy, response, operation){
                        Ext.MessageBox.show({
                            title: 'Fehler',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                  ,
                
                     update: function(store, r, operation, opts) {
                         if (operation == Ext.data.Model.COMMIT) {
                             store.destroy();
                             store.load();
                         }
                     },
                    
                     create: function(store, r, operation, opts) {
                         if (operation == Ext.data.Model.COMMIT) {
                             store.reload();
                         }
                     },
                    
                     destroy: function(store, r, operation, opts) {
                         if (operation == Ext.data.Model.COMMIT) {
                             //store.reload();
                             store.destroy();
                             store.load();
                            // store.refresh();
                         }
                     }
    
    
                }
            }
        });

  8. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    If your php-scripts return valid json data after each writing operation (creating, updating or destroying), it will be automatically updated in store and then in grid. So it is not need to re-load your store after such an operation.
    Let me explain more details about this. Suppose, your store is configured with autoSync set to true.
    Below is what will happen with adding new record:
    - You add new record (without id) to your store by using grid row editing plugin.
    - Store will automaticallly generate a creating request to send this new added record to server script.
    - Your script give new record with id and updates it into database. Then it returns a json data reflecting record with new id to client under Json format.
    - On receiving returned json data, store will update its respective record and then grid update the related row. This will be done automatically by the framework, so you don't have to re-load store. The same with updating and destroying.

  9. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5
    Vote Rating
    0
      0  

    Default

    Thx for description. It is true what you say, but here is a phenomenon

    I add a new record
    Code:
                 var r = Ext.create('Employee', {
                        kontoinhaber: 'Neuer Inhaber',                 
                        active: true
                    });
                    store.insert(0, r);
    I see this in the grid
    the php-scripts works and send back the whole store

    in most cases then the line with the new record disappears. After clicking F5 i see the record.

    Sometimes i add a new record and it will be shown with the new id.

  10. #9
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    Your script should return just updated record instead of all records. Maybe you should use different scripts for each operation: script for loading, script for creating, script for updating and script for destroying.

  11. #10
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5
    Vote Rating
    0
      0  

    Default

    Thx. It works!

Posting Permissions

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