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 関数は起動しますが、すべての値が null であるため、呼び出された時点でアイテムが実際には初期化されていないと思います。値が実際に設定されるように、これを適切に行うにはどうすればよいですか? 前もって感謝します。

4

1 に答える 1

3

これは、正しく行うのが難しいことで有名です。問題は、コンポーネントがレンダリングされる前に関数が呼び出されている可能性があることです。私はSenchaTouch2で何の作業もしていませんが、ペイントされたイベントを使用すると役立つようです。このようなもの：

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 に答える