ExtJS Pop-up Window Form data loading

Question

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

• If I render the Form in 'document.body' everything is OK, and form fields are filled.
• If I, same Form start in Window panel, Form fields are empty.
• When I use both, Form which is rendered in the 'document.body' is closed, and Form fields in Window are filled.

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"}]}

Answer 1

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

Answer 2

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();