EXT简介-天津博和利软件设计有限公司.ppt

* * Ext简介 基础性的组件 Ext.Component 全体Ext组件的基类 容器组件 Ext.Container 用于承载其它任何组件 表格组件 Ext.Grid 树组件 Ext.tree 菜单及工具栏 Ext.Toolbar 表单及字段 Ext.form 拖放处理 Ext.dd 其它组件 Ext…….. Ext简介 Ext和传统的Web开发大不相同。特别是在界面开发上，不用再纠缠在Html和CSS中，而与Java Swing或者Delphi的开发方式非常相同。 Ext学习成本： Ext简介 Ext提供了庞大丰富的组件体系，学习Ext主要就是学习各种组件的功能、特性及使用方法； Ext组件的基类是Component，组件配置选项、属性、方法及事件都是组件非常重要的特性，需要通过API来熟悉他们的功能及用法； 如何学习Ext： Ext简介 理解Ext组件生命周期、渲染及显示等对于用好Ext是非常关键的； 学习Ext组件及控件需要重点掌握Component及Container这两个基本的组件。 Ext简介 理解Ext组件生命周期、渲染及显示等对于用好Ext是非常关键的； 学习Ext组件及控件需要重点掌握Component及Container这两个基本的组件。 目 录 1 富客户端技术及RIA 应用 3 EXT Demo 实例 2 EXT 简介 EXT Demo 实例 HTML HEAD TITLE/TITLE link rel=stylesheet type=text/css href=js/ext/css/ext-all.css / script type=text/javascript src=js/ext/ext-base.js/script script type=text/javascript src=js/ext/ext-all.js/script /HEAD BODY script var tree=new Ext.tree.TreePanel({ //一个菜单树 title:树, width:200, height:200, loader:new Ext.tree.TreeLoader(), root:new Ext.tree.AsyncTreeNode({text:父,children:[{text:子1,leaf:true},{text:子2,leaf:true}]}) }); Ext.onReady(function() { var win= new Ext.Window({ title:窗口, width:500, height:400, items:tree, buttons:[{text:确定},{text:取消}] }); win.show();}); /script /BODY /HTML 树与窗口： EXT Demo 实例 官方Demo： 日期控件 2 图片播放 3 grid 与 拖拽 4 图片有哪些信誉好的足球投注网站(非官方扩展) EXT Demo 实例 简单模拟协同首页： go EXT Demo 实例 IDE工具支持（spket）： 1、选择Help - Software Updates - Find and Install...- Search for new features to install -New remote site... Name: “Spket”, Url: “/update/”下载 2、Window - Preferences - Spket - JavaScript Profiles - New ；输入“ExtJS”点击OK； 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”； 选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；  EXT Demo 实例 IDE工具支持（spket）： 2、Window - Preferences - Spket - JavaScript Profiles - New ；输入“ExtJS”点击OK； 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”； 选择 “ExtJS”并点击“Add File”，然后在你的.