zoukankan      html  css  js  c++  java
  • Extjs 图片的自动缩放

    function resizeImage(obj)
    {
        var width = Ext.getCmp('welcome').getWidth();  //welcome 为一Panel的id  分割线下的代码
        var height=Ext.getCmp('welcome').getHeight();
        obj.width=width;
        obj.height=height;
    }
    ...
    {
                id:'welcome',
                title: '首页',
                html:'<img id="back" src="../../images/background.png" onload="resizeImage(this)"/>',
                xtype:'panel',
                layout:"fit",
                closable: false,
                autoScroll: true,
                listeners: {
                    resize: function (panel, width, height, oldWidth, oldHeight, eOpts) {
                        var temp=document.getElementById('back');
                        resizeImage(temp);
    
                    }
                }
    }

    这样就可以使图片在载入和所属panel大小变化是能够自适应的显示图片

    下面是两幅图片叠加,同时自适应调整图片的大小   其中aas.png是字体图片,不需要根据panel拉伸,而他的背景title需要根据panel拉伸。

    将两幅图叠加显示

    function resizeImageWidth(obj)
    {
        var width = Ext.getCmp('northView').getWidth();
        obj.width=width;
        obj.height=60;
    }




    ... { id:
    'northView', xtype:'panel', region: 'north', height:60, layout:"fit", html:'<div style="position: relative"><div style="position: absolute"><img src="../../images/aas.png" height="60"/></div><img id="title" src="../../images/title.png" onload="resizeImageWidth(this)"/></div>', listeners: { resize: function (panel, width, height, oldWidth, oldHeight, eOpts) { var temp=document.getElementById('title'); resizeImageWidth(temp); } } }
  • 相关阅读:
    内核态内存映射
    FS 数据结构
    内存页分配/释放
    用户态内存映射
    WindowsServer 2008 TIME_WAIT
    OutOfMemoryError:修改tomcat启动参数
    windows下Tomcat添加jmx监控
    mysql 5.7.11 安装运行
    mysql 数据库备份与还原
    Win7下虚拟WiFi设置
  • 原文地址:https://www.cnblogs.com/mamuluke/p/4938911.html
Copyright © 2011-2022 走看看