首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用add方法Extjs组件到另一个Extjs组件(现代工具包)

在ExtJS现代工具包中,可以使用add方法将一个ExtJS组件添加到另一个ExtJS组件中。add方法是容器组件的方法,用于向容器中添加子组件。

使用add方法的基本语法如下:

代码语言:txt
复制
container.add(component);

其中,container是要添加子组件的容器组件,component是要添加的子组件。

下面是使用add方法将一个ExtJS组件添加到另一个ExtJS组件的示例代码:

代码语言:txt
复制
Ext.create('Ext.Panel', {
    title: '父组件',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'panel',
        title: '子组件',
        html: '这是一个子组件'
    }],
    listeners: {
        afterrender: function(panel) {
            var childComponent = Ext.create('Ext.Panel', {
                title: '新的子组件',
                html: '这是一个新的子组件'
            });
            panel.add(childComponent);
        }
    }
});

在上面的示例中,我们创建了一个父组件Panel,并在items配置项中添加了一个子组件Panel。在父组件的afterrender事件监听器中,我们创建了一个新的子组件childComponent,并使用add方法将其添加到父组件中。

通过这种方式,我们可以将一个ExtJS组件添加到另一个ExtJS组件中,实现组件的嵌套和组合。这在构建复杂的用户界面时非常有用。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云容器服务(TKE)、腾讯云数据库MySQL版(TencentDB for MySQL)。

