【ExtJS】contentEl的使用

【【ExtJS】contentEl的使用】的更多相关文章

【ExtJS】contentEl的使用

contentEl 指定一个已存在的HTML元素, 或者一个已存在HTML元素的 id , 它们将被用作当前组件的内容. 此配置选项被用来将一个已存在的HTML元素插入到一个新组件(在组件渲染之后它简单地移动DOM元素) 的layout元素中, 使它成为该组件的内容. 首先在html文件的body里写一个div块,设置其ID为'contentEl_id': <div id="contentEl_id"> <table border="0">…

ExtJS学习之路第七步：contentEl与renderTo的区别

上回在Panel的应用中我们应该能大致区分开conteEl和renderTo,这回我们从定义中区分. 在Panel的API中, contentEl:String指定一个现有的HTML元素或者id作为此组件的内容.这个config选项是用来利用现有的HTML元素,并将其放置在一个新的组件的布局元素(它只是将指定的DOM元素移动到,已经被渲染的组件之中当内容使用)注意:在其他配置的HTML被插入到组件之后,指定的HTML元素被追加到组件的布局元素中,document中将不再包含此元素.这个指定的HT…

使用Extjs组件实现Top-Left-Main布局并且增加事件响应

每次在毕业答辩会上,看到同专业的同学只要是XXX管理系统,就是下图所示的界面,看来这中布局还是很受欢迎的(偷笑).接下来进入我们正题,在web项目无论是前端还是后台管理比较常见的布局就是Top-Left-Main.如图所示: 在平常的接触中,也见到了很多类似的前端框架,例如smartadmin,bootstrap-admin等,在今天我给大家介绍一种更加简洁的构建方式. 项目源码地址:https://github.com/zhangxy1035/extjs 参考资料:http://extjs-d…

Extjs Window用法详解

今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞(youring2@gmail.com)原创,并发布在http://www.qeefee.com/article/extjs-window-in-detail,转载请注明出处…

ExtJS入门教程01，Window如此简单，你怎能不会？

这是一系列ExtJS教程,今天的是第一篇,主要介绍ExtJS中Window的基本用法.希望大家能够支持! 来吧,创建一个漂亮的弹出窗 var win = Ext.create("Ext.Window", { title: "ExtJS Window", width: 500, height: 300, autoShow: true }); 效果: 小伙伴们注意了,如果不加autoShow:true的时候,window是不会显示出来的,当然,我们可以使用win.sho…

ExtJS学习之路第六步：深入讨论组件Panel用法

Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", title:'目标', width:300, height:220, html:'<p>好好学习,天天向上!</p>',//当你添加autoLoad之后,这个内容没有添加上 bodyStyle:'background:pink;color:white', frame:false,//True…

ExtJS学习之路第五步：认识最常见组件Panel

文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Child Components).当向Panel中添加指定的子项(Child Items)或者动态的添加组件时,记得要考虑如何排版Panel中的子元素,这些子元素是否需要Ext内建Layout布局的方案.默认情况下,Panel使用自动(Auto)布局.这种方式,只是呈现子组件,一个接一个向Containe…