Question

非常新的extjs 4.0。所以我可能会错误地说这个。

我有一系列嵌套面板的布局。其中一个面板是一个表单面板，我打算使用loadRecord来填充数据。我见过的大多数例子都使用类似下面的内容来加载记录。

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

但是你会在下面看到我的formpanel是嵌套的。那么如何加载表单以加载记录

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

});

所以，步骤是：

定义一个模型，该模型必须将Ext.data.Model扩展为store和表格期望日期为模型格式
创建表单面板
使用数据
使用模型实例

当表单是extjs中的停靠项时，如何实例化formpanel

1 个答案: