extjs 使用Ext jS将数据绑定到复选框组

我正在使用下面的代码将数据绑定到复选框组。我已经在复选框组中创建了listners函数。我正在获取数据并尝试绑定数据。我正在绑定数据，但UI未显示数据，也未收到任何错误。

{
    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'
                        },
                    },

你的问题不是很具体，但我试图理解它的本质。这将是很好的，如果你已经设置了一个小提琴，这样它会更容易理解你在追求什么。
这是我的小提琴。下次请提供这样的小提琴，这样帮助你就容易多了。
据我所知，你有一组复选框，你想绑定boxLabel, inputValue and Name。从这些键，我认为你是建立一个经典的应用程序（重要的区别）。
首先，转到Sencha Docs并尝试找出哪些配置是可绑定的，您将发现开箱即用的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;
    }
});

接下来，您必须在视图中创建复选框并添加绑定，设置viewModel和viewController。

检视

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"
}]

extjs 使用Ext jS将数据绑定到复选框组

1条答案

相关问题

热门标签

最新问答