как создать экземпляр formpanel, когда форма является закрепленным элементом в extjs

Question

Очень плохо знаком с extjs 4.0. Так что я мог бы сформулировать это неправильно.

У меня есть макет с рядом вложенных панелей. Одна из этих панелей - это панель форм, которую я намерен использовать loadRecord для заполнения данными. Большинство примеров, которые я видел, использовали что-то вроде следующего для загрузки записей.

testForm.getForm().loadRecord(app.formStore);

Однако ниже вы увидите, что моя формпанель вложена. Итак, как мне загрузить форму, чтобы загрузить запись

                    title: 'Job Summary',
                    items: [
                        {
                            xtype: 'form',
                            id: 'formJobSummary',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            bodyPadding: 10,
                            title: '',
                            url: '/submit.html',
                            flex: 1,
                            dockedItems: [
                                {
                                    xtype: 'toolbar',
                                    flex: 1,
                                    dock: 'bottom',
                                    items: [
                                        {
                                            xtype: 'button',
                                            text: 'Submit'
                                        },
                                        {
                                            xtype: 'button',
                                            text: 'Cancel'
                                        }
                                    ]
                                }
                            ],
                            items: [
                                {
                                    xtype: 'panel',
                                    flex: 1,
                                    items: [
                                        {
                                            xtype: 'radiogroup',
                                            width: 400,
                                            fieldLabel: 'Job Type',
                                            items: [
                                                {
                                                    xtype: 'radiofield',
                                                    boxLabel: 'Fix Price'
                                                },
                                                {
                                                    xtype: 'radiofield',
                                                    boxLabel: 'Production'
                                                }
                                            ]
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Quoted Price'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Client PO'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Job Quatity'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Files Over'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Previous JobId'
                                        },
                                        {
                                            xtype: 'textfield',
                                            fieldLabel: 'Estimate'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'panel',
                                    flex: 1
                                },
                                {
                                    xtype: 'panel',
                                    layout: {
                                        align: 'stretch',
                                        type: 'hbox'
                                    },
                                    flex: 1
                                }
                            ]
                        }
                    ]
                },

Answer 1

Вот код, который показывает, как заполнить данные в formpanel:

Ext.onReady(function(){

    //Define a model with field names mapping to the form field name
Ext.define('UserModel', {
    extend: 'Ext.data.Model',
    fields: ['first', 'last']
});

    //Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
    first: 'Ajit',
    last: 'Kumar'
});

var form = Ext.create('Ext.form.Panel', {

        renderTo: Ext.getBody(),

    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',                //this name must match with the field name in the model
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, 
        disabled: true,
        handler: function() {
        }
    }]
});

form.loadRecord(user);  

});

Итак, шаги:

1. Определить модель, которая должна расширять Ext.data.Model как хранилища и форма ожидают, что дата будет в формате модели
2. Создание панели формы
3. Создание экземпляра модели с данными
4. Загрузкаданные в форме с использованием экземпляра модели