[ExtJS] 不同控件的双向绑定

版权声明：如若转载，烦请联系作者。 https://blog.csdn.net/ZYD45/article/details/86354608

在之前的文章，简单介绍了viewModel的用法

但是那种viewModel的继承 是 父子控件之间的关联

在A控件里 声明了viewModel，B控件直接绑定AviewModel中的key即可

那如果是同级控件，或者像是常用的弹窗里编辑时，页面也跟随变化（如下图）

这种用fireEvent可以做到，但只用viewModel的话如何处理？

主要实现：

通过extjs viewModel的特性，进行双向绑定

页面控件使用的viewModel 在创建弹窗时 赋给弹窗。

弹窗上的控件，在更新viewModel时就更新了页面上的viewModel，然后页面的viewModel 再更新控件的值

注意：这个方法有个弊端 就是不可以对弹窗设置closeAction:'destroy',只能是closeAction:'hide' 销毁的方法在代码里有介绍

---

页面构造：

{
    xtype: 'container',
        viewModel: { //声明主要的viewModel
        data: {
            StartDate: new Date('2018-12-31'),
                EndDate: new Date()
        },
        formulas: {
            Datedata: function (get) {
                return [{
                    start: get('StartDate'),
                    end: get('EndDate')
                }];
            }
        }
    },
    items: [{
        xtype: 'component',
        name: 'Date',
        reference: 'Date',
        cls: 'date',
        flex: 1.5,
        padding: '10px 20px',
        tpl: [
            '<div style="color: #999;">计划日期</div>',
            '<tpl for=".">', //在循环内循环
            '{[this.getTime(values)]}', //声明自定义函数对象 {[this.函数名(所用参数对象)]} fn共有6种对象
            '</tpl>', {
                getTime: function (val) { //fn函数里有各种参数 out,values,parent,xindex,xcount,xkey，感兴趣可以在控制台输出
                    var datefm = 'm.d';
                    if (val.start.getFullYear() != val.end.getFullYear()) {
                        datefm = 'Y.m.d';
                    }
                    return '<div class="timesel">' + Ext.Date.format(val.start, datefm) + '-' + Ext.Date.format(val.end, datefm) + '</div>';
                }
            }
        ],
        bind: {
            data: '{Datedata}'
        },
    }]
}

主要方法：

listeners: {
    initialize: function () {
        var vm = this.getParent().getViewModel();//得到页面上的viewModel 用于创建弹窗时赋值
        this.on('destroy', function () { //当component销毁时 去把弹窗也销毁
            const me = this;
            me.selwin.destroy()
        });
        this.el.on('tap', function () { //因为用的component 没有点击事件 所以在初始化时对元素监听的点击事件
            var selwin = this.component.selwin;
            if (!selwin) {
                selwin = this.component.selwin =
                    Ext.widget('dialog', {
                        maskTapHandler: function () { //用点击阴影的方式隐藏弹窗 
                            this.hide()
                        }, 
 
                        viewModel: vm,//赋值给弹窗
                        items: [{
                            xtype: 'datefield',
                            bind: {
                                value: '{StartDate}' //弹窗上的控件绑定的 key要和页面上的vM中的key一致
                            }
                        }]
                    });
 
            }
            selwin.show();
        })
    }
}

完整代码：把代码粘贴至此在线测试

Ext.application({
    name: 'Fiddle',
 
    launch: function () {
        Ext.Viewport.add({
            xtype: 'container',
            viewModel: {
                data: {
                    StartDate: new Date('2018-12-31'),
                    EndDate: new Date()
                },
                formulas: {
                    Datedata: function (get) {
                        return [{
                            start: get('StartDate'),
                            end: get('EndDate')
                        }];
                    }
                }
            },
            items: [{}, {
                xtype: 'component',
                name: 'Date',
                reference: 'Date',
                cls: 'date',
                flex: 1.5,
                padding: '10px 20px',
                tpl: [
                    '<div style="color: #999;">计划日期</div>',
                    '<tpl for=".">', //在循环内循环
                    '{[this.getTime(values)]}', //声明自定义函数对象 {[this.函数名(所用参数对象)]} fn共有6种对象
                    '</tpl>', {
                        getTime: function (val) { //fn函数里有各种参数 out,values,parent,xindex,xcount,xkey，感兴趣可以在控制台输出
                            var datefm = 'm.d';
                            if (val.start.getFullYear() != val.end.getFullYear()) {
                                datefm = 'Y.m.d';
                            }
                            return '<div class="timesel">' + Ext.Date.format(val.start, datefm) + '-' + Ext.Date.format(val.end, datefm) + '</div>';
                        }
                    }
                ],
                bind: {
                    data: '{Datedata}'
                },
                listeners: {
                    initialize: function () {
                        var vm = this.getParent().getViewModel();
                        this.on('destroy', function () {
                            const me = this;
                            me.selwin.destroy()
                        });
                        this.el.on('tap', function () {
                            var selwin = this.component.selwin;
                            if (!selwin) {
                                selwin = this.component.selwin =
                                    Ext.widget('dialog', {
                                        maskTapHandler: function () {
                                            this.hide()
                                        },
                                        viewModel: vm,
                                        items: [{
                                            xtype: 'datefield',
                                            bind: {
                                                value: '{StartDate}'
                                            }
                                        }]
                                    });
 
                            }
                            selwin.show();
                        })
                    }
                }
            }]
        })
    }
});