Question

我在计时方面遇到了麻烦。我理解为什么在下面的例子和页面显示的小提琴中，然后消失。这是因为模型数据在面板显示后更改了隐藏属性，然后它隐藏了面板。我想弄清楚如何让面板在加载之前了解模型数据。

https://fiddle.sencha.com/#fiddle/19m1

Ext.application({
name : 'MyApp',

launch : function() {
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.mypanel',
        viewModel: {
            people: [],
            data: {
                hidePanel: true
            }
        },
        bind: {
            data: '{people}',
            hidden: '{hidePanel}',
        },

        border: 3,
        width: 300,
        height: 150,
        title: 'XTemplate Data Binding Example',
        tpl: [
            '<tpl for=".">',
                'First Name: {fName} <br>',
                'Last Name: {lName}',
                '<hr>',
            '</tpl>'
        ],
        autoScroll: true, // add scroll bar if necessary
        title: 'Details'
    });

    var pnl = Ext.create('MyApp.view.MyPanel', {
        renderTo: Ext.getBody()
    });

    pnl.getViewModel().set('people',[
     {fName: 'Steve', lName: 'Drucker', bonus: 5},
     {fName: 'Jason', lName: 'Perry',   bonus: 7},
     {fName: 'Tracey',lName: 'Dunn',    bonus: 8},
    ]);

}
});

***罗伯特沃特金斯提出的答案？

我认为以下是罗伯特沃特金斯提出的建议。也就是说，不使用bind与hidden属性，而是查看afterrender事件中的hidden属性。

https://fiddle.sencha.com/#fiddle/19m7（更新小提琴）

Ext.application({
name : 'MyApp',

launch : function() {
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.mypanel',
        viewModel: {
            people: [],
            data: {
                hidePanel: true
            }
        },

        listeners: {
            afterrender: function(sender) {
                if (this.getViewModel().data.hidePanel != true) {
                    this.show();
                }
           }

        },


        hidden: true,

        bind: {
            data: '{people}'
            //hidden: '{hidePanel}',
        },

        border: 3,
        width: 300,
        height: 150,
        title: 'XTemplate Data Binding Example',
        tpl: [
            '<tpl for=".">',
                'First Name: {fName} <br>',
                'Last Name: {lName}',
                '<hr>',
            '</tpl>'
        ],
        autoScroll: true, // add scroll bar if necessary
        title: 'Details'
    });

    var pnl = Ext.create('MyApp.view.MyPanel', {
        renderTo: Ext.getBody()
    });

    pnl.getViewModel().set('people',[
     {fName: 'Steve', lName: 'Drucker', bonus: 5},
     {fName: 'Jason', lName: 'Perry',   bonus: 7},
     {fName: 'Tracey',lName: 'Dunn',    bonus: 8},
    ]);

}
});

Answer 1

实际问题是，在视图模型数据绑定到面板之前，面板将被渲染并显示为。这就是你获得节拍的原因 - 面板制作，显示，然后隐藏。

ViewModel数据作为接近后台线程的绑定值应用于JavaScript中 - 在计划任务集中尽快发生，或者在浏览器空闲时立即应用。这将在渲染面板之后。

最简单的解决方案是默认隐藏。这样，如果它意味着保持隐形，它就会，如果它意味着变得可见，它将在节拍上显示。

示例：

Ext.define('MyApp.view.MyPanel', { extend: 'Ext.panel.Panel', alias: 'widget.mypanel', viewModel: { people: [], data: { hidePanel: true // determine if the panel should be hidden or not. } }, bind: { data: '{people}', hidden: '{hidePanel}', // add the binding to make the panel visible or not. }, hidden: true, // make it hidden by default. .... }

Answer 2

您可以使用hidePanel的公式，例如：

viewModel: {
            formulas: {
                hidePanel: function(getter){
                    var people = getter('people');

                    return !people;
                }
            }
        }

工作示例：https://fiddle.sencha.com/#fiddle/19mb

在ExtJS 6中，如何在面板加载之前使ViewModel数据工作

2 个答案: