ExtJS 弹窗表单数据加载答案

【问题标题】：ExtJS Pop-up Window Form data loadingExtJS 弹窗表单数据加载
【发布时间】：2012-02-10 17:36:55
【问题描述】：

我使用网格面板。当我选择网格中的行时，我得到以下结果：

如果我在“document.body”中呈现表单，一切正常，并且表单字段已填写。
如果我在窗口面板中启动相同的表单，则表单字段为空。
当我同时使用两者时，在“document.body”中呈现的表单是关闭，并填写 Window 中的表单字段。

我犯错的地方。

// 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 数据

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

【问题讨论】：

标签： extjs extjs3

【解决方案1】：

我建议对代码进行以下更改：

在 TextField 上使用 id 属性（例如，id：'subject'）代替使用 name 属性（name：'subject'）
只是好奇....因为您正在处理网格上的 rowselect 事件，您可能希望在表单面板中加载选定的记录，而不是再次加载它。如果是这种情况，那么您可以在表单面板上调用 loadRecord() 方法并将记录对象传递给它，然后在窗口上调用 show() 方法

【讨论】：

【解决方案2】：

我发现当load 在表单上被调用时，ExtJS 会尝试访问form dom 元素以确定表单method。我找到了 2 个解决方案：

在表单配置中添加method
显示窗口后将数据加载到窗体

这是第二种解决方案的代码：

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

【讨论】：