ExtJS:当我单击扩展时,小部件组合会重置所有字段的值

时间:2018-09-02 08:17:00

标签: javascript extjs extjs6.2

我正在使用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的屏幕截图:

Screenshot of 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());
                            }
                        }
                    }
                }
            }]
        }
    });

2 个答案:

答案 0 :(得分:0)

您正在使用属性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());
                                }

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

答案 1 :(得分:0)

我找到了解决方法,

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

这解决了我的问题。