1

我在 Sencha Touch 中有一个视图，我通过初始化函数填充了该视图。这是代码：

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

4

1 回答 1

3

众所周知，这可能是非常棘手的。问题是您的函数可能在组件渲染之前被调用。我还没有对 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 来补偿。

于 2012-08-15T17:13:52.230 回答