0

我遇到了一个 ext js 网格的多个实例都显示相同数据的问题。我正在使用 Ext js 4.1.1。

我有一个主标签面板。在该面板中，有多个人员选项卡。每个人选项卡内都有一个详细信息选项卡和一个家庭选项卡。

详细信息选项卡是一个带有文本框、组合框等的简单表单。家庭选项卡具有数据视图和网格。

如果一次只打开一个人选项卡，则一切正常。一旦打开第二个人，家庭选项卡看起来相同（数据视图和网格）。在我看来，这个问题与模型有关。也许他们共享模型的同一个实例，这导致一次刷新就改变了所有数据。数据视图和网格都有相同的问题，但我认为如果我可以解决网格的问题，那么我可以应用相同的逻辑来修复数据视图。除非它变得相关，否则我将把数据视图的代码排除在这个问题之外。

PersonTab.js

Ext.require('Client.view.MainTab.PersonDetailsForm');
Ext.require('Client.view.MainTab.PersonFamilyForm');
Ext.require('Client.view.MainTab.EventForm');

Ext.define('Client.view.MainTab.PersonTab',
{
    extend: 'Ext.tab.Panel',
    waitMsgTarget: true,
    alias: 'widget.MainTabPersonTab',
    layout: 'fit',
    activeTab: 0,
    tabPosition: 'bottom',
    items:
        [
            {
                title: 'Details',
                closable: false,
                xtype: 'MainTabPersonDetailsForm'
            },
            {
                title: 'Family',
                closable: false,
                xtype: 'MainTabPersonFamilyForm'
            },
            {
                title: 'page 3',
                closable: false,
                xtype: 'MainTabEventForm'
            }
        ]
});

MainTabPersonFamilyForm.js

Ext.require('Client.view.MainTab.PersonFamilyHeadOfHouseholdDataView');
Ext.require('Client.view.MainTab.PersonFamilyGrid');

Ext.define('Client.view.MainTab.PersonFamilyForm',
{
    extend: 'Ext.form.Panel',
    alias: 'widget.MainTabPersonFamilyForm',
    waitMsgTarget: true,
    padding: '5 0 0 0',
    autoScroll: true,
    items:
        [
            {
                xtype: 'displayfield',
                name: 'HeadOfHouseholdLabel',
                value: 'The head of my household is:'
            },
            {
                xtype: 'MainTabPersonFamilyHeadOfHouseholdDataView'
            },
            {
                xtype: 'checkboxfield',
                boxLabel: "Use my Head of Household's address as my address",
                boxLabelAlign: 'after',
                inputValue: true,
                name: 'UseHeadOfHouseholdAddress',
                allowBlank: true,
                padding: '0 20 5 0'
            },
            {
                xtype: 'MainTabPersonFamilyGrid'
            }
        ],
    config:
        {
            idPerson: ''
        }
});

MainTabPersonFamilyGrid.js

Ext.require('Client.store.PersonFamilyGrid');
Ext.require('Ext.ux.CheckColumn');

