ExtJS：当我点击展开时，Widget Combo重置所有字段的值

Posted 2021-05-06

我正在使用treePanel，其中一列使用widgetColumn与组合内部单元格。

以下是示例代码。

{
    text: 'TC',
    dataIndex: 'scrTC',
    xtype: 'widgetcolumn',
    widget: {
        xtype: 'combo',
        store: 'TCStore',
        valueField: 'value',
        displayField: 'displayValue',
        matchFieldWidth: false,
    }
}

当我更改几行的组合值，然后展开网格中的其他子项时，所有组合值再次重置为默认值。不确定这里是什么问题。

商店代码：

Ext.define('TC', {
    extend: 'Ext.data.Store',
    storeId: 'TCStore',
    model: 'CommonModel',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'resources/data/tree/TC.json'
    }
});

treepanel的屏幕截图：

当我单击另一个子节点（示例3或4）时，它会重置所有行中所有组合的值。

感谢帮助。

下面的答案后代码更改，这给出了getRecord未定义的错误。

Ext.define('MyTree', {
    extend: 'Ext.tree.Panel',
    reference: 'myTree',
    columns: {

            item:[{
                text: 'TC',
                dataIndex: 'scrTC',
                xtype: 'widgetcolumn',
                widget: {
                    xtype: 'combo',
                    store: 'TCStore',
                    valueField: 'value',
                    displayField: 'displayValue',
                    matchFieldWidth: false,
                    listeners: {
                        change: function (combo) {
                            if (combo.hasFocus) {
                                var treeview = combo.up('myTree'), //myTree is reference of my treepanel
                                    record = treeview.getRecord(combo.el.up('tr')); ///getting error here
                                record.set('scrTC', combo.getValue());
                            }
                        }
                    }
                }
            }]
        }
    });

答案

我找到了解决方案，

select: function (combobox, record) {
        combobox.getWidgetRecord().set(combobox.getWidgetColumn().dataIndex, record.data.value);
    }

这解决了我的问题。

另一答案

您正在使用属性dataIndex: 'scrTC'，您只需更改组合的值而不是此scrTC。当您的节点展开或折叠时，再次设置相同的scrTC值。

因此，当您更改组合的值时，需要更改scrTC的值。

你可以在这里查看工作FIDDLE

代码链

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create('Ext.data.Store', {
            storeId: 'TCStore',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'TC.json'
            }
        });

        Ext.create('Ext.data.TreeStore', {

            storeId: 'treeStore',

            fields: ['name'],
            root: {
                name: 'Root',
                expanded: true,
                scrTC: 1,
                children: [{
                    name: 'One',
                    scrTC: 2,
                    children: [{
                        name: 'Child 1',
                        scrTC: 3,
                        leaf: true
                    }, {
                        name: 'Child 2',
                        scrTC: 4,
                        leaf: true
                    }]
                }, {
                    name: 'Two',
                    scrTC: 5,
                    leaf: true
                }]
            },

        });

        Ext.create('Ext.tree.Panel', {

            store: 'treeStore',

            renderTo: Ext.getBody(),

            title: 'Tree Panel Demo',
            columns: {
                defaults: {
                    width: 200
                },
                items: [{
                    xtype: 'treecolumn',
                    dataIndex: 'name'
                }, {
                    xtype: 'widgetcolumn',
                    dataIndex: 'scrTC',
                    widget: {
                        xtype: 'combo',
                        store: 'TCStore',
                        valueField: 'value',
                        displayField: 'displayValue',
                        matchFieldWidth: false,
                        listeners: {
                            change: function (combo) {
                                if (combo.hasFocus) {
                                    var record = combo.getWidgetRecord(),
                                        property = combo.getWidgetColumn().dataIndex;

                                    record.set(property, combo.getValue());
                                }

                            }
                        }
                    }
                }]
            }
        })
    }
});