Question

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

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

我在添加图片后或在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
        }],
    }];

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

1 个答案: