android - Sencha Touch 2 - 如何在加载 View 后运行函数？

Question

我在 Sencha Touch 中有一个 View ，我通过初始化函数填充了它。这是代码:

Ext.define("Pycsell.view.Home", {
    extend: "Ext.form.Panel",
    requires: "Ext.form.FieldSet",
    alias: "widget.homepage",
    config:{
        scrollable: false,
        cls: 'splash_screen',
        layout: 'vbox'
    },

    initialize: function () {
        this.callParent(arguments);

        var fb_login = {
            xtype: 'button',
            cls: 'fb_login_button'
        };

        var tradreg = {
            xtype: 'button',
            cls: 'tradreg_button'
        };

        var tradlog = {
            xtype: 'button',
            cls: 'tradlog_button'
        };

        var logo_container = Ext.create('Ext.Panel', {
            cls: 'logo_container',
            width: '90%',
            flex: 4,
        });

        var button_container = Ext.create('Ext.Panel', {
            cls: 'splash_content',
            items: [fb_login, tradreg, tradlog],
            flex: 2,
        });


        this.add([
            logo_container,
            button_container
        ]);
        this.setButtonSizes();

    },//End init

    setButtonSizes: function() {
        console.log('Width is:' + $('.fb_login_button').width());
        console.log('Old height is:' + $('.fb_login_button').height());
        var height = $('.fb_login_button').width()*0.29;
        $('.fb_login_button').height(height);
        console.log('New height is:' + $('.fb_login_button').height());
    }
});

现在，setButtonSizes 函数确实触发了，但是所有的值都是空的，这让我相信在它被调用时这些项目实际上并没有被初始化。我将如何正确地执行此操作以便实际设置值？提前致谢。

Answer 1

众所周知，要做到这一点非常棘手。问题是您的函数可能在组件呈现之前被调用。我还没有对 Sencha Touch 2 做过任何工作，但看起来使用 painted 事件应该有所帮助。像这样:

Ext.define("Pycsell.view.Home", {
 extend: "Ext.form.Panel",
 requires: "Ext.form.FieldSet",
 alias: "widget.homepage",
 config:{
     scrollable: false,
     cls: 'splash_screen',
     layout: 'vbox'
 },
  initialize: function () {
     this.callParent(arguments);
      var fb_login = {
         xtype: 'button',
         cls: 'fb_login_button'
     };
      var tradreg = {
         xtype: 'button',
         cls: 'tradreg_button'
     };
      var tradlog = {
         xtype: 'button',
         cls: 'tradlog_button'
     };
      var logo_container = Ext.create('Ext.Panel', {
         cls: 'logo_container',
         width: '90%',
         flex: 4,
     });
      var button_container = Ext.create('Ext.Panel', {
         cls: 'splash_content',
         items: [fb_login, tradreg, tradlog],
         flex: 2,
     });
       this.add([
         logo_container,
         button_container
     ]);
     /* Attaches a listener to the component that will be fired after the
     component is rendered or shown. */
     this.on('painted', this.setButtonSizes);
  },//End init
  setButtonSizes: function() {
     console.log('Width is:' + $('.fb_login_button').width());
     console.log('Old height is:' + $('.fb_login_button').height());
     var height = $('.fb_login_button').width()*0.29;      
     $('.fb_login_button').height(height);
     console.log('New height is:' + $('.fb_login_button').height());
 }
});

这完全取决于您要完成的任务，这可能会触发事件太多次(看起来它也会在每次显示组件时触发)。因此，您可能需要调整 setButtonSizes 以进行补偿。