腾讯云产品介绍链接地址:

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云容器服务(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云数据库MySQL版(TencentDB for MySQL):https://cloud.tencent.com/product/cdb_mysql
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ext JS 教程-布局和容器 原

布局系统是ExtJS中一个强大的组成部分。它控制着应用程序的每一个组件的尺寸和位置。这个操作手册包含开始使用布局的基础操作。...容器 一个ExtJS应用程序的用户界面由组件构成(更多关于组件的信息见组件指南)。一个容器是一个能够包含其他组件的特殊组件。一个典型的ExtJS应用程序几个层和嵌套的组件构成。 ?...这一部分我们将讨论如何去配置容器使用一个定制的布局,还有布局系统是如何保持所有东西都是同步的。 使用布局 在上面的例子中,我们没有定制容器Panel的布局。...布局系统是如何工作的 一个容器的布局对容器的初始化和容器下面所有子组件的尺寸负责。框架内部调用容器的doLayout方法触发布局去为所有容器的子组件计算正确的尺寸和位置,并且更新DOM。...doLayout方法是全递归的,因此任何容器的子元素也都会让它们的doLayout方法得到调用。这样一直持续到达底部的组件层级。

1.8K10
  • Ext JS 4预览:更快、更简单、更稳定

    主题 ExtJS本身就有一套很漂亮的主题,但是在ExtJS4中我们把它提升到另一个水平——"海王星"。这得益于现有主题的干净的设计,但是给我们的应用带来一个全可视的更加有光泽。...在ExtJS我们已经大规模的升级了data包,难以置信新特性包括,模型之间的关系和保存数据本地存储。...在ExtJS4中我们通过一个完整的应用架构解决这个长时间存在的问题,这个架构可以在盒子外使用。 应用架构是一个标准化应用构建的方法。他们按相同的方式工作,遵循相同的模式并具备相同的文件结构。...我们知道有些人现有的应用或者他们拥有的应用架构,他们坚持使用……我们在ExtJS4明年发布之前还将参考更多和应用架构的信息。 升级组件 框架中的每个组件都被ExtJS4赋予了注意力。...但是我们还是添加了一些新的组件框架中。其中两个最流行的组件扩展——RowEditor和TreeGrid已经被内置框架中了,重写以适应我们期待的高质量组件标准。 ?

    2.4K60

    EXT基础

    •exmaples:提供使用ExtJs技术做出的小实例。 •resources:Ext UI资源文件目录,如CSS、图片文件都存放在这里面。...Ext的用户界面是依靠CSS的,但是CSS是通过为很多HTML元素提供样式来拼凑出Ext的组件的。唯一能够跨浏览器且保持精准大小的只有图片。所以图片被用来定义Ext组件如何展现。...每一个控件都要指明该控件需要渲染哪一个DOM节点。  ...•getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法中只有一个参数,也就是组件的id。...Accordion布局由类Ext.layout.Accordion定义,名称为accordion,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式。

    4.3K40

    程序员Web面试之前端框架等知识

    所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。...ExtJS ExtJS 是最流行的 JavaScript 框架之一,提供了非常丰富的 UI 组件,包括高性能的数据表格、图表、选项卡、弹窗、工具条和菜单等等整套的 Web UI 组件,可以帮助你构建用户体验良好的...Dojo Toolkit Dojo 自从诞生那天起就成为了 ExtJS 的有力竞争者,它最大的优势在于免费,可以在商业项目中自由使用。...官网例子:http://knockoutjs.com/examples/helloWorld.html Bootstrap: Twitter推出,一个开源的用于前端开发的工具包。...UI框架,Wijmo中的每个组件都拥有丰富的功能、易使用、极佳的性能。

    2.2K50

    Ext JS 教程-MVC架构 原

    在最后你将会指导如何使用心得ExtJS 4 应用程序架构将简单的应用程序组织一起。 应用程序架构提供了架构和一致性的意义和提供了实际的类和框架代码一样重要。...init方法是一个决定你的控制器如何同视图交互的好地方,而且它常常和另外一个控制器函数control一起使用。 ...这个control方法使用新的ComponentQuery引擎去迅速简单的获取页面上组件的引用。...现在我们想添加一个展示我们系统中所有用户的表格,是时候更好的组织我们的业务逻辑并且开始使用视图了。 视图更像是一个组件,常常定义成一个ExtJS 组件的子类。...ExtJS 4中的每一个组件都有一个down方法,它接受一个ComponentQuery选择器去快速寻找任何子组件。 双击表格中的一行,将发生下面这样的事情: ?

    3.3K10

    动态加载 ExtJS 类库

    动态加载 ExtJS 类库 ExtJS 是一个非常优秀的 JS 框架, 由于 ExtJS 自身非常庞大, 用于开发测试的 ext-all-debug.js 文件达到了 3.24M , 如果是再加载带注释的...ext-all-debug-w-comments.js 则更是达到了 6M , 可以说是非常庞大了, 因此动态加载 ExtJS 是很有必要的, 接下来就介绍如何ExtJS 做动态加载。...根目录下的 ext-debug.js , 不是 ext-all-debug.js, 这个文件非常小, 只有几百K , 当让这个只是最基本的 ExtJS 组件, 不包括任何的界面功能。...从图中可以看出, 现在只加载了css和少量的脚本, 并没有加载 ExtJS 额外的组件。...结论 从上面的测试可以看出, 动态加载 ExtJS 是可以的, 但是文件有点儿多, 仅仅创建一个简单的窗口就需要加载 100 多个文件, 所以最终的建议是将所需要的 ExtJS 组件单独编译成一个文件或者直接使用

    2.2K20

    ExtJS4预览:渲染过程重构和标准化

    在过去的四年,ExtJs代码库已经进化了,新组件被加进来,编码标准也改进了。在这个过程中,为了重构旧组件有必要经常追溯回去以保证他们也被改进。 在ExtJS4之前渲染组件没有标准的方式。...ExtJS4,我们的目标是统一这些方法为一个标准的方法,那就是XTemplate和DomQuery。这个标准允许开发者很容易针对弹性需求构建出强健的组件。这个标准将在所有我们的组件使用。...引入(介绍)renderTpl、renderData、renderSelector ExtJS中的所有组件的展现都是基于一个基础的具有唯一ID的具有component类(cls\cmpCls\baseCls...renderSelectors的作用域是基于base div元素并且可以使用标准的css选择器。这些元素引用是组件生命周期的一部分,并且将在组件销毁时被自动移除。...一展现出来changeIconCls方法就可以使用iconEl属性了。

    1.1K100

    JQuery EasyUi之界面设计——前言与界面效果(一)

    基本的组件都用,即“麻雀虽小五脏俱全”。 使用简洁方便,比如支持html+js。 可扩展性。 可维护性。...再比如组件使用,官方文档的描述也就那么几页,使用起来,也就那么几个方法与事件,但基本够用了。 个人不喜欢固步自封,喜好使用对自己来说有点神秘和陌生的技术。...extjs如一个行动不便的美妇,其脚本太庞大,对象太丰富,并且不利于维护;ext.net如一个打扮得花枝招展的裹脚的妇女,其将extjs封装成服务器控件,虽然其维护起来不错,体验不错,使用方便,但是我不喜欢使用服务器控件的这种方式...,也不喜欢其包了一层有一层的外壳,调起问题来从ASP.NETEXT.NETextjs;而easyui,则如一个清纯的少女,从外表即可窥探内心,清秀而不失美观。...弹出窗口可以用于新增|编辑,也可以用于其他功能,这个效果与extjs的window差不多。 新增与编辑 ? easyui的form自带验证、提交、重置与赋值,使用起来简单方便。 提示框 ? ? ?

    1.5K40

    ExtJs学习笔记(20)-利用ExtJs的Ajax与服务端WCF交互

    ExtJs是一套非常不错的javascript UI库(第一次接触ExtJs的,可到官方网站http://www.extjs.com/deploy/dev/examples/samples.html看下示例...相信不少人会心动的),不仅组件丰富,效果漂亮,而且ExtJs集成的Ajax功能可以方便的与.Net的WCF进行交互....这里我们将演示ExtJs的FormPanel从WCF加载数据,以及如何提交数据WCF服务端 1.首先来定义一个用于传输信息的Class(实际开发中,可以是Linq to Sql的Class或任何可序列化的实体类...,GetMyData用来让ExtJs获取WCF端的数据,SaveMyData,SaveMyData2用来保存ExtJs提交过来的数据,区别是SaveMyData用于Get方法,SaveMyData2用于....html 测试效果图: 1.加载数据 2.Get方法提交数据 3.Post方法提交数据

    97570

    Ext整体印象

    其实国内不乏有自己开发自己框架的公司,比如上海的道锐(不如Ext全面,更侧重于其业务经验)等,一直以来我们关心的重点都在服务器端(如程序结构、设计模式、数据库设计、运行平台、数据访问组件等),在当前Web...ExtJS包括 高性能的可自定义的UI组件 设计良好的可扩展的组件模型 直观而且易用的API 商业与开源双重许可证 商业许可证也分多种级别(银-金-铂金-砖石) 开源许可证 2008...作为一个软件架构师他曾在过多种平台使用多种语言做过从产品设计企业系统开发的工作。...从Ext的文件结构远眺Ext山脉走向 整体 源代码 实际体验如何把Ext的基本Demo整合到我们的应用中来 Ext的GUI Designer,提供可视化设计工具,生成界面的对象json表达...,嵌入应用中,对于新手入门很方便,也可以提高工作效率和代码产出,当然积累比较多后直接复制现有代码是最有效的办法。

    1.6K70

    ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页

    ExtJs的Grid组件虽然不管从哪一方面来讲,都称得上是很好很强大,但是总会有一些应用场景并不需要这么多功能,比如网站的留言列表,开发者只想要一个简单的或列表而已,这时候XTemplate...本文将讲解如何用XTemplate结合WCF与服务端交互,生成数据列表,同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能) 1.先做一些准备工作,写一个通用的类...)] public string F_Reply { } } 为阅读方便,去掉了一些自动生成的代码 4.建一个WCF服务,并添加一个方法...F_IP = "192.23.37.41", F_Date = DateTime.Now, F_Content = "这是第一条留言", F_Reply = "" }); _List.Add...script type="text/javascript"> Ext.onReady(function() { //定义XTemplate模板组件

    1.4K50

    周末浅谈-WEB前端组件

    你们它们从方法配置,工具,都自成一套。虽然根子上都是操作DOM,操作DATA,但思路都各不相同。...抛开这此框架不谈,单说组件,这东西至少包括四部分: 1,自定义的元素或DOM导入,例如,React,用jsx搞成类xml的东西,还有Extjs的requires 按需加载 2,html模板,例如,叫个框架就有...接着往下说哈,前些日子,讲自定义单选 & 复选框的时候,我说过要讲组件的生命周期,后来许多同学说不行啊得慢点,就暂时先放下了,咱们现在就先聊几句组件生命周期,因为无论如何,这个东西必须得学呀。...,绑定的事件啊; 4,清理期,就是此组件和其它元素的关系,还有它用到的变量,该删删,该清清; 在这几个过程中,会有不同的方法被调用,每一个生命周期内部又会再根据不同情况,添加不同事件,调用不同的方法。...当然了,import的使用,也是要有限度的,你不能搞成多个页面互相依赖加载,那就有点麻烦了。

    92250
    领券