0

我有一个从商店的服务调用 (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'
        }
    }
});

我动态加载商店……仅供参考。加载数据或在网格中显示数据没有问题。

我有几个 ViewPort 用于拥有多个页面。在我的控制器中，我正在创建一个新的 ViewPort 并添加包含 Grid 和 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'
        }
    ]
});

现在，我有一个控制器（我删除了这篇文章不需要的一堆东西），它在初始化时有一个监听器，用于 phoneCallsDataGrid 上的 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 时数据的样子。您可以看到记录看起来不错，模型看起来也不错（我编辑了一些我不想在屏幕截图上显示的个人信息）：

数据截图

模型截图

但是， callNoteDesc 字段不显示注释。知道发生了什么以及如何正确地从 Grid Notes 绑定到 FieldSet Note？

谢谢

4

1 回答 1

0

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

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

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

对此：

this.getPhoneCallsView().loadRecord(records[0]);
于 2013-08-13T06:46:44.910 回答