Question

在我的一个面板中，我有一个表单面板

xtype: 'form',
                                    id: 'formJobSummary',
                                    layout: {
                                        align: 'stretch',
                                        type: 'hbox'
                                    }

我希望将数据绑定到此并具有以下代码。

var form = Ext.getCmp('formJobSummary').getForm(); 
 form.loadRecord(user);

我得到： Ext.getCmp（“formJobSummary”）未定义

很明显，loadRecord超出了范围。鉴于我的架构来自设计师并且有2个文件。我在哪里放这个loadRecord语句。

MyPanel.js

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

//Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
    quotedPrice: 'test',
    name: 'test'
});


Ext.define('MyApp.view.MyPanel', {
    extend: 'MyApp.view.ui.MyPanel',

    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        me.down('button[text=Submit]').on('click',
        me.onSubmitBtnClick, me);
        me.down('button[text=Cancel]').on('click',
        me.onCancelBtnClick, me);
    },
    onSubmitBtnClick: function () {

        var conn = new Ext.data.Connection();

        var est = Ext.getCmp('estimate');
        alert(est.getValue());

        conn.request({
            method: 'POST',
            url: 'tmp.php',
            params: {
                foo: "bar"
            },
            success: function (responseObject) { alert(responseObject.responseText); },
            failure: function () { alert(est); }
        });
    },
    onCancelBtnClick: function () {

    }
});

var form = Ext.getCmp('formJobSummary').getForm(); //returns form1
form.loadRecord(user);

UI / MyPanel.js

 Ext.define('MyApp.view.ui.MyPanel', {
    extend: 'Ext.panel.Panel',

    height: 600,
    width: 950,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    title: 'JobPanel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'tabpanel',
                    activeTab: 0,
                    flex: 1,
                    items: [
                        {
                            xtype: 'panel',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            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',
                                                    id: 'quotedPrice',
                                                    name: 'quotedPrice',
                                                    fieldLabel: 'Quoted Price'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'clientPO',
                                                    name: 'clientPO',
                                                    fieldLabel: 'Client PO'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'jobQuantity',
                                                    name: 'jobQuantity',
                                                    fieldLabel: 'Job Quatity'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'filesOver',
                                                    name: 'filesOver',
                                                    fieldLabel: 'Files Over'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'previousJobId',
                                                    name: 'previousJobId',
                                                    fieldLabel: 'Previous JobId'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'estimate',
                                                    name: 'estimate',
                                                    fieldLabel: 'Estimate'
                                                }
                                            ]
                                        },
                                        {
                                            xtype: 'panel',
                                            flex: 1
                                        },
                                        {
                                            xtype: 'panel',
                                            layout: {
                                                align: 'stretch',
                                                type: 'hbox'
                                            },
                                            flex: 1
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            title: 'Parts'
                        },
                        {
                            xtype: 'panel',
                            title: 'Process'
                        },
                        {
                            xtype: 'panel',
                            title: 'Invoice'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    title: 'FooterPanel',
                    flex: 1
                }
            ]
        });

        me.callParent(arguments);
    }
});

Answer 1

在执行语句var form = Ext.getCmp('formJobSummary').getForm();期间，formJobSummary显然是未定义的（即，它不存在!!）。您的Ext.define不会创建视图实例。您尝试执行的代码位于全局范围内...这意味着它将在加载javascript文件后立即执行。理想情况下，应该在创建类的实例后调用它。

因此，您的解决方案将识别，何时您需要使用您拥有的数据加载表单。例如，您可能希望在渲染表单或单击某个按钮等时加载数据。这应该可以帮助您解决问题。

Ext.getCmp（“myForm”）是未定义的问题

1 个答案: