ExtJS 4.2 -绑定网格到FieldSet - FieldSet没有更新- MVC

Question

我有一个网格，它从商店的服务调用(SOAP/XML)中填充。网格填充得很好；但是，当我在网格中选择一个项时，我试图将该值绑定到一个FieldSet。

在选择网格中的项时，我调试并看到模型选择的项已经正确更新，但是当我执行loadRecord时，FieldSet不会更新。我没有收到任何错误，但是FieldSet没有更新。

这是我的代码样本。我正试图尽可能地最小化它，因为我正在使用MVC，并且我的应用程序正在变得越来越大。

PhoneCallsModel.js -

Ext.define('DG.model.PhoneCallsModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'employeeSsn'},
        {name: 'callRsn'},
        {name: 'callDt'},
        {name: 'callType'},
        {name: 'callFor'},
        {name: 'callerName'},
        {name: 'callNoteDesc'}
    ]
});

PhoneCallsStore.js -

Ext.define('DG.store.PhoneCallsStore', {
    extend: 'Ext.data.Store',
    config: {
        storeId: 'phoneCallsStore',
        model: 'DG.model.PhoneCallsModel',
        autoLoad: false
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'xml',
            root: 'return',
            record: 'contents',
            employeeSsn: '@employeeSsn',
            callRsn: '@callRsn',
            callDt: '@callDt',
            callType: '@callType',
            callFor: '@callFor',
            callerName: '@callerName',
            callNoteDesc: '@callNoteDesc'
        }
    }
});

我动态加载商店..。只是一个小屁孩。没有问题加载数据或在网格中显示数据。

我有几个ViewPort，我用它有多个页面。在我的控制器中，我创建了一个新的ViewPort，并添加了包含网格和FieldSet表单的主面板。

SearchCommand.js -

Ext.define('DG.controller.SearchCommand', {
    extend: 'Ext.app.Controller',
    init: function () {
        this.control({
            'searchView button': {
                searchData: this.doSearch }
        });
    },

    doSearch: function (caseID) {
        if (caseID) {
            Ext.create(Ext.container.Viewport, {
                requires: [
                    'DG.view.PhoneCallsDataGrid',
                    'DG.view.PhoneCallNoteView'
                ],

                items: [
                    {
                        xtype: 'phoneCallsView'
                    }
                ]
            });
        }
    }
});

PhoneCallsView.js -

Ext.define('DG.view.PhoneCallsView', {
    extend: 'Ext.form.Panel',
    alias: 'widget.phoneCallsView',
    renderTo: Ext.getBody(),
    height: 800,
    border: 0,
    bodyPadding: 5,
    layout: 'column',    // Specifies that the items will now be arranged in columns
    frame: true,

    fieldDefaults: {
        labelAlign: 'left',
        msgTarget: 'side'
    },

    items: [
        {
            x: 10,
            y: 177,
            xtype: 'phoneCallsDataGrid',
            itemId: 'getDataGridSelection',
            height: 225,
            width: 1175,
            action: 'getSelectedItem'
        },
        {
            x: 10,
            y: 225,
            xtype: 'phoneCallNoteView',
            height: 200,
            width: 1175
        },
        {
            x: 10,
            y: 480,
            xtype: 'button',
            itemId: 'getDataButton',
            text: 'Refresh',
            action: 'getData'
        }
    ]
});

PhoneCallsDataGrid.js -

Ext.define('DG.view.PhoneCallsDataGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.phoneCallsDataGrid',
    store: 'PhoneCallsStore',
    title: 'Phone Call List',
    columnLines: true,
    border: false,
    selType: 'rowmodel',
    loadMask: true,
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],

    initComponent: function () {
        this.columns = [
            {header: 'Case SSN', dataIndex: 'employeeSsn'},
            {header: 'Call Reason', dataIndex: 'callRsn'},
            {header: 'Call Receive Date', dataIndex: 'callDt'},
            {header: 'Call Type', dataIndex: 'callType'},
            {header: 'Call For', dataIndex: 'callFor'},
            {header: 'Caller Name', dataIndex: 'callerName'},
            {header: 'Callback Number', dataIndex: 'callbackNo'},
            {text: 'Notes', header: 'Notes', dataIndex: 'callNoteDesc', width: 475,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }
        ];

        this.callParent(arguments);
    }
});

PhoneCallNoteView.js -

Ext.define('DG.view.PhoneCallNoteView', {
    extend: 'Ext.form.FieldSet',
    alias: 'widget.phoneCallNoteView',
    xtype: 'form',

    margin: '0 0 0 10',

    title: 'Phone Call Details',

    defaults: {
        width: 1100
    },

    defaultType: 'textfield',

    items: [
        {
            id: 'callNoteDesc',
            fieldLabel: 'Note',
            name: 'callNoteDesc'
        }
    ]
});

现在，我有一个Controller (我删除了一些不需要的内容)，init上有一个监听器，用于在phoneCallsDataGrid上进行选择更改：

PhoneCallsCommand.js -

Ext.define('DG.controller.PhoneCallsCommand', {
    extend: 'Ext.app.Controller',
    stores: ['PhoneCallsStore'],
    models: ['PhoneCallsModel'],
    views: ['PhoneCallsView',
        'PhoneCallsDataGrid',
        'PhoneCallNoteView'],

    refs: [
        {
            ref: 'phoneCallNoteView',
            selector: 'form'
        }
    ],

    init: function () {
        this.control({
            'phoneCallsDataGrid': {
                selectionchange: this.gridSelectionChange,
                viewready: this.onViewReady
            }
        });
    },

    gridSelectionChange: function (model, records) {
        debugger;

        if (records[0]) {
            this.getPhoneCallNoteView().loadRecord(records[0]);
        }
    },

    onViewReady: function (grid) {
        debugger;

        grid.getSelectionModel().select(0);
    }
});

在gridSelectionChange上，我看到模型具有正确的选定项数据，并且记录也是正确的。我在做以下操作时没有任何错误：

this.getPhoneCallNoteView().loadRecord(records[0]);

下面是调试方法gridSelectionChange时数据的样子。您可以看到记录看起来很好，而且模型看起来也很好(我编辑了一些我不想在屏幕截图上显示的个人信息)：

​

​

​

​

但是，callNoteDesc字段没有显示Notes。您知道发生了什么事，以及如何正确地将Grid绑定到FieldSet注释中吗？

谢谢

Answer 1

Ext.form.FieldSet没有方法loadrecord，Ext.form.panel有。

我想说，您需要为表单做一个参考，并更改如下：

this.getPhoneCallNoteView().loadRecord(records[0]);

对此：

this.getPhoneCallsView().loadRecord(records[0]);