1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    India
    Posts
    180
    Answers
    1
    Vote Rating
    -5
    AtulDawkhare can only hope to improve

      0  

    Default Unanswered: How To Save data in Grid [with Row Editing Plugin]

    Unanswered: How To Save data in Grid [with Row Editing Plugin]


    Hi,
    I have a Grid which display data from the store. Now I want to edit the data and send it to Server to store into database.
    I have wrote code on Grid Edit event
    Code:
    grid.on('edit', function( e)         {
                alert('You are Editing'+e.record)
                
                
                 e.record.commit();
                
            });
    But still I think the page is not getting submitted on server side.
    At the time of loading the page extjs calls "PagingData.jsp" and load data, but when I clicked on the Update button, nothing happens. Please guide me if anything is wrong here.

    Can you please tell me what is missing here? Also Can you please tell me the flow how it works in the background?

    Here is the code
    Store
    Code:
    var store = Ext.create('Ext.data.Store', {
            pageSize: 10,
            model: 'ForumThread',
            remoteSort: true,
            proxy: {
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                autoSave: true,
                type: 'jsonp',
                url: 'PagingData.jsp?',
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                },
                 writer: writer,
                // sends single sort as multi parameter
                simpleSortMode: true
            },
            sorters: [{
                property: 'Updated_date',
                direction: 'DESC'
            }]
        });
    Grid
    Code:
    var grid = Ext.create('Ext.grid.Panel', {
            width: 700,
            errorSummary:false, 
            height: 500,
            title: 'Project Listing Grid',
            store: store,
            disableSelection: true,
            loadMask: true,
            viewConfig: {
                id: 'gv',
                trackOver: false,
                stripeRows: false,
                plugins: [{
                    ptype: 'preview',
                    bodyField: 'excerpt',
                    expanded: true,
                    pluginId: 'preview'
                }]
            },
            // grid columns
            columns:[{
                // id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
                // TODO: This poses an issue in subclasses of Grid now because Headers are now Components
                // therefore the id will be registered in the ComponentManager and conflict. Need a way to
                // add additional CSS classes to the rendered cells.
                id: 'topic',
                flex:1,
                text: "Project Title",
                dataIndex: 'title',
                sortable: true,
                editor: {
                    // defaults to textfield if no xtype is supplied
                    allowBlank: false
                }
            }, {
                text: "Created on",
                dataIndex: 'Created_date',
                width: 220,
                align: 'right',
                renderer: rendercreatedon,
                sortable: true,
                 field: {
                    xtype: 'datefield',
                    allowBlank: false,
                    format: 'm/d/Y',
                    minValue: '01/01/2006',
                    minText: 'Cannot have a start date before the company existed!',
                    maxValue: Ext.Date.format(new Date(), 'm/d/Y')
                }
            },{
                id: 'last',
                text: "Updated on ",
                dataIndex: 'Updated_date',
                width: 220,
                renderer: renderupdatedon,
                sortable: true,
                 field: {
                    xtype: 'datefield',
                    allowBlank: false,
                    format: 'm/d/Y',
                    minValue: '01/01/2006',
                    minText: 'Cannot have a start date before the company existed!',
                    maxValue: Ext.Date.format(new Date(), 'm/d/Y')
                }
            }],
            plugins: [rowEditing],
            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display",
                items:[
                    '-', {
                    text: 'Show Preview',
                    pressed: pluginExpanded,
                    enableToggle: true,
                    toggleHandler: function(btn, pressed) {
                        var preview = Ext.getCmp('gv').getPlugin('preview');
                        preview.toggleExpanded(pressed);
                    }
                }]
            }),
            renderTo: 'topic-grid'
        });

  2. #2
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,317
    Answers
    58
    Vote Rating
    23
    arthurakay has a spectacular aura about arthurakay has a spectacular aura about arthurakay has a spectacular aura about

      0  

    Default


    record.commit() doesn't automatically tell the data store to send it's data to the server. It only makes a local change to the model being edited.

    I think you're looking for the sync() method on the data store:
    - http://docs.sencha.com/ext-js/4-0/#!...re-method-sync
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    India
    Posts
    180
    Answers
    1
    Vote Rating
    -5
    AtulDawkhare can only hope to improve

      0  

    Default


    Thanks for the reply.
    But I have written writer for the store, So ideally it should submit the request.
    May be I am wrong here. Please guide me.

    Also , for now I have done something on edit event.

    Code:
        grid.on('edit', function( e) 
            {
                   Ext.Ajax.request({
                        url: '/GridDemo',
                        method: 'POST',
                        params: 'update=true&id='+e.record.get('id')+'&title='+e.record.get('title')+'&update_date='+Ext.Date.format(e.record.get('Updated_date'), 'Y-m-d')+'&created_date='+Ext.Date.format(e.record.get('Created_date'), 'Y-m-d'),
                        success: function(obj) {
                        var resp = obj.responseText;
                            if (resp != 0) {
                                Ext.MessageBox.alert('Success',' Processed');
                            } else {
                            Ext.MessageBox.alert('Failed', 'No Processed');
                            }
                        }
                       });
              
            });
    Now through this I am able to submit my request to server.

    So want to know , It is the correct way to submit the request to server? Please guide me on this.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    208
    Answers
    2
    Vote Rating
    0
    bee is on a distinguished road

      0  

    Default


    in store define autosync : true in config.

    I observered u used autosave not sure it works in extjs4 I hope this helps.

  5. #5
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,317
    Answers
    58
    Vote Rating
    23
    arthurakay has a spectacular aura about arthurakay has a spectacular aura about arthurakay has a spectacular aura about

      0  

    Default


    You certainly can submit a request in the "edit" event as you have posted... but I still don't understand why you don't have the data store do the work for you (via the sync() method).

    It doesn't matter if you've defined a writer for your store or not...
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    India
    Posts
    180
    Answers
    1
    Vote Rating
    -5
    AtulDawkhare can only hope to improve

      0  

    Default


    Hey Thanks for this.It really works for me.Now as you suggested ,I have modified the code
    Code:
       grid.on('edit', function(editor, e) 
            {
                alert(editor.store)
                editor.store.sync();
       }
    And The store is

    Code:
     var store = Ext.create('Ext.data.Store', {
            pageSize: 10,
            model: 'ForumThread',
            remoteSort: true,
            proxy: {
                autoSave: true,
                autoSync:true,
                type: 'ajax',
                api: {
                    create  : '/GridDemo',
                    read    : '/GridDemo',
                    update  : '/GridDemo?update=true',
                    destroy : '/GridDemo'
                    },
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                },
                simpleSortMode: true
            },
            sorters: [{
                property: 'Updated_date',
                direction: 'DESC'
            }]
        });
    Now The request is getting send on the another page, after clicking on Update button of the Row-editor Plug in.
    One problem i am facing that, on the forwarded page I am not getting all the values, of the edited row.
    Please suggest Do I need to send the each value of the record? in Query String
    something like

    /GridDemo?id=xyz&title=xyz

    Please guide me.

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar