Question

我在Sencha Touch中有一个视图，我通过initialize函数填充它。这是代码：

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函数会触发，但所有值都为null，这使我相信这些项在调用时实际上并未初始化。我将如何正确地执行此操作以便实际设置值？提前谢谢。

Answer 1

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

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来补偿。

Sencha Touch 2 - 如何在加载视图后运行函数？

1 个答案: