Ext.js 集装箱

最新推荐文章于 2023-03-27 08:30:00 发布
最新推荐文章于 2023-03-27 08:30:00 发布
阅读量170 收藏
点赞数
分类专栏： 前端框架 extjs 文章标签： 前端 extjs 容器组件

容器

Ext JS中的容器是我们可以添加其他容器或子组件的组件。
这些容器可以具有多个布局以将部件布置在容器中。
我们可以从容器和其子元素添加或删除组件。
Ext.container.Container是Ext JS中所有容器的基类。

Ext.js 集装箱

编号描述
1Components inside Container

此示例显示如何在容器内定义组件

2Container inside container

此示例显示如何使用其他组件定义容器内的容器

有各种类型的容器Ext.panel.Panel，Ext.form.Panel，Ext.tab.Panel和Ext.container.Viewport是Ext JS中经常使用的容器。 下面是显示如何使用这些容器的示例。

1.Ext.js 容器内的组件

描述

容器中的组件：我们可以在容器内部有多个组件。

语法

这里是使用容器内部组件的简单语法。

 

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

 

您可以将组件作为容器中的项目

例

以下是显示容器内部组件的简单示例

 

<!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>

这将产生以下结果：

Ext.js 容器内的组件

2.Ext.js 容器内的容器

描述

容器内部容器：我们可以在其他容器内部的容器作为父容器的组件以及其他组件。

语法

这里是使用容器内容器的简单语法：

 

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

 

您可以将容器作为其他容器中的项目

例

下面是一个简单的例子，显示容器内的容器：

 

<!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>

这将产生以下结果：

Ext.js 容器内的容器

 

qq_36987708
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
集装箱3D模型设计
12-27
集装箱3D模型设计适用于室外结构模型设计
Ext.js 集装箱（二）
qq_36987708的博客
01-10 170
各种类型的容器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...
Three.js第1篇，Three.js新手教学，如何使用Three.js（three.js使用流程详细，three.js的使用方式，three.js创建3d物体）
最新发布
weixin_65793170的博客
03-27 3242
Three.js封装了WebGL的底层细节，是一款运行在浏览器中的 3D 引擎，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象，目前在Git上已经拥有90k+的star。
十分钟快速实战Three.js
主要领域：前端开发
11-23 9071
前言 本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。 学习 我们会使用Three.js简单做一个立方体，为了大家更能宏观的了解Three.js。我将会分解成代码段（模块）来进行开发。 模块如下： 场景对象 网格模型 光源 相机 渲染器对象 渲染操作 1. 创建html文件 首先，我们得创建一个html文件，这样才有地方开发。创建完成后，我们可以引入Three.js文件，今天，它
3D可视化集装箱货柜模型开发 --threejs
CPan_的博客
12-16 2565
下图中实现了一个简单的平面，平面的颜色为绿色，但是目前还看到的平面是黑色。如果需要看到场景中的物体真实颜色和才材质，必须在场景中使用光源。类似我们在房间中放了一个物体，如果房间内没有开灯没有外部的光，那么那个物体呈现出来的效果就是黑色，什么都看不见。以下例子是在vue的项目里面实现一个简单的场景渲染，目前场景除了坐标轴并无其他物体。，也就是每次在写3d模型的时候都需要在代码中出现这三部分的代码。给外面集装箱添加透明度，能透视看到具体柜子消息。在需要用的的代码文件里面引入threejs。
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核心函数详解资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
three.js 3D集装箱/切箱demo
tjt740的博客
12-04 1306
three.js 3D集装箱/装箱子展示
AGV智能三维数字物流库房HTML5+WebGL(Threejs)解决方案
ALLENJIAO的专栏
04-23 3113
智能三维数字库房系统是物流系统中的重要组成部分，是一种多层存放货物的立体高架系统。自动化立体仓库采用计算机管理系统、电气控制系统与物流仓储设备的结合，在人工不直接进行干预的情况下自动地存储和取出货物，实现了一种物流管理高效化、货物存取自动化的现代物流作业方式。其还表现出体系化、整体化的特点，三“体”合一，构成了立体仓库给予人的直观感受。而赋予立体仓库这种表现的，则是其组成，包括货架、堆垛机、叉车、AGV、分拣系统等协同配合，以及自动化设备制造商自成一体的解决方案。自动设备提供商不仅为立体...
three.js实现3D模型
前端小白成长记
01-03 1万+
案例完成过程中，遇见问题，可以从网站https://discourse.threejs.org查询解决办法 （一）成功案例一 1.效果图 2.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
Three.js 项目实战之在线3D纸箱包装DIY设计
Webglzhang
03-25 3436
这个项目是在大学的时候做的，做了没多久就移交给下届的同学继续做了，那我今天分享一下这个项目，主要是是给纸箱厂做一个3D在线包装设计，增加包装纸厂的客户流量，并且也能过让用户得到更好的体验，下面展示的是客户端，后台在我同学那边，我就展示一下客户端。 主界面： 登录和注册页面： 核心纸箱3D展示、编辑界面 1.纸箱纹理编辑 2.纸箱平面图展开与折叠 3.平面图展开...
装箱问题---动态规划
DoubleCake的专栏
05-09 1万+
问题描述 　　有一个箱子容量为V（正整数，0＜＝V＜＝20000），同时有n个物品（0＜n＜＝30），每个物品有一个体积（正整数）。 　　要求n个物品中，任取若干个装入箱内，使箱子的剩余空间为最小。 输入格式 　　第一行为一个整数，表示箱子容量； 　　第二行为一个整数，表示有n个物品； 　　接下来n行，每行一个整数表示这n个物品的各自体积。 输出格式 　　一个整数，表示箱子剩余空间。 ...
Threejs 官网 - Three.js 的图形用户界面工具（GUI Tools with Three.js）
太阳火神的美丽人生
07-27 2万+
Threejs 官网 - Three.js 的图形用户界面工具（GUI Tools with Three.js）
使用ThreeJs从零开始构建3D智能仓库——第一章（一切的基础）
热门推荐
homula123的博客
09-23 3万+
使用ThreeJs从零开始构建3D智能仓库——第一章写在前面如何实现从最简单的开始，构建地面准备——浏览器跨域设置初始化场景、相机、灯光、渲染器创建地板创建控制器及其他完整的代码结束语 写在前面 最近因为项目需求，需要构建一个3D仓库，能够显示整个仓库的布局以及库内货物的情况。于是刚入职两年的小白我毅然决然接下了这个沉重的任务（手动狗头），但是我并没有任何关于3D开发的经验，于是乎就各种翻书查百度...
使用ThreeJs从零开始构建3D智能仓库——第五章（添加货架、货物与侧边栏）
homula123的博客
10-21 1万+
使用ThreeJs从零开始构建3D智能仓库——第五章写在前面创建货架对象创建货架、货位类根据配置添加货架添加货物添加信息侧边栏HTML全部代码ThreeJs_Composer.js全部代码Modules.js全部代码结束语 写在前面 本章我们来讲解下如何添加货架货物和显示各类信息的侧边栏。效果如下图所示： 其中货架的层数和每层的货位数量是可以自定义的，比如我这边就是三层每层两个货位。方便起见我在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值