CODEWITHSUNDEEP
extjsextjs3
Goran
Goran

Reputation: 17

ExtJS Pop-up Window Form data loading

I use Grid panel. When I select the row in the grid I get the following results:

Where I make mistake.

// Grip panel part
sm: new Ext.grid.RowSelectionModel({
        singleSelect: true,
        listeners: {
                    rowselect: function(sm, index, record) {deleteWindow.show();}
                   }
        })  
// End Grid panel part      

var myForm = new Ext.form.FormPanel({
        title:"Basic Form",
        width:425,
        frame:true,
        items: [
            new Ext.form.TextField({
                id:"to",
                fieldLabel:"To",
                width:275,
                allowBlank:false,
                blankText:"Please enter a to address",
                     readOnly: true
            }),
            new Ext.form.TextField({
                id:"subject",
                fieldLabel:"Subject",
                width:275,
                allowBlank:false,
                blankText:"Please enter a subject address",
                readOnly: true
            }),
        ],
        buttons: [
            {text:"Cancel"},
            {text:"Save"}
        ]
    });

var deleteWindow = new Ext.Window({
        id: 'id_deleteWindow',
        title: 'Delete',
        closable:true,
        width: 750,
        height:     380,
        plain:true,
        layout: 'fit',
        items: myForm
});

var id_test = 2;  // This is only for this problem

//myForm.render(document.body);  // When using this code everything is ok, and form fields are filled


myForm.getForm().load({
                url:'ggg.php',
                params:{
                        id: id_test
                         }
});

JSON data

{success:true,results:[{"id_test":"1","to":"a","subject":"aa"}]}

Upvotes: 0

Views: 9570

Answers (2)

Krzysztof
Krzysztof

Reputation: 16130

I figured out that when load is called on form, ExtJS tries to access form dom element to determine form method. I've found 2 solutions:

  1. Add method to the form config
  2. Load data to form after window is showed

Here is code for second solution:

var deleteWindow = new Ext.Window({
    id: 'id_deleteWindow',
    title: 'Delete',
    closable:true,
    width: 750,
    height:     380,
    plain:true,
    layout: 'fit',
    items: myForm,
    listeners: {
        show: function() {
            var form = this.items.get(0);
            form.getForm().load({
                url:'ggg.php',
                params:{
                    id: id_test
                }
            });
        }
    }
});
deleteWindow.show();

Upvotes: 0

Ajit Kumar
Ajit Kumar

Reputation: 627

I would suggest the following changes to the code:

  1. In place of using the id property on the TextField (say, id: 'subject'), use name property (name: 'subject')
  2. Just curious....since you are handling the rowselect event on the grid, you might want to load the selected record in the form panel rather than loading it again. If this is the case, then you may call the loadRecord() method on the form panel and pass the record object to it and then call the show() method on the window

Upvotes: 0

Related Questions