Блог

Главная - Вопросы по программированию - свяжите данные в группу флажков с помощью Ext jS

свяжите данные в группу флажков с помощью Ext jS

#c# #api #extjs

Вопрос:

Я использую приведенный ниже код для привязки данных к группе флажков. Я создал функцию listners в группе флажков. Я получаю данные и пытаюсь связать их.Я привязываю данные, но пользовательский интерфейс не отображает данные и не выдает никаких ошибок.

 {
    xtype: 'checkboxgroup',
    border: 1,
    id: 'CompanyGroup',
    style: {borderStyle: 'solid'},
    width: 300,
    height: 300,
    margin: '10 0 0 10',


    columns: 1,
    vertical: true,
    listeners: {
        boxready: function () {
            var me = this, st;

            st = Ext.create('ERM.store.Company');
            me.mask('Loading...');
            st.load({
                callback: function (records, _, success) {
                    me.unmask();

                    if (!success) {
                        st.destroy();
                        return;
                    }
                    
                    for (var i = 0, l = records.length; i < l; i  ) {
                        bind: {
                            boxLabel: records[i].data.CompanyId;
                            inputValue: records[i].data.CompanyName;
                            name: records[i].data.CompanyName;
                        }
                    }



                                        st.destroy();
                                    }
                                });
                            },
                            scope: 'this'
                        },
                    },

Комментарии:

1. Привет, Кришна, трудно понять, чего ты хочешь с этой небольшой информацией. Пожалуйста, настройте (фиддель)[ fiddle.sencha.com/] . Таким образом, мы, скорее всего, узнаем, что вам нужно. Вы ищете привязку данных к значениям флажков в группе или вам нужно динамически добавлять флажки … ???

2. Спасибо Dinakheller,я создал пользовательский интерфейс и магазин.

3. На странице пользовательского интерфейса создана функция прослушивания в этом методе, получающая данные(как в приведенном выше формате). Здесь меня беспокоит, как связать эти данные в группу флажков.

4. Я использую приведенный ниже код для привязки контрольной группы,я создал списки в контрольной группе.данные также поступают.но пользовательский интерфейс не отображает элементы.

5. Привет, Динахеллер,я обновил свой вопрос. Не могли бы вы, пожалуйста, разобраться в этом.

Ответ №1:

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ Ваш вопрос был не очень конкретным, но я попытался понять его суть. Было бы хорошо, если бы вы настроили скрипку, так было бы намного легче понять, что вам нужно.

Вот моя Скрипка. В следующий раз, пожалуйста, предоставьте такую скрипку, чтобы вам было легче помогать.

Насколько я понимаю, у вас есть набор флажков, которые вы хотите привязать boxLabel, inputValue and Name . Из этих ключей я так понимаю, что вы создаете КЛАССИЧЕСКОЕ приложение (важное отличие).

Прежде всего перейдите к документам Sencha и попытайтесь выяснить, какие конфигурации привязываются. Вы узнаете, что исходящие из коробки inputValue and name не привязываются.

Без этой поддержки вы должны добавить это для себя. (Имейте в виду, что это не всегда так просто, как в моем маленьком примере!!!)

СДЕЛАТЬ ПРИВЯЗЫВАЕМЫМ

 Ext.define('Core.override.form.field.Checkbox', {
    override: 'Ext.form.field.Checkbox',

    config: {
        inputValue: 'on',
        name: ''
    },

    setInputValue: function(value) {
        this.inputValue = value;
    },

    setName: function(value) {
        this.name = value;
    }
});

Затем вам нужно создать флажки в вашем представлении и добавить привязку, настроить модель представления и контроллер представления.

Вид

 Ext.define('Fiddle.view.Main', {
    extend: 'Ext.form.Panel',

    viewModel: 'main',
    controller: 'main',

    title: 'TEST CHECKBOXES',

    items: [{
        xtype: 'checkboxgroup',
        style: {borderStyle: 'solid'},

        items: [{
            xtype: 'checkbox',
            bind: {
                boxLabel: '{cbData.0.companyName}',
                inputValue: '{cbData.0.companyId}',
                name: '{cbData.0.companyName}'
            }
        }, {
            xtype: 'checkbox',
            bind: {
                boxLabel: '{cbData.1.companyName}',
                inputValue: '{cbData.1.companyId}',
                name: '{cbData.1.companyName}'
            }
        }]
    }]
});

МОДЕЛЬ ПРЕДСТАВЛЕНИЯ

 Ext.define('Fiddle.view.MainModel',{
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',

    data: {
        cbData: null
    }
})

КОНТРОЛЛЕР ПРОСМОТРА

 Ext.define('Fiddle.view.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',


    init: function() {
        const me = this;
        let st;

        me.getView().mask('Loading...');

        Ext.Ajax.request({
            url: 'data.json',
            success: function(data) {
                const decodedData = Ext.decode(data.responseText);

                this.getViewModel().set('cbData', decodedData);
                this.getView().unmask();
            },
            scope: this
        });
    }
})

ДАННЫЕ, КОТОРЫЕ Я ИСПОЛЬЗОВАЛ

 [{
    "companyId": 1,
    "companyName": "Comp1"
}, {
    "companyId": 2,
    "companyName": "Comp2"
}]
Метки: