Ext.js 集装箱

于 2020-09-03 10:47:06 发布
阅读量171 收藏
点赞数
分类专栏： Ext
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xie__jin__cheng/article/details/108376002
版权

1.容器嵌套

1.1.Ext.js 容器内的组件

1.1.1 语法

   var component1 = Ext.create('Ext.Component', {
      html:'First Component'
   });
   Ext.create('Ext.container.Container', {
      renderTo: Ext.getBody(),
      items: [component1]
   });

1.1.2 代码 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function () {
         var component1 = Ext.create('Ext.Component', {
            html:'First Component'
         });

         var component2 = Ext.create('Ext.Component', {
            html: 'Second Component'
         });

         var component3 = Ext.create('Ext.Component', {
            html: 'Third Component'
         });

         Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            title: 'Container',
            border: 1,
            width: '50%',
            style: {borderStyle: 'solid', borderWidth: '2px' },
            items: [component1, component2,  component3]
         });
      });
   </script>
</head>
<body>
</body>
</html>

1.1.3 效果 

2.2 Ext.js 容器内的容器

2.2.1 语法

   var container = Ext.create('Ext.container.Container', {
      items: [component3, component4]
   });
   Ext.create('Ext.container.Container', {
      renderTo: Ext.getBody(),
      items: [container]
   });

2.2.2 举例

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
       Ext.onReady(function () {
         var component1 = Ext.create('Ext.Component', {
            html:'First Component'
         });

         var component2 = Ext.create('Ext.Component', {
            html: 'Second Component'
         });

         var component3 = Ext.create('Ext.Component', {
            html: 'Third Component'
         });

         var component4 = Ext.create('Ext.Component', {
            html: 'Fourth Component'
         });

         var container = Ext.create('Ext.container.Container', {
            style: {borderStyle: 'solid', borderWidth: '2px' },
            width: '50%',
            items: [component3, component4]
         });

         Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            title: 'Container',
            border: 1,
            width: '50%',
            style: {borderStyle: 'solid', borderWidth: '2px' },
            items: [component1, component2,  container]
         });
      });
   </script>
</head>
<body>
</body>
</html>

2.2.3 运行效果

1.3 容器嵌套

2. 容器类型

2.1 Ext.js Ext.panel.Panel容器 

2.1.1 语法

Ext.create('Ext.panel.Panel', {
   items: [child1, child2] // this way we can add differnt child elements to the container as container items.
});

2.1..2 代码

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function () {
         var childPanel1 = Ext.create('Ext.Panel', {
             html: 'First Panel'
         });

         var childPanel2 = Ext.create('Ext.Panel', {
             html: 'Another Panel'
         });

         Ext.create('Ext.panel.Panel', {
         renderTo: Ext.getBody(),
            width: 100,
            height : 100,
            border : true,
            frame : true,
            items: [ childPanel1, childPanel2 ]
         });
      });
   </script>
</head>
<body>
</body>
</html>

2.1.3 结果

2.2 Ext.js Ext.form.Panel容器 

2.2.1 语法

Ext.create('Ext.form.Panel', {
   items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。
});

2.2.2

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function () {
         var child1 = Ext.create('Ext.Panel',{     
            html: 'Text field' 
         });
        
         var child2 = Ext.create('Ext.Panel',{
            html: 'Text field' 
         });
         Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 100,
            height : 100,
            border : true,
            frame : true,
            layout: 'auto',// auto is one of the layout type.
            items: [child1, child2]
         });
      });
   </script>
</head>
<body>
</body>
</html>

2.2.3

2.3  Ext.js Ext.tab.Panel容器

2.3.1 

Ext.create('Ext.tab.Panel', {
   items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。
});

