Question

我有一个从商店的服务调用（SOAP / XML）填充的网格。网格填充良好;但是，当我在Grid中选择一个项目时，我试图将该值绑定到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'
        }
    }
});

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

我有几个ViewPort用于拥有多个页面。在我的Controller中，我正在创建一个新的ViewPort并添加包含Grid和FieldSet表单的主Panel。

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上它有一个listeCallsDataGrid上的selectionchange监听器：

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时的数据。您可以看到记录看起来很好，而且模型看起来也不错（我编辑了一些我不想在屏幕截图中显示的个人信息）：

screenshot of data

screenshot of model

但是，callNoteDesc字段未显示Notes。知道发生了什么，以及如何从网格笔记正确绑定到FieldSet注意事项？

由于

Answer 1

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

我要说你需要为表格做一个参考并改变它：

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

到此：

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

ExtJS 4.2 - 将网格绑定到FieldSet - FieldSet未更新 - MVC

1 个答案: