Ext js 学习笔记

阅读更多

Extjs的目录信息：
4.1版本的
Builds目录：包含沙盒，CORE和foundation 3个压缩好的脚本文件及其调试文件
Docs:API文档目录
Locale:本地化文件目录
Pkgs：独立的包文件
Resources:Ext js4 的资源目录，包含了样式定义文件及其需要的图片文件
Src:EXTjs 文件目录
Welcome：EXT.JS欢迎页面所需的资源目录
Bootstrap.js:会根据url地址自动加载ext-all.js,或ext-all-debug.js文件。此文件只在正式发布版本中有
Ext.js:EXT CORE的库文件
Ext-all.js：ext js 库文件（压缩）
Ext-all-debug.js:调试应用程序时使用的EXT JS库文件（不带注释）
Ext-all-debug-w-commemts.js:调试应用程序时使用的EXTJS的库文件（带注释）
Ext-all-dev.js:用于诊断布局问题的EXT JS库文件
Ext-all-dev-w-comments.js:带注释的诊断库文件
Ext-debug.js:调试使用EXT CORE 开发的程序时的EXT CORE库文件
Index.html:Extjs 4欢迎页面

2.配置使用的EXT JS库
要使用EXT JS 首先要做的就是将EXT JS包里的resources 目录，bootstrap.js文件，ext-all.js文件和ext-all-debug.js文件以及本地的local语言包

3.第一个EXT JS程序的案例hello world!
















以上的案例中关于EXT.onReady
将代码写在Ext.onReady中，而不是在body中添加一个onload事件，只要原因是Ext.onReady在DOM模型加载完成后即可进行操作，而onload只能是等待页面所有资源都加载完毕后才能进行操作。

EXT js4 语法
1.配置对象
{
Config_option1:value1,
Config_option2:value2,
...
Config_option3:value3,
Layout:{},
Items:[
{},//配置对象
{}
],
Listeners:{
Click:funciton(){}
}
}

格式中Config_option1:value1 都是API文档中的配置项
Layout:既可以是对象也可以是字符，表示在当前容器内使用什么布局来填充子控件
Eg:如果没有特殊要求：layout:”fit”
有特殊要求：layout:{
Type:’hbox’,
Align:’middle’
}

Items:是数组，可以在里面定义当前子控件

3.Ext.create()方法创建对象
语法：Ext.create(className,[config])

4.Ext.widget或Ext.createWidget创建对象
Ext.widget(className,[config])