0

加载表单时，我需要将 json 对象中的数据加载到表单面板中，我的代码是这样的

这是我的数据模型

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 : 'http://localhost:8090/extjs-crud-grid-spring-hibernate/contact/view.action',
                    reader : 'json',
                    root : 'contact'
                },
                autoLoad : true
            });

这是我的表单面板

Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
    title : 'Simple Form with FieldSets',
    labelWidth : 75, // label settings here cascade unless
    // overridden
    // 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()
        } ]
    } ],    
    renderTo : Ext.getBody()
}); 
var record = store.getAt(0);

formPanel.getForm().loadRecord(record);

});

这是我的 json 格式

{
  "contact": {
    "name": {
      "first": "Aaron",
      "last": "Conran"
    },
    "company": "Ext JS",
    "email": "support@sencha.com",
    "state": "OH",
    "dob": "04/15/2007"
  }
}

当我尝试输入这一行“formPanel.getForm().loadRecord(record)”时，它给了我这个错误“Uncaught TypeError: Cannot call method 'getData' of undefined”，而且这不会将数据加载到加载时的表单面板

希望有人能帮助我

4

1 回答 1

0

Are you getting data in record variable. Please refer below example...

Instances of this class are only created by a Form when loading.

Response Packet Criteria

A response packet must contain:

  • success property : Boolean
  • data property : Object

The data property contains the values of Fields to load. The individual value object for each Field is passed to the Field's setValue method.

JSON Packets

By default, response packets are assumed to be JSON, so for the following form load call:

var myFormPanel = new Ext.form.FormPanel({
    title: 'Client and routing info',
    items: [{
        fieldLabel: 'Client',
        name: 'clientName'
    }, {
        fieldLabel: 'Port of loading',
        name: 'portOfLoading'
    }, {
        fieldLabel: 'Port of discharge',
        name: 'portOfDischarge'
    }]
});
myFormPanel.getForm().load({
    url: '/getRoutingInfo.php',
    params: {
        consignmentRef: myConsignmentRef
    },
    failure: function(form, action) {
        Ext.Msg.alert("Load failed", action.result.errorMessage);
    }
});

a success response packet may look like this:

{
    success: true,
    data: {
        clientName: "Fred. Olsen Lines",
        portOfLoading: "FXT",
        portOfDischarge: "OSL"
    }
}

while a failure response packet may look like this:

{
    success: false,
    errorMessage: "Consignment reference not found"
}

Other data may be placed into the response for processing the Form's callback or event handler methods. The object decoded from this JSON is available in the result property.

于 2013-07-10T06:19:54.393 回答