zoukankan      html  css  js  c++  java
  • ExtJS6 自适应浏览器窗口大小

    ExtJS6官方文档推荐使用Ext.on。做一个小例子,创建一个Panel显示在页面上,使它的大小随浏览器变化,自适应浏览器窗口大小。

    html:增加一个css样式给Panel加上红色border。

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>ExtOnResize测试</title>
      <meta charset="utf-8" />
      <link rel = "stylesheet" type = "text/css" href = "/ExtJS60/classic/theme-classic/resources/theme-classic-all.css" />
      <style type="text/css">
        .PanelCls
        {
          border: solid 1px red;
          padding: 8px;
        }
      </style>
      <script src="/ExtJS60/ext-all.js"></script>
      <script src="/ExtJS60/classic/locale/locale-zh_CN.js"></script>
      <script src="/Scripts/ExtOnResize_client.js"></script>
    </head>
    <body>
    </body>
    </html>

    ExtOnResize_client.js

    var mMainPanel;
    Ext.onReady(function ()
    {
      //Ext.Msg.alert("Ready", "\ElectricStation\ExtJSMVC2016\Scripts\ExtOnResize_client.js<br/>ExtJS就绪");
      mMainPanel = Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        //bodyCls:'PanelCls',
        cls: 'PanelCls',
        height: window.innerHeight,
         window.innerWidth
      });
    
      Ext.on('resize', function (width, height)
      {
        mMainPanel.setWidth(width);
        mMainPanel.setHeight(height);
      });
    });

    mMainPanel是全局变量。

    录像9

  • 相关阅读:
    从jvm的角度来看java的多线程
    jvm常用优化方案和方法
    JVM GC 机制与性能优化
    JVM 类加载机制详解
    (转)Java 详解 JVM 工作原理和流程
    Callable,Runnable异同
    使用Toast进行用户提醒(转)
    学好Java只需要做到这7点,年薪20W起步
    C# 之泛型详解
    C#中的委托和事件
  • 原文地址:https://www.cnblogs.com/edong/p/6052270.html
Copyright © 2011-2022 走看看