专栏首页菩提树下的杨过ExtJs学习笔记(9)_Window的基本用法

ExtJs学习笔记(9)_Window的基本用法

以下就是ExtJs的官方示例,只不过加了几行注释,呵

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Hello World Window Example</title>
 <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
 <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="../ext-all-debug.js"></script>
 <style type="text/css">
     .x-panel-body p {
         margin:10px;
         font-size:12px;
 }
 </style>
 </head>
 <body>
 <script type="text/javascript">
     Ext.onReady(function() {
 var win;
 var button = Ext.get('show-btn');
 
         button.on('click', function() {            
 if (!win) {
                 win = new Ext.Window({
                     applyTo: 'Container',
                     layout: 'fit', //fit布局会使容器内的组件自动充满容器(Resize容器时,自动重绘)
  //title:"new Title",//不加这一句时,会自动寻找Container中样式为x-window-header的div,将其内容做为window的title
                     width: 500,
                     height: 300,
                     closeAction: 'hide',//关闭后,仅隐藏,方便下次再显示
                     plain: true,
                     items: new Ext.TabPanel({
                         applyTo: 'hello-tabs',
                         autoTabs: true, //加上这个后,会在hello-tabs里自动寻找样式为x-tab的div,根据title标识创建tab,根据div内容创建tab内容
                         activeTab: 0,
                         deferredRender: false,
                         border: false
                     }),
 
                     buttons: [{
                         text: 'Submit',
                         disabled: true
                     }, {
                         text: 'Close',
                         handler: function() {
                             win.hide();
                         }
 }]
                     });
                 }
                 win.show(button);//注意win.show()与win.show(button)的区别,show(button)会使弹出窗口看起来象从button上弹出来的,具有动画效果,而win.show()则没有这一动画效果
             });
         });
 </script>
 
 <input type="button" id="show-btn" value="Hello World" /><br /><br />
 
 <div id="Container" class="x-hidden">
 <div class="x-window-header">Hello Dialog</div>
 <div id="hello-tabs">
 
 <div class="x-tab" title="Hello World 1">
 <p>Hello.....
 </p>
 </div>
 
 <div class="x-tab" title="Hello World 2">
 <p>

 ....World!</p>
 </div>
 </div>
 </div>
 
 </body>
 </html>
 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [基础]电话/手机常见验证的Javascript示例

    电话号码:<input type="text" id="TelPrefix" size="4" MaxLength="4"> - <input type="te...

    菩提树下的杨过
  • 由javascript中"匿名函数调用写法"引出的一些东东

    匿名函数自动调用的三种写法如下: var f1 = function(){alert("f1");}(); (function(){alert("f2");...

    菩提树下的杨过
  • 帆软FineReport如何使用程序数据集

    大多数情况下,FineReport直接在设计器里使用“数据集查询”,直接写SQL就能满足报表要求,但对于一些复杂的报表,有时候SQL处理并不方便,这时可以把查询...

    菩提树下的杨过
  • GPU计算加速01 : AI时代人人都应该了解的GPU知识

    金融建模、自动驾驶、智能机器人、新材料发现、脑神经科学、医学影像分析...人工智能时代的科学研究极度依赖计算力的支持。提供算力的各家硬件芯片厂商中,最抢镜的当属...

    PP鲁
  • 腾讯容器云平台GaiaStack亮相kubeCon

    KubeCon + CloudNativeCon 首次登陆中国上海。这意味着中国Kubernetes 爱好者们齐聚上海来参与这场全球范围内最大的 Kuberne...

    腾讯技术工程官方号
  • 深度卷积神经网络 CNNs 的多 GPU 并行框架 及其在图像识别的应用

    将深度卷积神经网络(Convolutional Neural Networks, 简称CNNs)用于图像识别在研究领域吸引着越来越多目光。由于卷积神经网...

    腾讯大数据
  • html2canvas使用笔记

    图片不能在canvas中显示出来的原因是因为html2canvas不支持跨域的图片资源,所以canvas中不会显示图片。

    lilugirl
  • I LOVE IT——做优秀的IT人

    I LOVE IT——做优秀的IT人 ? 如今的经济状况太槽糕了,很多人都在找工作。与此同时,许多科技公司非常渴望招到优秀IT人,这活儿报酬极高还有很多福利。我...

    企鹅号小编
  • VR让观众对“战后余痛”感同身受,凝视历史进而反思战争

    1914年的这个时候,世界正处在第一次世界大战的“修罗场”中,那是20世纪历史上极为黑暗和悲惨的岁月。据统计,一战期间约有6500万人参战,1000多万人丧生,...

    VRPinea
  • 学界 | 反超GPU:微软提出在CPU上高效解码的神经机器翻译模型

    选自arXiv 机器之心编译 参与:黄玉胜、李泽南 在最近一次机器学习热潮中,GPU 一直是承担神经网络模型训练和处理的主要计算设备,大多数模型都是针对 GPU...

    机器之心

扫码关注云+社区

领取腾讯云代金券