Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 21

Thread: CRUD example

  1. #11

    Default

    Tanks for your reply...

    My store is:

    Code:
    var storeOperatori = new Ext.data.JsonStore({
            autoDestroy: true,
            root: 'operatori',
            //totalProperty: 'numerochiamate',
            idProperty: 'id_utente',
            remoteSort: true,
            fields: [
                {name: 'id_utente'},
                'nome',
                'cognome',
                'mail',
                'tel',
                'fax',
                'ambiti',
                'id_webapp',
                'webapp',
                'ip',
                {name: 'attivo', type: 'bool'}
            ],
            proxy: new Ext.data.HttpProxy({
                url: 'url.php',
                method: 'GET'
            })
        });
    My grid in the column model part is:
    Code:
    columns: [
                      {header:"Id Utente", dataIndex: 'id_utente', editor: id_editor, sortable: true, width: 20},
                      {header:"Nome", dataIndex: 'nome', editor: nome_editor},
                      {header:"Cogome", dataIndex: 'cognome', editor: cognome_editor, sortable: true},
                      {header:"Mail", dataIndex: 'mail', editor: mail_editor},
                      {header:"Telefoni", dataIndex: 'tel', editor: tel_editor},
                      {header:"Fax", dataIndex: 'fax', editor: fax_editor},
                      {header:"Ambiti", dataIndex: 'ambiti', editor: ambiti_editor, hidden: true},
                      {header:"App. WEB", dataIndex: 'webapp', hidden: true},
                      {header:"IP", dataIndex: 'ip', editor: ip_editor},
                      {header:"Attivo", dataIndex: 'attivo', sortable: true}
                  ],
    ...

    this the listener with afteredit event:

    Code:
    listeners: {
                      afteredit: function(e){
                            var conn = new Ext.data.Connection();
                            //console.log(e.record);
                            conn.request({
                                    url: 'url.php',
                                    method: 'GET',
                                    params: {
                                          action: 'update',
                                          table: 'ch_operatori',
                                          id: e.record.id,
                                          field: e.field,
                                          value: e.value
                                    },
                                    success: function (resp, opt){
                                          e.record.commit();
                                          
                                    },
                                    failure: function (resp, opt){
                                          e.record.reject();
                                    }
                            });
                      }
                  }
    Here in my new record creation I call a remote script with:

    Code:
    handler : function(){
                            var conn = new Ext.data.Connection();
                            conn.request({
                                  url: 'url.php',
                                  method: 'GET',
                                  params: {
                                        action: 'insert',
                                        table: 'ch_operatori',
                                        nome: 'Nuovo Operatore...'
                                  },
                                  success: function (resp, opt){
                                        
                                        var insert_id = Ext.util.JSON.decode(
                                            resp.responseText
                                        ).insert_id;
                                        
                                        // access the Record constructor through the grid's store
                                        var Operatore = gridOperatori.getStore().recordType;
                                        var o = new Operatore({
                                            id_utente:insert_id,
                                            nome: 'Nuovo Operatore...',
                                            cognome: '',
                                            mail: '@...',
                                            telefono: '',
                                            fax: '',
                                            ambiti: '',
                                            ip: ''
                                        });
                                        gridOperatori.stopEditing();
                                        //Inserisco la nuova riga nella griglia
                                        storeOperatori.insert(0, o);
                                        gridOperatori.startEditing(0, 0);
                                        // Raggiungo l'elemento di indice 0 dello store...
                                        //var record = storeOperatori.indexOfId(0);
                                        //var grid = Ext.getCmp('myEditorGrid');
                                        var selected = gridOperatori.getSelectionModel().getSelectedCell();
                                        var record = gridOperatori.store.getAt(selected[0]);
                                        console.log(record);
                                        //... e gli assegno ilvalore insert_id restituito dalla pagina php di inserimento
                                        //record.set('id', insert_id);
                                        console.log(record);
                                  },
                                  failure: function (resp, opt){
                                        Ext.messaggi.msg('Attenzione','impossibile inserire un nuovo operatore');
                                  }
                            });
                            
                        }
    When I press the button the page is called with the action to insert a new row, I insert a row with the _dc parameter that is numeric and random... the row in my database is inserted with id and the field: 'name' and it's ok.

    From php I return this json: {"success":true,"insert_id": 1251465352449}

    I'cant to make insert id the current id of the row inserted in the grid...

    If I try to change any fiel in the row just inserted I send: id: ext-record-630 (the id of the phantom object....)

    This not chang in my new inserted id here:
    Code:
    // access the Record constructor through the grid's store
                                        var Operatore = gridOperatori.getStore().recordType;
                                        var o = new Operatore({
                                            id_utente:insert_id,
                                            nome: 'Nuovo Operatore...',
                                            cognome: '',
                                            mail: '@asl1.liguria.it',
                                            telefono: '',
                                            fax: '',
                                            ambiti: '',
                                            ip: ''
                                        });
    but just assign the inserted_id to the ID in the data object....

    TX

  2. #12

    Default

    This looks to me like it ought to be an almost-universal situation... IDs are quite routinely defined by the server, never by the client. So there has to be some way for the "phantom" (client-generated, pseudo) IDs that you're talking about to be cleanly replaced in the store by whatever IDs are assigned by the host.

    How, indeed is this done? The question seems straightforward enough. Can ExtJS do this (oh, of course it can...), but where's the clean example? The interaction with the back-end server should quite routinely provide (in this case) a "record-ID is" response, and the store should quite-routinely make its adjustments. But where's the clean example of how to do this?

    ("It ain't done until the documentation's done ...")

  3. #13

    Default

    I've solved with:

    Code:
    success: function (resp, opt){ //<--when server side response with success
                                        
              var insert_id = Ext.util.JSON.decode(
                    resp.responseText
              ).insert_id;  // <--- I take the server side id inserted and passed back w. JSON
                                        
              var o = new storeOperatori.recordType({newRecord:true});  // <--- find the s. record type and createa new instance
              o.id = insert_id;    //<-- I assign the server generated id at the phantom obj 
              // and not at the field named id in the data obj....  B)
              gridOperatori.stopEditing();   // <-- I stop editing
              storeOperatori.insert(0, o);   // <-- I insert my new record obj as first in the store
              gridOperatori.startEditing(0, 0);   //<-- I restart editing the first record at the first field
    Thepart in bold missing in my previous scripts.....

    Hope this can help someone...

    Regards
    Filippo

  4. #14

    Default

    Well, it isn't at all obvious to me how this solution is supposed to work. It appears to me that you have created a new, presumably blank, record on the server-side, obtained its ID, and then inserted that ID into a new, blank record in the client store.

    What I do not see happening here ... and believe me, I want to! ... is the "phantom" record ID being replaced in the data-store by the real ID just obtained.

    In looking at this issue myself, I can see that indeed ExtJS understands the notion of "phantoms" and one can easily determine that a particular record is ghostly. Plainly, the only way to get the host record-ID is for the host-method to return it as part of its reply structure. But the step that I have not yet found is how a client-side record then loses its "phantom" designation, and just how much "automagic" support there is for that notion, i.e. in the Store object.

    I feel like, "well, if I'm seeing ghosts, then obviously these issues have been well thought-out by the implementors and I just haven't stumbled-upon it yet.

  5. #15

    Default

    What you want to do is simple possible in Extjs:

    When client side a record is generated you can assign it an ID:

    Code:
    var newRecord = new JsonStore.recordType({
    newRecordId : Ext.id()
    });
    
    var selectedCell = myGrid.getSelectionModel().getSelectedCell();
    var selectedRowIndex = selectedCell[0];
    JsonStore.insert(selectedRowIndex, newRecord);
    myGrid.startEditing(selectedRowIndex,0);
    the you have to pass it (or every new generated ID for your new inserted rows) at server side script, and wait to the response of a JSON with both client-side generate and server side generated IDs, something like:

    Code:
    {
    success : true,
    records : [
    {
    newRecordId : 'ext-gen75',
    id : 12343
    }
    ]
    }
    In the success:

    Code:
    success : function(response) {
    JsonStore.commitChanges();
    var result = Ext.decode(response.responseText);
    Ext.each(result.records, function(o) {
    var rIndex = JsonStore.find('newRecordId', o.newRecordId);
    var record = JsonStore.getAt(rIndex);
    record.set('id', o.id);
    delete record.data.newRecordId;
    });
    }
    You can do like above or assign a new unique id at the new row immediately (calling immediately the server side generation) like I do in my previous post....

    Regards
    Filippo

  6. #16

    Default

    You are inserting the record successfully and trying to update the client side record with new generated id. But when you try updating the record again , that becomes another call from writer to update event. That definitely fails since the existing phantom id doesn't exist at server side. You need to send back the fake success message to client if the record id is a phantom.

    workaround :

    I refreshed the grid store data again after the insertion of record, so that the store always have the latest id generated at server side.

    Updation of record will not create any problem in that case.

  7. #17

  8. #18

    Default

    I stumbled-upon "Ext.DataReader.Realize" and the (undocumented?) method "Store.OnCreateRecord."

    Apparently if you just return a list of records, including at least the "ID" field you designated and any other field-values you wish to change, those values will be merged into the store record and the record will automagically be re-filed under the ID supplied by the server.

    See: "Ext.data.store" source-code, method "reMap()."

  9. #19
    Sencha User bkraut's Avatar
    Join Date
    Nov 2007
    Location
    Maribor, Slovenia
    Posts
    403

    Default

    Hi,

    reading this, I also followed the upper link. Generally each object in other programming languages receives objectId which is not record id.

    When a new record in extjs is created the id field is populated with default 'ext-???'. The case is when this value is submitted on the server side I get an error, while 'ext-???' can not be converted into a numeric id that we use. Of cource we could parse the id values ubmitted, but this is a seriously wrong. I think, the extjs should allow empty ids, and handle record updates through some objectId.

  10. #20
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    I raised this issue about IDs for tabs and other components as well. I was told my use case was obscure, but I described the same case as here.

    You want to open a tab with a form in it for some record in the database that hasn't been created yet. When you submit the form, the server stores the record and assigns an ID to it. What you really want to do is change the ID of the tab and the title of the tab. The user has just typed in some text in a title text field, after submitting the record, there's the tab's new title. The server has just assigned a record id, that is what you want the tab's ID to be.

    Why? Because you have a grid that has the record displayed in it with the new ID. Double click on the row in the grid to open the record and ... you want to find the tab with that ID and activate it.

    The solution is bookkeeping outside of the component ID system, but it's a waste of memory and CPU power to do the bookkeeping twice.

    And you can't just do:
    Ext.ComponentMgr.remove(tab);
    tab.id = new_id;
    Ext.ComponentMgr.add(tab);

    Because there are items[] arrays all over the place that refer to the old ID.

Page 2 of 3 FirstFirst 123 LastLast

Tags for this Thread

Posting Permissions

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