Ext.define('Client.view.MainTab.PersonFamilyGrid',
{
    extend: 'Ext.grid.Panel',
    alias: 'widget.MainTabPersonFamilyGrid',
    waitMsgTarget: true,
    padding: '5 0 0 0',
    xtype: 'grid',
    title: 'My Family Members',
    store: Ext.create('Client.store.PersonFamilyGrid'),
    plugins: Ext.create('Ext.grid.plugin.CellEditing'),
    viewConfig:
        {
            plugins:
                {
                    ptype: 'gridviewdragdrop',
                    dragGroup: 'PersonFamilyGridTrash'
                }
        },
    columns:
        [
            { text: 'Name', dataIndex: 'Name'},
            { text: 'Relationship', dataIndex: 'Relationship', editor: { xtype: 'combobox', allowblank: true, displayField: 'display', valueField: 'value', editable: false, store: Ext.create('Client.store.Gender') }},
            { xtype: 'checkcolumn', text: 'Is My Guardian', dataIndex: 'IsMyGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true }},
            { xtype: 'checkcolumn', text: 'I Am Guardian', dataIndex: 'IAmGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true } }
        ],
    height: 200,
    width: 400,
    buttons:
        [
            {
                xtype: 'button',
                cls: 'trash-btn',
                iconCls: 'trash-icon-large',
                width: 64,
                height: 64,
                action: 'trash'
            }
        ]
});

PersonFamilyGrid.js（商店）

Ext.require('Client.model.PersonFamilyGrid');

Ext.define('Client.store.PersonFamilyGrid',
{
    extend: 'Ext.data.Store',
    autoLoad: false,
    model: 'Client.model.PersonFamilyGrid',
    proxy:
        {
            type: 'ajax',
            url: '/Person/GetFamily',
            reader:
                {
                    type: 'json'
                }
        }
});

PersonFamilyGrid.js（模型）

Ext.define('Client.model.PersonFamilyGrid',
{
    extend: 'Ext.data.Model',
    fields:
        [
            'idFamily',
            'idPerson',
            'idFamilyMember',
            'Name',
            'Relationship',
            'IsMyGuardian',
            'IAmGuardian'
        ]
});

来自控制器的相关代码：

....
....
var personTab = thisController.getMainTabPanel().add({
     xtype: 'MainTabPersonTab',
     title: dropData.data['Title'],
     closable: true,
     layout: 'fit',
     tabpanelid: dropData.data['ID'],
     tabpaneltype: dropData.data['Type']
});

personTab.items.items[0].idPerson = dropData.data['ID'];
personTab.items.items[1].idPerson = dropData.data['ID'];

thisController.getMainTabPanel().setActiveTab(personTab);
....
....
4

2 回答 2

4

您将 设置store为网格原型上的属性并在类定义时创建一次。这意味着从该类实例化的所有网格都将共享完全相同的存储。

请注意，您还创建了一个cellediting插件，该插件也将与该网格的所有实例共享。那肯定行不通。您可能只能在实例化的第一个或最后一个网格中进行编辑。

通常，您不应该在类原型上设置 、 或 之类store的属性plugins。相反，您应该在该方法中覆盖并设置它们，以便网格的每个实例化都获得这些属性的唯一副本。viewConfigcolumnsinitComponent

Ext.define('Client.view.MainTab.PersonFamilyGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.MainTabPersonFamilyGrid',
    waitMsgTarget: true,
    padding: '5 0 0 0',
    title: 'My Family Members',
    height: 200,
    width: 400

    initComponent: function() {
        Ext.apply(this, {
            // Each grid will create its own store now when it is initialized.
            store: Ext.create('Client.store.PersonFamilyGrid'),
            // you may need to add the plugin in the config for this
            // grid
            plugins: Ext.create('Ext.grid.plugin.CellEditing'),
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragGroup: 'PersonFamilyGridTrash'
                }
            },
            columns: /* ... */
        });

        this.callParent(arguments);
    }
});
于 2013-04-03T23:53:46.110 回答
0

很难准确判断，但从您提交的代码看来，您没有id在选项卡和商店​​上设置参数，这会导致 DOM 冲突，因为 DOMid用于使组件全局唯一。过去，当子类化组件（例如选项卡和商店​​）并使用这些类的多个实例时，这让我感到悲痛。

尝试给每个人一个唯一的标识符（例如人员 ID），然后使用该 ID 引用它们：

var personTab = thisController.getMainTabPanel().add({
    id: 'cmp-person-id',
    xtype: 'MainTabPersonTab',
    ...

store: Ext.create('Client.store.PersonFamilyGrid',
{
    id: 'store-person-id',
    ...
});

Ext.getCmp('cmp-person-id');

Ext.StoreManager.lookup('store-person-id');

希望有帮助。

于 2013-04-03T03:30:29.420 回答