1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    23
    Vote Rating
    0
    kuzi is on a distinguished road

      0  

    Default fill form with data from database after clicking row in the grid

    fill form with data from database after clicking row in the grid


    Hi,

    I'm working on populating form with values from database. When I click row in the grid, I get ID which I send to database by ajax request. In response, I get the values which I want to put inside form. I'm trying to add them by Ext.getCmp('name_of_the_textfield').setValue(received_value) method, but I can't do it. I found in the samples this: Ext.getCmp("form").getForm().loadRecord(rec); on grid-row selection, but I need filling fields from database. What is proper instruction to fill textfields of the form with data from database? Is it better to use load method on row click listener
    Code:
     
    Ext.getCmp('param_values').load({
    url: 'db.php',
    params: {IDanalysis: IDanalysis}
    });
    or ajax request?

    Here is my code:

    Code:
    var IDanalysis;
     
    var pef;
    var mef75;
    var mef50;
    var mef25;
     
    AnalysisListingGrid =  new Ext.grid.GridPanel({
         id: 'AnalysisListingGrid',
         store: AnalysisDataStore,
         cm: AnalysisColumnModel,
         border: false,
         listeners: { 
          rowdblclick: function(grid, rowIndex, e)  {
          IDanalysis = AnalysisDataStore.getAt(rowIndex).data.IDanalysis;
          Ext.getCmp('chartDetail').setDataURL("./charts.php?IDanalysis="+IDanalysis,true);
     
         Ext.Ajax.request({   
          waitMsg: 'Wait...',
          url: 'param_values.php',
          params: {IDanalysis: IDanalysis}, 
          success: function(response){              
            var result = response.responseText.split(",");
            pef = eval(result[0]);
            mef75 = eval(result[1]);
            mef50 = eval(result[2]);
            mef25 = eval(result[3]);
           //here I would like to use Ext.Cmp() to fill the form with above values (pef,mef75,mef50,mef25)
     
          },
          failure: function(response){
                   var result=response.responseText;
                   Ext.MessageBox.alert('Failure','Failure');         
                } 
         });
        }
      }
    });

    The form in border layout:
    Code:
    ...
    items: [{
              layout: 'form',
              id: 'param_values',
              border: false,
              items: [{
               layout: 'column',
               columnWidth: .25,
               border: false,           
               items: [
                new Ext.form.TextField({
                 fieldLabel: 'PEF',
                 labelWidth: 70,
                 name: 'pef',
                 id: 'pef',
                 width: 150
                }),
                new Ext.form.TextField({
                 fieldLabel: 'MEF75%',
                 labelWidth: 70,
                 name: 'mef75',
                 id: 'mef75',
                 width: 150
                }),
                new Ext.form.TextField({
                 fieldLabel: 'MEF50%',
                 labelWidth: 70,
                 name: 'mef50',
                 id: 'mef50',
                 width: 150
                }),
                new Ext.form.TextField({
                 fieldLabel: 'MEF25%',
                 labelWidth: 70,
                 name: 'mef25',
                 id: 'mef25',
                 width: 150
                })
               ]
         }]
    }]
    ...
    Thanks in advance for help!

    Chris

  2. #2
    Ext User
    Join Date
    Jul 2008
    Posts
    23
    Vote Rating
    0
    kuzi is on a distinguished road

      0  

    Default


    I put a new field in JsonReader object which refers to data I need from database. It works OK.

    Code:
    Ext.getCmp('pef').setValue(AnalysisDataStore.getAt(rowIndex).data.flow_params);

  3. #3
    Ext User
    Join Date
    Mar 2009
    Location
    Russia, Rostov-on-Don
    Posts
    6
    Vote Rating
    0
    Mikle Heavy is on a distinguished road

      0  

    Default same trouble

    same trouble


    I got a same trouble - filling form with data after doubleclick on grid row.
    My code is:

    Code:
     
    
    inboxAllEditorGrid - is a Ext.grid.EditorGridPanel
    inboxAllDatastore - is a Ext.data.Store
    inboxAllForm - ID of Ext.FormPanel
    
     // Обрабатываем двойной клик
      inboxAllEditorGrid.on('rowdblclick', function(grid, rowIndex, e) {
            var selectedId = inboxAllDatastore.getAt(rowIndex).id;
     
    
                Ext.getCmp('inboxAllForm').load({
                waitMsg: 'Подождите...',
                url:'/data/inbox.all.get.message.php',
                params:{unit:selectedId},
                success : function() 
                {
                 inboxAllWindow.show();
                }
                });
                
                });
    The trouble is: during execution this segment of code firebug tells me "this.form.el is undefined". What is wrong?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    name the form Fields the same name as the Record Fields.

    Then use http://extjs.com/deploy/dev/docs/?cl...ber=loadRecord

  5. #5
    Ext User
    Join Date
    Mar 2009
    Location
    Russia, Rostov-on-Don
    Posts
    6
    Vote Rating
    0
    Mikle Heavy is on a distinguished road

      0  

    Question


    While reading a book "ExtJS in Action" I have found this example on page 57:

    Code:
    movie_form.getForm().load({
    url:'data/movie.php',
    params:{
    id: 1
    }
    });
    And try to do so. But something went wrong.

    My code is

    Code:
                Ext.getCmp('_inboxAllForm_').getForm().load({
    //            inboxAllForm.getForm().load({
                waitMsg: 'Подождите...',
                url:'/data/inbox.all.get.message.php',
                params:{unit:selectedId},
                success : function() 
                {
                 inboxAllWindow.show();
                },
                failure: function(response){
                   var result=response.responseText;
                   Ext.MessageBox.alert('Failure',result);         
                } 
                });
    While doubleclick a recieve an error (see attached pic.)
    So, question is - which the element is undefined?
    inboxAllForm? - It was defined above.
    Where is the problem might be?
    Attached Images

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I thought you wanted to load from the Grid?

    In which case, call your input fields the right thing, and pull the data in from the selected row!

  7. #7
    Ext User
    Join Date
    Mar 2009
    Location
    Russia, Rostov-on-Don
    Posts
    6
    Vote Rating
    0
    Mikle Heavy is on a distinguished road

      0  

    Default


    Yes, I try to load data into the form by doubliclicking on a grid row. But my grid has only 5 fields (no more needed), and my form has a 12 fields, include textarea with a lot of text. I think there is no reason to get all of this data from server for filling a grid. Thats because I'm using that kind of loading data to a form.
    I can't understand, why I get this strange error. No suggestions....
    What do you think about that?

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Send all your fields to the Store.

    You only need to create columns for 5 of them even if the Record has all 12!

    Then you just load the form directly from the Record.

  9. #9
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    62
    Vote Rating
    4
    team.avesta is on a distinguished road

      0  

    Default


    hey....having one question.... var selectedId = inboxAllDatastore.getAt(rowIndex).id.....what is the "id" in this line??