ExtJS课程内容 for v3.3 & JS/CSS

简介: ExtJS101—JS、CSS基本面内容JavaScriptand CSS Fundamentals 本课程面向Web客户端开发的初学者而设,或者想梳理一下有关JavaScript、CSS等客户端方面的开发基本面知识,都可以在本课程学习到。

ExtJS101—JSCSS基本面内容JavaScriptand CSS Fundamentals

本课程面向 Web客户端开发的初学者而设,或者想梳理一下有关 JavaScriptCSS等客户端方面的开发基本面知识,都可以在本课程学习到。

This course is targeted forthose that are new to client-side web development, need a refresheror who wish to expand on current JavaScript, CSS and client-sidedevelopment knowledge.

课程应具备Prerequisites
  • HTML基本 HTMLfundamentals

  • 编程背景Programmingbackground

CSS
  • CSS 选择器CSSSelectors

  • 浮动与CSS定位Floatsand CSS positioning

  • CSS样式CSSstyling and shortcuts

  • CSSspecificity

Javascript
  • 基本介绍(变量、条件语句、操作符、循环)BasicsOverview (variables, conditionals, operators, loops)

  • 数组和对象。Arraysand Objects

  • 函数。Functions

  • 闭包。Closures

  • 计时器。setTimeoutand setInterval

  • 对象指针this 和如何绑定对象。this andobject binding

  • 动态调用函数Dynamicfunction calls

  • JS的异步方式与回调函数。Asynchronousjavascript and callbacks

  • 异常处理Errorhandling

DOM操控Manipulating theDOM
  • DOM API

  • innerHTML

  • DOM片段Documentfragments

调试工具Debuggingand Tools
  • Aptana

  • Firefox

  • Firebug

  • Internet ExplorerDeveloper Toolbar

  • Safari Console

kjjkj

ExtJS201—FastTrack to Ext JS 3.3 Development

深入学习 ExtJS3.3框架与UI组件。假设你已具备一定程度扎实的JSCSS水平,以便可以快速学习ExtJS 框架,能够在项目中使用各种基本的ExtJS组件。

This hands-on course providesin-depth, coverage of the Ext JS 3.3 framework and UI components. Itis targeted for those who have a solid understanding of JavaScriptand CSS and who want to get a jumpstart to being immediatelyproductive with Ext JS. This course also provides extended coverageof the Ext JS framework. It includes custom component creation,creating Ext themes using CSS, and UI prototyping. The courseincludes intensive hands-on labs and by the end of the course, youwill have built a functioning user interface with Ext JS whichconnects to live data feeds using JSON. This course also includes ahalf-day module using Ext Designer to build end-to-end webapplications.

CoursePrerequisites

  • 应具备一定扎实程度的JavaScript/HTML/CSS使用经验。

  • 了解JSON结构

  • Prior experiencedeveloping applications in JavaScript and HTML

  • Familiarity withJavaScript Object Notation (JSON)

  • Priorexperience developing Cascading Style Sheets

课程大纲

基础类FundamentalClasses
  • 元素对象Ext.Element

  • 复合元素Ext.CompositeElement

  • DOM工具函数Ext.DomHelper

  • ExtCSS选择器Ext.DomQuery

事件机制EventHandling
  • DOM原生事件以及Ext制定的事件。Eventsin Ext & DOM Events

  • 观察者模式以及如何应用。Observableclasses

  • 编写自己的事件,如何手动触发事件等问题。CustomEvents

  • 事件处理器本质和事件委托的应用。EventHandlers & Delegated Event Handling

组件模型ComponentModel
  • 概述。Overview

  • 组件如何统一被管理?ComponentManager

  • 如果透过延时渲染来改进组件性能。DeferredRendering

  • 组件与元素之间比较。Componentvs. Element

  • 理解组件的配置项。Componentconfiguration

容器与布局管理器Containersand Layout Management
  • 容器。Containers

  • 不同的布局风格。LayoutManagers

异步通讯Ajax
  • 发起异步请求。Creatinga Request

  • 回调函数的概念,成功和失败不同情况下的回调函数。UsingSuccess & Failure callbacks

  • 异步通讯封装更为完善的Updater类介绍。Ext.Updater

Ext数据包Ext.data Package
  • 远程通讯基类。Connection

  • 数据转换器。Readers

  • 本地/远程通信类。Proxies

  • 实体类。Records

  • 实体容器类。Stores

自定义组件CustomComponents
  • 通过扩展ExtJS组件来创建新的组件。ExtendExt JS Components to create Custom Components

利用设计师快速创建ExtJS界面Build Live Ext JS Apps Fast withExt Designer
  • 利用设计师快速创建ExtJS界面。Rapidlycreate rich Ext JS interfaces with Ext Designer

  • 创建和配置组件。Createand Configure Components

  • 创建和配置数据源。Create/ConfigureData Stores

  • 输出代码和JSONGenerateCode and JSON

  • 实现业务逻辑。ImplementBusiness Logic and Behavior

面板与数据视图 Templates& DataView
  • 简单模板与高级模板。Template& XTemplate

  • HTML 与模板的转化。StoringTemplates in Markup

  • 渲染函数。Memberformatting functions

  • Store、模板二者结合:DataViewUsingTemplates with a DataView

UI的状态Persisting UI State
  • 有态化组件。StatefulComponents

  • 供应器与管理器之间的比较。Providervs. Manager

  • 设置一个供应器。Settinga Provider

  • 围绕应用程序的有态化管理。ApplicationSpecific State Management

工具函数UtilityFunctions
  • Ext.apply

  • Ext.util.Format

扩展新类Creating& Extending Classes
  • 如何定义新的类。Creatinga Class & Extending a Class

  • 对现有的组件扩展。Extendinga Component

国际化Internationalization
  • 本地化支持。EnablingLocale Support

  • 已支持的本地化。SupportedLocales

  • 国际化你的组件。Globalizingyour Components

拖放Drag &Drop
  • 实现自定义的拖放。ImplementCustom Drag and Drop

手把手介绍组件的用法Hands-onExperience w/ Common Components
  • 视口。Viewport

  • 多标签页。TabPanel

  • 数据表格。GridPanel

  • 树。TreePanel

  • 表单。FormPanel

构建主题Buildinga Theme
  • 制定主题。Createcustom themes

  • CSS精灵”的概念。Createand use sprites

  • 通过覆盖CSS制定软件皮肤。OverrideCSS to generate custom skins

应用程序架构 ApplicationArchitecture
  • 设计与重构代码。Designor Refactor Applications

  • 应用程序最佳实践。ApplicationBest Practices

打包ExtJS项目BuildingExt And Your Project
  • 安装、维护、部署JSCSSSetup,Maintain and Deploy the JavaScript & CSS

  • JSCSS优化、压缩。GenerateCompressed JavaScript & CSS


目录
相关文章
|
1月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
21天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
12天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
12天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
54 1
|
17天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
33 3
|
21天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
27天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
78 6
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战