Question

在我的应用程序中，我使用特殊键来调用非常简单的窗口，只有一个元素 - 图像。这个图像非常大，所以我设置为windows属性：maxHeight：700和autoScroll：true。图像定义如下：

render() {
    return ( < div >
        < Header / >
        < div className = "container " >
        < form className = "form-signin1" > {
          this.state.userResults.map(function(res, index) {

                var questions = res.question.map(function(res1) {
                      return ( < tr >
                        < td > {
                          res1.question
                        } < input type = "checkbox"
                        value = ""
                        name = {
                          'ques_check_box_' + [res1.qusId]
                        }
                        />
                    </td >
                        < /tr>
                  )
               });
               return (
               <div className="row">
               { index+1 } 
                        for each iteration < table className = "table text-center" >
                        < thead >
                        < th width = "400" > Deliverables < /th>
               <th>Justifications</th >
                        < th > Weightage < /th>
               <th className="lastHead">Employee <br / > Weightage < /th>
               </thead >
                        < tbody > {
                          questions
                        } < /tbody>
               </table >
                        < /div>
               )
          })
        }
        </form >
                        < /div> 
    </div >
                      );

}

当我点击＆＃34;图片＆＃34;每次看到相同的按钮（当应用程序是＆＃34;新鲜＆＃34;，重新启动时）调用此窗口。在第一次行动后，我可以看到

（总是）当我按下＆＃34;关闭＆＃34;按钮并再次调用它我可以看到这个窗口的图片大小合适。我无法找到原因，你能告诉我什么是错的吗？

我使用ExtJS 4.2，窗口定义如下：

initComponent: function () {
    var me = this;

    Ext.apply(me, {
        items: [
            {
                xtype:      'image',
                src:        'obr/picture.jpg',
                shrinkWrap: true,
                mode:       'image'
            }
        ],
        dockedItems: [
            {
                xtype: 'toolbar',
                    dock: 'bottom',
                    height: 40,
                    items: [
                        {
                            xtype:   'tbfill'
                        },
                        {
                            xtype:   'button',
                            handler: me.onClose,
                            margin:  '0 10 0 0',
                            text:    'Close'
                        }
                    ]
                }
            ]
    });
    this.callParent();
}

Answer 1

在窗口的image使用doLayout方法的加载事件中，因为图像需要一些时间来加载。例如：

{ xtype: 'image', src: 'obr/picture.jpg', shrinkWrap: true, mode: 'image', listeners: { load: function() { this.up('window').doLayout(); } } }

希望这会对你有所帮助:)。

Answer 2

你非常接近但事件＆＃34;加载＆＃34;不工作。答案在这里：

http://www.appfoundation.com/2012/08/ext-js-dynamic-image-refresh-and-load/

听众喊道：

listeners : {
        afterrender :  function(me){
            me.el.on({
                    load: function (evt, ele, opts) {
                        me.doComponentLayout();
                    }
                });
           }
        }
}

ExtJS 4在模态窗口中显示图片

2 个答案: