ExtJS弹出窗口表单数据加载

时间:2012-01-15 09:49:48

标签: extjs extjs3

我使用网格面板。当我在网格中选择行时,我得到以下结果:

  • 如果我在'document.body'中渲染表单,一切正常,并且表单 字段已填满。
  • 如果我,同一个表单在窗口面板中启动,表单字段为空。
  • 当我同时使用两者时,在'document.body'中呈现的Form是 关闭,并填充窗口中的表单字段。

我犯错的地方。

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

  1. method添加到表单配置
  2. 显示窗口后加载数据
  3. 以下是第二个解决方案的代码:

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