这功能不错,相当使用,不用再为动态更换组件仇了,代码很简单就不多说了。
1 | !DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> |
2 | html> |
3 | head> |
4 |
title>加载组件/title>
|
5 |
linkrel="stylesheet"type="text/css"href="../Ext4/resources/css/ext-all.css"/>
|
6 |
scripttype="text/javascript"src="../Ext4/bootstrap.js">/script>
|
7 |
scripttype="text/javascript"src="../Ext4/locale/Ext-lang-zh_CN.js">/script>
|
8 |
styletype="text/css">
|
9 |
/*在此添加样式代码*/
|
10 |
/style>
|
11 | /head> |
12 | body> |
13 |
!--在此添加HTML代码-->
|
14 |
scripttype="text/javascript">
|
15 | |
16 |
Ext.onReady(function(){
|
17 |
if(Ext.BLANK_IMAGE_URL.substr(0,4)!="data"){
|
18 |
Ext.BLANK_IMAGE_URL="./images/s.gif";
|
19 |
}
|
20 | |
21 |
//在此添加ExtJS代码
|
22 |
varpanel=Ext.create("Ext.Panel",{
|
23 |
renderTo:Ext.getBody(),
|
24 |
layout:"auto",
|
25 |
height:500,
|
26 |
width:400,
|
27 |
autoLoad:{
|
28 |
url:"Component.js",
|
29 |
renderer:"component"
|
30 |
},
|
31 |
tbar:[
|
32 |
{text:"加载组件",scope:panel,handler:function(){
|
33 |
panel.loader.load({
|
34 |
url:"Component1.js",
|
35 |
renderer:"component"
|
36 |
})
|
37 |
}},
|
38 |
{text:"加载组件(removeAll)",scope:panel,handler:function(){
|
39 |
panel.loader.load({
|
40 |
url:"Component1.js",
|
41 |
renderer:"component",
|
42 |
removeAll:true
|
43 |
})
|
44 |
}}
|
45 |
]
|
46 |
});
|
47 |
});
|
48 |
/script>
|
49 | /body> |
50 | /html> |
51 | |
关键是autoLoad的定义,renderer可以设置渲染方式,渲染方式有3种:html、data和componet。html方式就是更新innerHTML,data复杂点,是以数据格式更新。componet呢则是使用组件的add方法添加组件。注意第二个按钮的removeAll属性,该属性为true会移除面板内原有的所有组件,然后再添加新的,这为更换grid的显示提供了一个便捷的方式。当然了,不用动态加载,直接使用组件的removeAll方法清除组件,然后使用add也是可以添加的。本文的目的是动态加载,所以就这样使用而已。
Componet1.js
1 |
{xtype:'panel',height:100,width:90,html:"新增的组件"}
|
Componet.js
1 |
{xtype:'panel',height:100,width:200,html:"原有的组件"}
|
分享到:
相关推荐
AJAX: 以JSON数据格式,使用ExtJS构造动态异步加载的树。
NULL 博文链接:https://627443183-qq-com.iteye.com/blog/1725391
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4...
extjs动态生成model、store、panel;sql拼接等多种技术难点
23.文章主题管理,树形结构,动态添加、删除、修改节点(上) 24.文章主题管理,树形结构,动态添加、删除、修改节点(下) 25.个人信息模块、制作主题 26.ExtJS4.2个性主题随心制作(下) 27.ExtJS4.2个性主题随心...
Extjs4.0 实现列隐藏,显示和滚动条动态加载,可以直接跑的代码
ExtJs 的日期控件不带清空功能,项目有可能需要一个带清空功能的日期控件。
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4中创建一个window。 共:10 小节, ...
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
4、ExtJS最常用的表单之textfield控件4 |4 ]8 ~/ d3 Y& k# X 5、ExtJs最常用表单组件Number、CheckBox、Radio* s, r% ~+ k; y# W 6、ExtJs最常用表单组件ComboBox、time、date 7、ExtJS面板Panel t1 E( w8 g6 ?/ L' ...
继承,作用域等)并能熟练使用extjs框架(明确各组件间的继承关系)的人阅读,目的在于对extjs的前台架构进行性能上的优化,核心思想为:“按需索取,晚使用,晚加载晚声明;不使用,不加载不声明;经常访问使用,进行...
ExtJS4推荐定义类的时候均使用Ext.define,利用xtype动态加载 修改了以前的一个登陆窗口,感觉用官方推荐的方法还是很不错的 但还有一些问题没有想得非常清楚,先把代码贴出来一起研究下。请看代码中的注释~~ 使用...
下拉框中要添加一项 ’所有‘ ,由于是combox无法使用option
从ExtJS 4开始,框架不再扩展数组或函数等原生对象,因此,与其它的框架同时加载到页面时,再也不会产生冲突。 应用架构:在ExtJS 4,引入了一个标准化的几乎适合任何ExtJS应用程序的MVC风格的应用架构。使用MVC,...
extjs4.2.1 tabPanel刷新及关闭标签
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3...
一、Extjs的组件结构远比我们想象的复杂 46 二、组件分类 47 三、组件的生命周期 48 四、组件渲染方法render 50 五、小结 52 第九章:按钮与日期选择器 53 一、开始组件学习之旅 53 二、被设计得面目全非的按钮 53 ...