ExtJs 不会将数据加载到表单中答案

【问题标题】：ExtJs doesn't load data to a formExtJs 不会将数据加载到表单中
【发布时间】：2013-07-07 21:55:37
【问题描述】：

这是我的模特

Ext.define('Contact', {
extend : 'Ext.data.Model',
fields : [ {
    name : 'first',
    mapping : 'name.first'
}, {
    name : 'last',
    mapping : 'name.last'
}, 'company', 'email', {
    name : 'dob',
    type : 'date',
    dateFormat : 'm/d/Y'
} ]

});

这是我的商店

var store = Ext
    .create(
            'Ext.data.Store',
            {
                // alert("inside")
                // id: 'store',
                model : 'Contact',
                proxy : {
                    type : 'ajax',
                    url : 'urlForJson',
                    reader : 'json',
                    root : 'contact'
                },
                autoLoad : true
            });

这是我的表单面板

Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
    title : 'Simple Form with FieldSets',
    labelWidth : 75, 
    // url : 'save-form.php',
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    width : 340,
    bodyPadding : 5,

    layout : 'anchor', // arrange fieldsets side by side
    items : [ {
        xtype : 'fieldset',
        title : 'Contact Information',
        defaultType : 'textfield',
        defaults : {
            width : 280
        },
        items : [ {
            fieldLabel : 'First Name',
            emptyText : 'First Name',
            name : 'first'
        }, {
            fieldLabel : 'Last Name',
            emptyText : 'Last Name',
            name : 'last'
        }, {
            fieldLabel : 'Company',
            name : 'company'
        }, {
            fieldLabel : 'Email',
            name : 'email',
            vtype : 'email'
        }, {
            xtype : 'datefield',
            fieldLabel : 'Date of Birth',
            name : 'dob',
            allowBlank : false,
            maxValue : new Date()
        } ]
    } ],

    buttons : [ {
        text : 'Load',
        handler : function() {
            formPanel.getForm().load({
                url : 'xml-form-data.xml',
                waitMsg : 'Loading...'
            });
        }
    }, {
        text : 'Submit',
        disabled : true,
        formBind : true,
        handler : function() {
            this.up('form').getForm().submit({
                url : 'xml-form-errors.xml',
                submitEmptyText : false,
                waitMsg : 'Saving Data...'
            });
        }
    } ],
    renderTo : Ext.getBody()
});
var record = store.getAt(0);
 formPanel.getForm().loadRecord(record);

}

);

但这不是从商店加载数据，还有当我放这条线的时候

'formPanel.getForm().loadRecord(record);'

它也给了我这个错误 “未捕获的类型错误：无法调用未定义的方法‘getData’” 希望有人可以帮助我

【问题讨论】：

标签： java javascript json url extjs4.2

【解决方案1】：

对于一次只能显示一组数据项的东西，您不需要数据存储。

问题也可能是 Json 格式。 Json 格式应包含成功属性和数据属性。请参考以下链接

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.Action.Load

【讨论】：

【解决方案2】：

试试：

formPanel.loadRecord(record);

【讨论】：

【解决方案3】：

似乎记录未定义。你能用console.log(record)确认一下吗？

如果是这种情况，请参阅加载事件：

例如

var store = Ext.create(
    'Ext.data.Store',
    {
        // alert("inside")
        // id: 'store',
        model : 'Contact',
        proxy : {
            type : 'ajax',
            url : 'urlForJson',
            reader : 'json',
            root : 'contact'
        },
        autoLoad : false,
        listeners: {
            load: function(store, records) {
                var record = store.getAt(0);
                formPanel.getForm().loadRecord(record);
            }
        }
    }
);

然后在表单面板渲染后调用 store.load()。还要确保 formPanel 在加载事件回调中可见。如果它不可见，请将 id 添加到面板并使用 Ext.get(formId)

【讨论】：

【解决方案4】：

您的商店中应该有记录预加载的值。您可以通过 store.load() 或声明性 autoLoad: true 来实现（当您在 Ext JS 执行流程中新手时，这种方式可能会导致未发现的问题）。

【讨论】：