ExtJS : Widget Combo resets value for all fields when i click on expand

Question

I am using a treePanel in which one column is using widgetColumn with combo inside cell.

Below is sample code.

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

When I change values of combo for few rows & then expand the other children in grid all combo value a reset to default value again.Not sure whats the issue here.

Code for store :

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

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

Screenshot of treepanel:

Screenshot of treepanel

When I click on another children node, example 3 or 4 it resets the value for all combo in all rows.

Thanks for help.

Code changes after the below answer, which gives the getRecord undefined error.

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

Can you show in a [fiddle](https://fiddle.sencha.com/)? – Alexander Sep 02 '18 at 09:34 — Alexander, Sep 02 '18 at 09:34

Narendra Jadhav · Answer 1 · 2018-09-05T07:24:35.767

0

You are using the property dataIndex: 'scrTC' and you just change the value of your combo not this scrTC. When your node expand or collapse, so it again the set the same scrTC value.

So you need to change the value of scrTC, when you are changing the value of your combo.

You can check here with working FIDDLE

CODE SNIPPET

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

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

edited Sep 05 '18 at 07:24

answered Sep 03 '18 at 05:38

Narendra Jadhav

10,052
15
33
44

I tried fiddle but when i run i dont see any output, also made changes in my code & i am getting error as "treeview.getRecord is not a function" – NewBie Sep 03 '18 at 07:54
May be you have missed something in your code. Can you post your code ? just also check in your code this`treeview = combo.up('treeview')` is available of not. – Narendra Jadhav Sep 03 '18 at 08:21
the line above returns undefined, so i used combo.up('myTree') -- which is reference to my treepanel. – NewBie Sep 03 '18 at 09:48
you need to change this `combo.up('myTree')` with this `combo.up('treeview')`. Because `treecview` is particular row. Sure it will work – Narendra Jadhav Sep 03 '18 at 09:54
sadly that doesnt works in my case, it comes as undefined. – NewBie Sep 03 '18 at 10:01
Inside of your `treepanel` instead of `item` use `items` and also try to compare what you have missed. Because if your using same and same version then I don't think it will undefined. – Narendra Jadhav Sep 03 '18 at 10:11
sorry for the typo, its 'items' in actual code and version that i am using is - Sencha Cmd v6.5.3.6 – NewBie Sep 03 '18 at 10:14
and what is framework version ?I have also checked in 6.5 as well is working fine. – Narendra Jadhav Sep 03 '18 at 10:49
version is 6.0.2.437 i tried with this version in fiddle & its not working – NewBie Sep 03 '18 at 10:55
I have also tried with `6.0.2.437` version it's working. now you just put you all efforts in [FIDDLE](https://fiddle.sencha.com/#view/editor). So if I will get any issue I will resolve – Narendra Jadhav Sep 03 '18 at 11:00
thanks @Narendra Jadhav for your help, i gave me direction & now i have solution. Now I have issue with - after saving data combobox doesnt reset to readaOnly(true) it stay editable. Tried binding it but didnt worked, any idea about same? – NewBie Sep 04 '18 at 12:10
yes.. i have used bind property but when i click on edit n set combo readOnly-false then it makes all the comboboxes as readOnly False. – NewBie Sep 07 '18 at 06:41

score 0 · Accepted Answer · answered Sep 04 '18 at 12:07

0

I have found solution,

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

this resolves my issue.

answered Sep 04 '18 at 12:07

NewBie

63
10

ExtJS : Widget Combo resets value for all fields when i click on expand

2 Answers2