Extjs 动态添加图像不会调整容器面板的大小答案

【问题标题】：Extjs dynamically add image doesn't resize container panelExtjs 动态添加图像不会调整容器面板的大小
【发布时间】：2014-06-13 22:36:34
【问题描述】：

这里是上下文：我有一个包含一些数据的网格，当我单击操作列中的按钮时，会打开一个窗口以显示有关数据的详细信息。在这个窗口中，我动态添加了一个与数据对应的图像。

问题是包含图像的面板没有重新调整大小以适应图像我第一次打开窗口时，当图像在浏览器的缓存中时它可以正常工作

我尝试在添加图像后直接使用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 

},

【问题讨论】：

你能在 jsfiddle 上重现这个问题吗？如果我能看一下会更容易。
我会试试的，无论如何谢谢你调查这个
我尝试按照您的要求在 jsfiddle 上重现此问题，但无济于事......当我有空闲时间时，我会尝试研究它

标签： javascript image extjs model-view-controller

【解决方案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
        }],
    }];

【讨论】：