Ext JS 7.2 - Загрузка записи в форму с цепочкой выпадающих списков и forceSelection: true не загружает все значения - PullRequest
Новая
       115

Ext JS 7.2 - Загрузка записи в форму с цепочкой выпадающих списков и forceSelection: true не загружает все значения

1 голос
/ 10 июля 2020

У меня есть форма с двумя выпадающими списками. Первое комбинированное поле со списком определяет значения, которые появляются во втором. У меня есть forceSelection:true во втором поле со списком, поэтому, когда пользователь изменяет первое комбо, второе будет пустым, потому что это больше не будет допустимым вариантом. Цепные комбинации работают как и ожидалось, но когда я загружаю запись в эту форму, используя getForm().loadRecord(record), значение для первой комбинации устанавливается правильно, а вторая - нет, если я не устанавливаю forceSelection:false.

Следующая скрипка должна проясните ситуацию: sencha fiddle

Щелчок по «Load Record» должен загружаться в Fruits / Apple, но отображаются только Fruits. Повторное нажатие на «Загрузить запись» приводит к желаемому результату. Если вы закомментируете forceSelection: true, он будет работать так, как ожидалось, но тогда связанные комбинации не будут работать должным образом. Я что-то здесь делаю не так?

1 Ответ

1 голос
/ 11 июля 2020

Это не так просто. Что происходит, когда вы запускаете form.loadRecord (re c).

  1. вы устанавливаете поле со списком FoodGroup
  2. вы устанавливаете поле со списком FoodName. НО значения там нет, потому что ваш фильтр не переключился на соответствующие группы продуктов. Вот почему помогает отбор силы комментирования. (Поэтому помогает и фильтр комментирования.)
  3. включил фильтр названий блюд. Магазин теперь имеет новые значения.

Вы нажимаете кнопку второй раз. Первое значение combobox такое же, фильтры не срабатывают (срабатывают?), У вас уже есть соответствующие значения во втором хранилище, и значение выбрано.

Как исправить: Исправление некрасивое. Вы можете прослушать в магазине refre sh (это означает, что срабатывают фильтры), а затем установить второе значение (или установить значения снова). 

Ext.define('Fiddle.view.FormModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.fiddle-form-model',
    stores: {
        foodgroups: {
            fields: ['name'],
            data: [{
                foodgroupname: 'Fruits'
            }, {
                foodgroupname: 'Vegetables'
            }]
        },
        foods: {
            fields: ['foodgroupname', 'foodname'],
            filters: {
                property: 'foodgroupname',
                value: '{selectedFoodgroup.foodgroupname}'
            },
            data: [{
                foodname: 'Apple',
                foodgroupname: 'Fruits'
            }, {
                foodname: 'Banana',
                foodgroupname: 'Fruits'
            }, {
                foodname: 'Lettuce',
                foodgroupname: 'Vegetables'
            }, {
                foodname: 'Carrot',
                foodgroupname: 'Vegetables'
            }]
        }
    }
});

Ext.define('Fiddle.view.Form', {
    extend: 'Ext.form.Panel',
    xtype: 'fiddle-form',
    viewModel: {
        type: 'fiddle-form-model'
    },

    title: 'Combos',
    items: [{
        xtype: 'combo',
        itemId: 'FoodGroup', // To access FoodGroup
        displayField: 'foodgroupname',
        bind: {
            store: '{foodgroups}',
            selection: '{selectedFoodgroup}'
        },
        valueField: 'foodgroupname',
        forceSelection: true,
        name: 'foodgroup',
        fieldLabel: 'Food Group',
        value: 'Vegetables'
    }, {
        xtype: 'combo',
        itemId: 'FoodName', // To access FoodName
        bind: {
            store: '{foods}'
        },
        queryMode: 'local',
        forceSelection: true, //COMMENTING THIS OUT ACHIEVES DESIRED LOAD RECORD BEHAVIOR
        displayField: 'foodname',
        valueField: 'foodname',
        name: 'food',
        fieldLabel: 'Food',
        value: 'Carrot'
    }],

    buttons: [{
        text: 'Load Record',
        handler: function (btn) {
            // OUR UGLY FIX
            var form = btn.up('form'),
                foodGroupComboBox = form.down('combobox#FoodGroup'),
                foodNameComboBox = form.down('combobox#FoodName'),
                record = Ext.create('Ext.data.Model', {
                    foodgroup: 'Fruits',
                    food: 'Apple'
                });
            foodNameComboBox.getStore().on('refresh', function (store) {
                form.loadRecord(record);
            }, this, {
                single: true
            })

            form.loadRecord(record);
        }
    }]

});

Ext.application({
    name: 'Fiddle',

    launch: function () {

        var form = new Fiddle.view.Form({
            renderTo: document.body,
            width: 600,
            height: 400
        });

    }
});
...