2.3.2

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function () {
         Ext.create('Ext.tab.Panel', {
            renderTo: Ext.getBody(),
            height: 100,
            width: 200,
            items: [{
               xtype: 'panel',
               title: 'Tab One',
               html: 'The first tab',
               listeners: {
                  render: function() {
                     Ext.MessageBox.alert('Tab one', 'Tab One was clicked.');
                  }
               }
               },{
               // xtype for all Component configurations in a Container
               title: 'Tab Two',
               html: 'The second tab',
               listeners: {
                  render: function() {
                     Ext.MessageBox.alert('Tab two', 'Tab Two was clicked.');
                  }
               }
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

2.3.3

2.4.Ext.js Ext.container.Viewport容器

2.4.1 语法

Ext.create('Ext.container.Viewport', {
   items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。
});

2.4.2

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function () {
         var childPanel1 = Ext.create('Ext.panel.Panel', {
             title: 'Child Panel 1',
             html: 'A Panel'
         });

         var childPanel2 = Ext.create('Ext.panel.Panel', {
             title: 'Child Panel 2',
             html: 'Another Panel'
         });

         Ext.create('Ext.container.Viewport', {
         renderTo: Ext.getBody(),
             items: [ childPanel1, childPanel2 ]
         });
      });
   </script>
</head>
<body>
</body>
</html>

2.4.3

 2.5 代码分析

threejs_room_model:使用three.js进行库房建模，包含货柜，摄像头，灭火器等，其中点击摄像头可以播放视频
08-03
库房建模示例 技术交流群：1018373095 使用three.js进行库房建模，包含货柜，摄像头，灭火器等，其中点击摄像头可以播放视频。 直接下载运行即可，具体内容请看代码，都有详细注释，不明白的可以提issues。 开源不易，且行且珍惜，您的star:sparkles:是我继续完善的动力，谢谢!
extjs 入门实例之布局
fxyyshi的博客
03-10 102
extjs布局，layout使用方法，extjs左右布局，extjs多表格布局。   使用版本ext-4.2.1-gpl，官网直接有下载的。   html代码：     &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html...
集装箱编号校验码规则及java/JavaScript的实现
冯小东
07-31 4848
由于工作原因，最近项目中接触到关于集装箱编号校验的问题，搜索网上资料，借鉴以下两个网址总结一下。 java实现：http://blog.csdn.net/benkwok/article/details/54971387 javaScript实现：http://blog.csdn.net/ttgzs/article/details/1566011 集装箱校验码校验规则： 集装
extjs表单中动态添加items
Ezrealmore
06-22 8239
items:[ var exceptionNumber = 1; var exceptionHandling =new String; { xtype: 'fieldset', title: '异常处理', id:'exceptionHand', defa
[ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
weixin_30553777的博客
08-11 170
本文地址：http://blog.csdn.net/sushengmiyan/article/details/38487519本文作者：sushengmiyan-------------------------------------------------------------资源链接-----------------------------------------------------...
Ext.js 6 示例学习
05-09
Ext.js 是一个强大的JavaScript库，专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件和数据绑定机制，使得开发者可以构建出具有桌面应用级别的交互式网页应用。本压缩包包含两个PDF文档，分别是“Ext...
Ext.js教程完整版
06-29
3. 采用”适配器(adapters)“使得 Ext 和其他的 JavaScript 库共存； 4. 充分利用 AJAX 技术； 5. 在您的语言中展示 ExtJS 对象； 关于 Ext： 我们采用最新的的 Ext 2.x 版本， 1.x 版本到 2.x 版本的是一个重组的...
ext.js监听事件
12-06
ext封装的太死板，里面有常用到的15个ext.js触发事件和监听事件，对ext了解的不是特别深入，大部分都是经常碰到的
ext.js 4.2 demo+文件
10-31
官方文件加示例，ext.js 4.2版本，后面就是凑字数了后面就是凑字数了
Ext.js核心函数详解
07-22
资源名称：Ext.js核心函数详解资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
ext总对form表单items的结构动态添加/删除
小蚂蚁扛大象
11-14 5331
在工作中有这样一个需求:   显示访问记录情况(包括访问状态,  最后访问时间等信息 ),  初始时items只有8个控件,  当多一条数据就需要动态的添 加一个控件,因为每次查询都对items结构进行了修改, 为了不影响下次查询的显示结果,  需要回复items的结构到初始 状态 ,这时候就需要删除多余控件, 操作中遇到的问题:  添加成功, 删除控件, 仍然在页面显示删除的
Ext JS 6组件，容器， 布局
robin xiong的专栏
08-16 7978
组件Ext JS应用的UI是由一个或者多个widgets组称， 我们称之为Components. 所有的组件都是Ext.Component的子类，允许组件自动管理生命周期， 包括instantiation, rendering, sizing and positioning, 以及destruction. Ext JS提供了很多直接可以使用的组件， 能过简单继承，可以创建自定义组件。The Com
如何使用Ext.create() 调用一个窗体
weixin_30902675的博客
07-29 231
Ext.define("Scripts.Code.QM.OutgoingQuality.OQC.ReinspRequest.view.DefectContentsDetailInfoWindow", { extend: "Ext.window.Window", alias: "widget.Ali_DefectContentsDetailInfoWindow", ...
extjs常用的items
u011493599的专栏
05-06 3528
1、改为密码框：     {        fieldlable:'密码',        xtype:'textfield',        inputType:'password'     } 2、不可修改    {     fieldlable:'不可修改',     xtype:'textfield',    readOnly:true    } 3、日期 {
Ext.TabPanel中的items详解
沉浮
05-15 4740
Ext.TabPanel中的items: （来自项目源码中的items条目代码） items:{ id:"opt1", title:"默认页面", tabTip:"这是默认页面，不可以关闭", html:"这是默认页面哦！" },,,, items里面的这一组配置究竟是创建什么组件的配置项，在哪里有说明呢？英文原版api给出了说明。 If an xtype is not ex
Ext.js 集装箱（二）
qq_36987708的博客
01-10 184
各种类型的容器Ext.panel.Panel，Ext.form.Panel，Ext.tab.Panel和Ext.container.Viewport是Ext JS中经常使用的容器。 下面是显示如何使用这些容器的示例。 编号 容器类型和说明 1 Ext.panel.Panel 此示例显示一个Ext.panel.Panel容器 2 Ext.form.Panel...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值