0

ext js グリッドの複数のインスタンスがすべて同じデータを表示するという問題があります。Ext js 4.1.1 を使用しています。

メインタブパネルがあります。そのパネルには、複数の人のタブがあります。各個人タブ内には、詳細タブと家族タブがあります。

詳細タブは、テキスト ボックス、コンボ ボックスなどを備えた単純なフォームです。ファミリ タブには、データビューとグリッドの両方があります。

一度に 1 つのユーザー タブしか開いていない場合は、すべて正常に機能します。2 番目の人が開かれるとすぐに、ファミリ タブは同じように見えます (データビューとグリッドの両方)。問題はモデルに関係しているように私には思えます。おそらく、それらはモデルの同じインスタンスを共有しているため、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クラス定義時に 1 回作成します。つまり、そのクラスからインスタンス化されたすべてのグリッドがまったく同じストアを共有します。

celleditingそのグリッドのすべてのインスタンス化でも共有される単一のプラグインも作成していることに注意してください。それは絶対にうまくいきません。インスタンス化された最初または最後のグリッドでしか編集できない可能性があります。

store一般に、 、plugins、viewConfigまたはcolumnsクラス プロトタイプのようなプロパティを設定するべきではありません。initComponent代わりに、グリッドの各インスタンス化がそれらのプロパティの一意のコピーを取得するように、そのメソッド内でそれらをオーバーライドして設定する必要があります。

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タブとストアにパラメーターを設定していないように見えます。これによりid、コンポーネントをグローバルに一意にするために使用されるため、DOM の衝突が発生します。これは、コンポーネント (タブやストアなど) をサブクラス化し、それらのクラスの複数のインスタンスを使用するときに、過去に私を悩ませました。

それぞれに一意の識別子 (個人 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 に答える