ext4 学习笔记(八)[动态加载Js](白鹤翔第一季)
2016-11-07 22:38
274 查看
首先回顾一下Ext创建类,我们先创建一个window.Window组件
接下来我们自定义一个类:
我们这个时候创建调用自定义类:
大家可以看到我们调用自己定义的这个MyWindow很方便,但是如果这个MyWindow想用在整个项目,是不是我们需要把这个js单独提出,正常方式下引入这个js就可以,但是这样如果js很多,而且项目都加载也很庞大,所以我们来看一下Ext给我们提供的一种只有调用这个组件时才加载这个js的方式:
第一步:在js/extjs/添加文件夹 (ux),在这个ux文件夹下 建立自己的组件所对应的js文件
第二步:在js/extjs/ux下编写自己的扩展的组件
注意:这里路径是从项目根目录开始算,而且创建的类名一定要严格遵循包名层次路径编写
第三步:启用ext动态加载的机制 并设置要加载的路径 paths可配置多个
第四步:创建类的实例并使用:
在这里我们如果卟使用这个类,js/extjs/ux下的MyWindow.js文件不会被加载哦 这就是Ext提供的动态加载js方式,
需要注意的地方就是一定要按照包层次路径编写。
好了,这个比较简单,以后还会涉及,现在就暂时先到这里吧。
<span style="font-family:KaiTi_GB2312;font-size:14px;"> Ext.create('Ext.window.Window',{ title:'我是一个窗口', height:300 , width:400 , constrain:true , modal:true , html:'我是窗体的内容!!!!' , renderTo:Ext.getBody() }).show();</span>
接下来我们自定义一个类:
<span style="font-family:KaiTi_GB2312;font-size:14px;"> Ext.define('MyWindow' , { extend:'Ext.window.Window' , //继承Ext的window类 title:'我是一个窗口', height:300 , width:400 , constrain:true , modal:true , html:'我是窗体的内容!!!!' , renderTo:Ext.getBody() });</span>
我们这个时候创建调用自定义类:
<span style="font-family:KaiTi_GB2312;font-size:14px;"> var w1 = Ext.create('MyWindow'); var w2 = Ext.create('MyWindow',{ title:'我是w2' }); var w3 = Ext.create('MyWindow',{ itle:'我是w3' }); w1.show(); w2.show(); w3.show();</span>
大家可以看到我们调用自己定义的这个MyWindow很方便,但是如果这个MyWindow想用在整个项目,是不是我们需要把这个js单独提出,正常方式下引入这个js就可以,但是这样如果js很多,而且项目都加载也很庞大,所以我们来看一下Ext给我们提供的一种只有调用这个组件时才加载这个js的方式:
第一步:在js/extjs/添加文件夹 (ux),在这个ux文件夹下 建立自己的组件所对应的js文件
第二步:在js/extjs/ux下编写自己的扩展的组件
注意:这里路径是从项目根目录开始算,而且创建的类名一定要严格遵循包名层次路径编写
<span style="font-family:KaiTi_GB2312;font-size:14px;">//define的类名,一点要严格按照包层次路径去编写 Ext.define('js.extjs.ux.MyWindow',{ extend:'Ext.window.Window' , //继承Ext的window类 title:'我是动态加载进来的组件', height:300 , width:400 , constrain:true , modal:true , html:'我是窗体的内容!!!!' , renderTo:Ext.getBody() });</span>
第三步:启用ext动态加载的机制 并设置要加载的路径 paths可配置多个
<span style="font-family:KaiTi_GB2312;font-size:14px;"> Ext.Loader.setConfig({ enabled:true , paths:{ myux:'js/extjs/ux' } });</span>
第四步:创建类的实例并使用:
<span style="font-family:KaiTi_GB2312;font-size:14px;">Ext.create('js.extjs.ux.MyWindow').show();</span>
在这里我们如果卟使用这个类,js/extjs/ux下的MyWindow.js文件不会被加载哦 这就是Ext提供的动态加载js方式,
需要注意的地方就是一定要按照包层次路径编写。
好了,这个比较简单,以后还会涉及,现在就暂时先到这里吧。
相关文章推荐
- ext4 学习笔记(六)[Ext.js方法 ](白鹤翔第一季)
- ext4 学习笔记(九)[dom操作一 获取元素](白鹤翔第一季)
- ext4 学习笔记(十五)[Query 常用方法](白鹤翔第一季)
- ext4 学习笔记(五)[Ext.define 新建类](白鹤翔第一季)
- ext4 学习笔记(三) Ext.window.Window(白鹤翔第一季)
- ext4 学习笔记(二) [Ext.window.MessageBox](白鹤翔第一季)
- ext4.X(白鹤翔第一季)学习笔记(二十一)[Observable 自定义事件类]
- ext4 学习笔记(十三)[常用事件方法](白鹤翔第一季)
- ext4学习笔记(二十)[为Ext的UI组件绑定事件](白鹤翔第一季)
- ext4 学习笔记(十一)[操作系方法](白鹤翔第一季)
- ext4 学习笔记一,[自定义类](白鹤翔第一季)
- ext4 学习笔记(十二)[样式操作系方法](白鹤翔第一季)
- ext4 学习笔记(七)[ExtJS扩展原生Javascript](白鹤翔第一季)
- ext4 学习笔记(四) [Ext.windowGroup](白鹤翔第一季)
- ext4 学习笔记(十)[查询系方法](白鹤翔第一季)
- wince驱动学习笔记(vs2005实现流驱动动态加载与卸载 1)
- perl学习笔记(4)——动态加载
- wince驱动学习笔记(vs2005实现流驱动动态加载与卸载 2)
- as3学习笔记4:URLLoader动态加载XML
- JS学习之动态加载script和style样式