Extjs動態添加圖像不會調整容器面板的大小

Question

這里是上下文：我有一個包含一些數據的網格，當我單擊操作列中的按鈕時，將打開一個窗口以顯示有關數據的詳細信息。 在此，窗口i動態添加與數據相對應的圖像。

問題是包含圖像的面板在我第一次打開窗口時不會調整大小以適合圖像，此后當圖像位於瀏覽器的緩存中時，它的工作原理就很好

我嘗試在添加圖像之后或在panel.show()函數的回調函數中直接使用doLayout()或updateLayout() panel.show()函數。

我使用的是MVC體系結構，因此所有功能都位於不同的文件中（僅供參考）

誰能幫我？ 我已經來這幾天了...

以下是一些代碼示例：

窗口構造函數：

constructor : function(params) {
    var rec=params.rec;
    config = this.config;
    config.title=rec.get('name');
    var mySQlId = rec.get('id');

    items=[ {
        xtype:'panel',
        autoScroll: true,
        border: false,
        header: false,
        layout: {
            type: 'vbox',
            pack: 'start',
            align: 'stretch',
        },
        items: [{
            xtype:'panel',  //this is where the image goes
            border: false,
            hidden:true,
        },
        {
            xtype: 'button',
            enableToggle: true,
            text: 'See 3D Structure',
            disabled:true,
        },{
            xtype:'gridMetaboliteIds',
            mysqlid: mySQlId
        }],
    }];

    config.items = items;

    this.callParent([config]);

}

檢索圖像的代碼（在控制器腳本中）

init : function() {
    this.control({
        'gridMetaboliteIds':{
            viewready:this.getImage             
        },
    });
},

getImage: function(grid){

    var store=grid.getStore();

    var panel=grid.up('panel');
    var imgPanel=panel.down('panel');
    var id=imgPanel.getId();


    var rec=store.findRecord('dbname','inchi');
    var bool=true;

    if (rec!=null){

        Ext.Ajax.request({
            url: 'sgetSVGFile.php', //This php get the name of the image coresponding to the data in a MySQL database
            params: {
                id: inchi
            },
            success: function(response){
                var json = Ext.JSON.decode(response.responseText, true);
                if (json[0]!=null){
                    var img=Ext.create('Ext.Img', {
                        src: 'resources/images/structure_metabolite/'+json[0]["svgFile"],
                        shrinkWrap:true,
                        border:false,

                    });
                    imgPanel.add(img);
                }
                else{
                    bool=false;
                }
            },
        })
        imgPanel.show(null, function(){
            imgPanel.doLayout();   // this is not working
        })


    }

    if (!bool){
        this.getGif(grid);  // if the svg image is not loaded do something else
    }
    //imgPanel.doLayout(); // this is not working either 

},

Answer 1

我終於設法解決了我的問題，錯誤來自我添加圖像的面板。

直接將圖像添加到第一個面板（請參見下文），然后將布局設置為layout: 'auto'解決了此問題。

items=[ {
        xtype:'panel',
        autoScroll: true,
        border: false,
        header: false,
        layout: 'auto',
        items: [Ext.create('Ext.Img', {
            src: 'resources/images/structure_metabolite/'+svgFile,

        }),
        {
            xtype: 'button',
            enableToggle: true,
            text: 'See 3D Structure',
            disabled:true,
            width:'100%'
        },{
            xtype:'gridMetaboliteIds',
            mysqlid: mySQlId
        }],
    }];