EXT知识分享培训

ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。
1.3.常用开发工具
Eclipse 插件 spket-1.6.23
1.4. ExtJS的应用
• 使用ExtJS框架的页面中一般包括下面几句：
• <link rel="stylesheet" type="text/css" href="ext3.4.1/resources/css/ext-all.css"/> • <script type=“text/javascript” src=“ext3.4.1/adapter/ext/ext-base.js"></script> • <script type="text/javascript" src="ext-3.4.1/extall.js"></script>
1.6.ExtJS组件
• • • • • • • • • • 1、基本组件 2、Form组件 3、List组件 4、Grid组件 5、Menu组件 6、Tree组件 7、Chars组件 8、Drag & Drop组件 9、Toolbar组件 10、Component Utilities组件
1.6.ExtJS组件——Panel
1.6.ExtJS组件——TreePanel
//创建根节点 var root = new Ext.tree.TreeNode({ text : '根节点' }); //为根节点添加子节点 root.appendChild(new Ext.tree.TreeNode({ text : '一级子节点A' })) root.appendChild(new Ext.tree.TreeNode({ text : '一级子节点B' })) //创建Tree面板组件 var tree = new Ext.tree.TreePanel({ title : '简单的树面板示例', width : 200, height : 100, applyTo : 'tree-div', root : root })
1.6.ExtJS组件——Window
<script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; var win = new Ext.Window({ title : '弹出窗口', width : 200, height : 150, html : '模式窗口', modal : true//是否为模式窗口 }); win.show(); }); </script>
1.5. ExtJS类库
底层API(core)： 提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。 控件(widgets)：可以直接在页面中创建的可视化组件， 比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等。 实用工具Utils：Ext提供了很多的实用工具， 方便实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、 发送Ajax请求、Cookie管理、CSS管理等扩展等功能
1.8.ExtJS布局
布局是指容器组件中子元素的分布、排列组合方式。 Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局， 布局负责管理容器组件中子元素的排列、组合及渲染方式等。 ExtJS的容器组件包含一个layout及layoutConfig配置属性， 分别用来指定容器使用的布局及布局的详细配置信息； 如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局。 Ext中的一些容器组件都已经指定所使用的布局， 比如TabPanel使用card布局、FormPanel使用form布局， GridPanel中的表格使用column布局等，不能给这些容器组件再指定另外的布局。 ExtJS 3.4.1一共包含24种布局， 常用的布局有border、column、fit、form、tabel等布局 。
请求的服务器端数据格式： [ {id:'level1-1',text:'一级节点',leaf:true}, {id:'level1-2',text:'一级节点',leaf:false}, {id:'level1-4',text:'一级节点',leaf:true} ]
1.7.ExtJS事件
1、绑定 addListener( String eventName, Function handler, [Object scope], [Object options] ) 或者简写为 on( String eventName, Function handler, [Object scope], [Object options] ) 2、解除 removeListener( String eventName, Function handler, [Object scope] ) 或者简写为 un( String eventName, Function handler, [Object scope] )
1.6.ExtJS组件——TreePanel （加载远程数据）
//创建根节点 var root = new Ext.tree.AsyncTreeNode({ text : '菜单根节点', id : 'root', //设置异步树节点的数据加载器 loader : new Ext.tree.TreeLoader({ dataUrl : „serverurl' }) }); //创建Tree面板组件 var tree = new Ext.tree.TreePanel({ title : '异步加载树节点示例', width : 200, height : 150, applyTo : 'tree-div', root : root });
1.6.ExtJS组件——FormPanel
Ext.QuickTips.init();//初始化信息提示功能 var form = new Ext.form.FormPanel({ title:'表单',//表单标题 height:100,//表单高度 width:300,//表单宽度 frame:true,//是否渲染表单 labelSeparator :'：',//分隔符 labelWidth : 60,//标签宽度 labelAlign : 'right',//标签对齐方式 applyTo :'form', items:[ new Ext.form.TextField({//文本框 fieldLabel : '姓名',//标签内容 allowBlank : false,//是否允许为空 msgTarget :'side'//显示一个浮动的提示信息。 }), new Ext.form.NumberField({ fieldLabel : '年龄', allowBlank : false, msgTarget :'side' }) ] })
new Ext.Panel({ title:'面板头部（header）', tbar : ['顶端工具栏(top toolbars)'], bbar : ['底端工具栏(bottom toolbars)'], height:200, width:300, frame:true, applyTo :'panel', bodyStyle:'background-color:#FFFFFF', html:'sdfasdfasdf', tools : [ {id:'toggle'}, {id:'close'}, {id:'maximize'} ], buttons:[ new Ext.Button({ text:'面板底部（footer）' }) ] })
1.6.ExtJS组件——TreePanel （加载远程数据）
//创建根节点 var root = new Ext.tree.AsyncTreeNode({ text : '菜单根节点', id : 'root', //设置异步树节点的数据加载器 loader : new Ext.tree.TreeLoader({ dataUrl : „serverurl' }) }); 请求的服务器端数据格式： //创建Tree面板组件 [ var tree = new Ext.tree.TreePanel({ {id:'level1-1',text:'一级节点',leaf:true}, title : '异步加载树节点示例', {id:'level1-2',text:'一级节点',leaf:false}, width : 200, {id:'level1-4',text:'一级节点',leaf:true} ] height : 150, applyTo : 'tree-div', root : root });源自缺点：报错不明确调试有一定的难度。
1.2. ExtJS的文件结构