`
xyz20003
  • 浏览: 292702 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

在下计划写一份extjs的使用教程,请诸位指教。

阅读更多
在下才疏学浅,为了整理一下这段时间学习的extjs,计划写一份extjs使用教程,上网搜索了一下才发现现在写extjs学习文档的不少,但似乎没有系统的教程,都是东一榔头,西一棒槌,要么就是全盘翻译api。

在下打算系统写一下有关extjs的流程,目前有了一份初稿的目录结构,请大家指点一下,也有一个想法,现在市面上都没有关于extjs的书,不知道我们写完后能不能出书。

下面是现在的目录结构,谢谢大家了。

说在前头的
1. 闪烁吧!看看extjs那些美丽的例子。

    1.1. 一切从extjs发布包开始
    1.2. 看看ext-1.1.1的文档
    1.3. 看看ext-2.0的文档
    1.4. 为什么有的例子必须放在服务器上才能看到效果?
    1.5. 为什么自己按照例子写的代码,显示出来总找不到图片
    1.6. 我们还需要什么?
    1.7. 入门之前,都看helloworld。

        1.7.1. 直接使用下载的发布包
        1.7.2. 只把必要的东西放进项目中

2. 震撼吧!让你知道ext表格控件的厉害。

    2.1. 功能丰富,无人能出其右
    2.2. 让我们搞一个grid出来耍耍吧。
    2.3. 上边那个是1.x的,2.0稍微有些不同哦
    2.4. 按顺序,咱们先要把常见功能讲到,让grid支持按列排序
    2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么?
    2.6. 更进一步,自动行号和多选checkbox

        2.6.1. 自动行号
        2.6.2. 全选checkbox的时间了,请允许我让2.0先上场。
        2.6.3. 1.x时代的全选checkbox。

    2.7. 分页了吗?分页了吗?如果还没分就看这里吧。

        2.7.1. 表面工作,先把分页工具条弄出来。
        2.7.2. 2.0赐予我们更大的灵活性
        2.7.3. 迫不得已,要加上后台脚本了。
        2.7.4. 其实分页不一定要踩在脚下,也可以顶在头上。

    2.8. 可编辑表格,改变大小,表格间拖拽,树与表格间拖拽。

3. 歌颂吧!只为了树也要学ext。

    3.1. 真的,我是为了树,才开始学ext的。
    3.2. 传统是先做出一棵树来。
    3.3. 超越一个根
    3.4. 你不会认为2.0里跟1.x是一样的吧?
    3.5. 这种装配树节点的形式,真是让人头大。
    3.6. jsp的例子是一定要有的
    3.7. 让你知道树都可以做些什么

        3.7.1. 检阅树形的事件
        3.7.2. 右键菜单并非单纯的事件
        3.7.3. 默认图标好单调,改一下撒
        3.7.4. 偷偷告诉你咋从节点弹出对话框
        3.7.5. 小小提示

    3.8. 灰壳显灵!让我直接修改树节点的名称吧!
    3.9. 我拖,我拖,我拖拖拖。

        3.9.1. 树形节点的拖拽有三种形式
        3.9.2. 用事件控制拖拽

            3.9.2.1. 叶子不能append
            3.9.2.2. 把节点扔到哪里啦

    3.10. 更深一步,整合起来就是一个完整的树形操作。

4. 祝福吧!把表单和输入控件都改成ext的样式。

    4.1. 不用ext的form啊,不怕错过有趣的东西吗?
    4.2. 慢慢来,先建一个form再说
    4.3. 胡乱扫一下输入控件
    4.4. 起点高撒,从comboBox往上蹦

        4.4.1. 凭空变出个comboBox来。
        4.4.2. 把select变成comboBox。
        4.4.3. 破例研究下comboBox的内在本质哟
        4.4.4. 嘿嘿~本地的做完了,试试远程滴。
        4.4.5. 给咱们的comboBox安上零配件
        4.4.6. 每次你选择什么,我都知道
        4.4.7. 露一小手,组合上面所知,省市县三级级联。哈哈~

            4.4.7.1. 先做一个模拟的,所有数据都在本地
            4.4.7.2. 再做一个有后台的,需要放在服务器上咯

    4.5. 把form里的那些控件全部拿出来看看
    4.6. 还要做,字段验证呀,表单提交啊,表单布局咯,文件上传哟

5. 雀跃吧!超脱了一切的弹出窗口。

    5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。
    5.2. 先看看最基本的三个例子

        5.2.1. Ext.MessageBox.alert()
        5.2.2. Ext.MessageBox.confirm()
        5.2.3. Ext.MessageBox.prompt()

    5.3. 如果你想的话,可以控制得更多

        5.3.1. 可以输入多行的输入框
        5.3.2. 再看一个例子呗
        5.3.3. 下一个例子是进度条
        5.3.4. 动画效果,跳出来,缩回去

    5.4. 让弹出窗口,显示我们想要的东东,比如表格

        5.4.1. 2.0的弹出表格哦
        5.4.2. 向2.0的window里加表格

    5.5. 更进一步撒。

6. 奔腾吧!让不同的浏览器里显示一样的布局。

    6.1. 有了它,我们就可以摆脱那些自称ui设计师的人了。
    6.2. 关于BorderLayout
    6.3. 嗯,不如再看看附加效果

        6.3.1. 先看看split
        6.3.2. 再试试titlebar
        6.3.3. 还不够,还不够,让四周的区域可以缩起来
        6.3.4. 给这些区域都加上个关闭按钮
        6.3.5. 用NestedLayoutPanel在五块中再进行分割,实现更复杂的布局

    6.4. 2.0的ViewPort是完全不同的实现
    6.5. 稍稍感叹一下2.0的简洁吧,让人吃惊的还在后头呢。

7. 低鸣吧!拖拽就像呼吸一样容易。

    7.1. 如此拖拽,简直就像与生俱来的本能一样。
    7.2. 第一!乱拖。
    7.3. 第二!代理proxy和目标target
    7.4. 再拖!再拖拖。

8. 哭泣吧!现在才开始讲基础问题。

    8.1. Ext.get
    8.2. 要是我们想一下子获得一堆元素咋办?
    8.3. DomHelper和Template动态生成html

        8.3.1. DomHelper用来生成小片段
        8.3.2. 批量生成还是需要Template模板

9. 沉寂吧!我们要自己的控件。

    9.1. 下拉树形选择框TreeField
    9.2. 带全选的checkbox树形CheckBoxTree
    9.3. 带全选的checkbox的grid
    9.4. fisheye
    9.5. 可以设置时间的日期控件
    9.6. JsonView实现用户卡片拖拽与右键菜单
    9.7. 下拉列表选择每页显示多少数据

10. 撕裂吧!邪魔外道与边缘学科。

    10.1. dwr与ext整合

        10.1.1. 无侵入式整合dwr和ext
        10.1.2. DWRProxy
        10.1.3. DWRTreeLoader

    10.2. localXHR让你在不用服务器就玩ajax

A. 常见问题乱弹

    A.1. ext到底是收费还是免费
    A.2. 怎么查看ext2里的api文档
    A.3. 如何在页面中引用ext
    A.4. 想把弹出对话框单独拿出来用的看这里
    A.5. 想把日期选择框单独拿出来用的看这里
    A.6. 听说有人现在还不会汉化ext
    A.7. 碰到使用ajax获得数据,或者提交数据出现乱码
    A.8. TabPanel使用autoLoad加载的页面中的js脚本没有执行

B. 修改日志
C. 后记

    C.1. 2007年12月5日,迷茫阶段

        C.1.1. 仇恨
        C.1.2. 反省

    C.2. 关于ext与dwr整合部分的讨论
    C.3. 怎么看文档附件里的范例

D. 贡献者列表

    D.1. 感谢[飘17804726]的大力支持
    D.2. 感谢[吧啦吧啦286556983]的大力支持
    D.3. 感谢[游戏人生395181055]的大力支持
    D.4. 感谢[綄帥77793603]的大力支持
    D.5. 感谢[葡萄5793699]的大力支持
    D.6. 感谢[天外小人442540141]的大力支持
    D.7. 感谢[我想我是海39893874]的大力支持


在线预览:http://203.93.254.59:8889/extdoc/html/index.html 2007-12-13内容不断更新中。

请大家在看我们的教程前,请先阅读文档的前言“写在前头的”http://203.93.254.59:8889/extdoc/html/preface.html,确定对这部分没有异议,再继续浏览其它部分。免得日后有什么争执,谢谢。

分享到:
评论
39 楼 gstripe 2007-12-08  
晕,晚上我不睡觉了。操起EDITPLUS继续学下去,太有意思了,不过,我要先去洗个澡。
38 楼 gstripe 2007-12-08  
本人很有兴趣地看下去,感觉文字有意思,不死板。
37 楼 laiseeme 2007-12-08  
myy 写道
期盼吧!原来教程也可以这样抒情。
36 楼 wjd2002 2007-12-07  
非常感谢!
35 楼 hlxiong 2007-12-07  
功德无量!
34 楼 sheva.wen 2007-12-07  
喜欢本书的标题。。。
这样的教程,吸纳更多人不更好?弄个WIKI吧,大家一起维护。
33 楼 xyz20003 2007-12-07  
2007-12-07文档更新

1.第二章加入grid分页介绍
2.第六章加入对2.0中ViewPort布局管理的简介

谢谢诸位的关注和意见。:)
32 楼 crabboy 2007-12-06  
gazhangting 写道
这个东西,怎么看都不正式,第一,他不是真正开源.第二,它从来都没有正式说过是免费还是怎么样.第三,稳定性不是很好.第四,只有真正开源才会有市场.就像java的一些开源包.得好了很好的推广.以上只是对出书的看法.


我觉得写得很另类,也很好,值得鼓励。
国内大多数作者写书有个特点:唯恐大家不知道他的知识学的深邃,见解有深度,把本来就很深奥的计算机技术写得连他自己一时半伙都弄不明白。
难道你没看过 国外的 head first 系列吗?通俗易懂,很生动、很活泼,更乐意接受。我想这是一种境界,体现了作者驾驭知识的能力。值得鼓励呀!
31 楼 D调的华丽 2007-12-06  
最好能共享,那样看的人更多!
30 楼 huangfengjing 2007-12-06  
有时间多去官方论坛里面看看,里面这样的教程太多了,基本上都有多国语言的支持.
29 楼 huangfengjing 2007-12-06  
厚道一点撒,还要钱?
别人 EXTJS 都不要钱了,白给你用,你用了还拿别人的东西来卖钱,真是的
28 楼 bird 2007-12-06  
写的很有新意  期待中……
27 楼 92java 2007-12-06  
看了楼主的教程。挺有意识的。
期待深入和更新。
26 楼 rockjava 2007-12-06  
这几天正考虑是否学习这个呢
25 楼 rainytooo 2007-12-06  
我和你一样啊 也是为了tree才学习用Ext的
不过带checkbox的最后还是用了YUI
24 楼 fangzhouxing 2007-12-06  
xyz20003,谢谢你写出这样好的文字!你真的太有才了!!!
23 楼 skyey 2007-12-06  
关注,ext本来就是开源,你怎么弄个不开源代码? 而且我记得这个论坛有
22 楼 xredleaf 2007-12-06  
正需要这样的文档,强烈支持
21 楼 zhengzhili 2007-12-06  
谢吧写吧,期待你的文章
20 楼 roy1021 2007-12-06  
这个提纲。。。怎么象文科人写出来的啊,理科的还是明确概要的好,个人意见哦!楼主有需要帮忙的地方尽管说!

相关推荐

    ExtJs视频教程整包打包

    ExtJS 文字教程 extjs2 dojochina系列 extjs2视频教程 DOJO Extjs3-北风 Extjs3-大漠 ExtJS3.4-界面实战 extjs4 30集 uspcat系列 extjs4 其他视频一套 Extjs4.0MVC项目开发视频教程 extjs4.1.1视频教程 ExtJS4培训...

    extjs教程,extjs教程,extjs教程

    extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程

    ExtJs4.0入门教程

    ExtJs4.0入门教程,详细介绍ExtJs4.0。

    dojo china extjs 视频教程源码

    本教程源码中,"dojo china extjs 视频教程"部分将帮助学习者了解如何在Dojo的基础上集成和使用ExtJS的组件。通过视频教程,你可以看到实际操作过程,从而更好地理解和掌握这两个框架的协作方式。源码则提供了实践中...

    extjs资源大全 教程 手册

    3. **使用教程**:ExtJS使用教程.pdf文件可能是一份详尽的教学材料,它可能会涵盖EXTJS的安装、配置、组件创建、布局管理、数据绑定等内容。通过教程,开发者可以按照步骤学习EXTJS的使用,逐步提升技能。 4. **...

    EXTJS入门教程(非常详细)

    但总体上,EXTJS入门教程提供了一个全面的EXTJS框架介绍,包括基础概念、使用方法以及如何构建一个基础的应用程序。通过这个教程,即使是初次接触EXTJS的开发者也可以快速上手,并开始构建自己的Web应用程序。

    ExtJS2.0简明教程

    教程包括ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例应用等,是一个非常适合新手的ExtJS 入门教程。本教程主要是针对ExtJS2.0 进行介绍,全部代码、截图等都是基于ExtJS2.0。

    ExtJS教程_完整版

    ExtJS教程全面介绍了ExtJS框架的基本功能和高级特性,适用于有Web开发经验的开发者,尤其是希望快速构建丰富用户界面的人员。ExtJS是一个基于JavaScript的开源前端框架,它提供了丰富的用户界面组件和数据处理机制,...

    ExtJS入门教程.pdf

    ExtJS入门教程 一、开始EXTJS 二、组件的介绍 三、EXT核心

    extjs3.3教程,extjs3.3教程.中文教程

    extjs3.3教程.中文教程。程序员福利。

    extjs4-教程

    ### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...

    EXTJS4.0视频教程配套代码

    看到其它地方 分太高,问大家省点分. 只有代码,视频请百度看. 第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件... 第三十讲:extjs4.0的desktop使用讲解

    免费 Extjs4.0教程视频

    ### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新...

    ExtJs教程_完整版

    ### ExtJs教程_完整版 —— 第一章起步(1)关键知识点详解 #### 一、ExtJS概述 **1.1 极致的用户体验** ExtJS是一个强大的JavaScript框架,专为Web应用开发而设计。它以其优雅的API、丰富的组件集合以及出色的跨...

    ExtJs教程_完整版.pdf

    ### ExtJs教程_完整版.pdf 知识点详解 #### 一、ExtJS概述与特点 **1.1 ExtJS是什么?** ExtJS是一个用于构建Web应用程序的强大且全面的JavaScript库。它以其丰富的用户界面组件、优秀的API文档以及对多种浏览器...

    ExtJS入门教程

    1、开始使用extjs 2、组件的介绍以及应用 3、ExtJS的核心 该教程有相应的代码以供参考 <!--导入Ext3.2--> <link rel="stylesheet" type="text/css" href="extjs3.2/resources/css/ext-all.css" /> ...

    EXTJS视频教程说明

    EXTJS视频教程旨在帮助学习者掌握EXTJS的基本概念、组件使用以及实际应用技巧。 在本教程中,讲师通过大量实例详细讲解EXTJS的核心概念和技术,包括如何创建窗口、面板、表单、数据绑定等。教程注重理论与实践相...

    ExtJS 实用教程

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件,包括表格、面板、图表、菜单等,使得开发者能够创建功能丰富、交互性强的前端应用。本教程将深入探讨ExtJS的基础...

    extjs使用教程

    最近我们在几个应用都使用到了ExtJS,对公司以前开发的一个OA 系统也正在使用ExtJS2.0 进行改造,使得整个系统在用户体验上有了非常大的变化。本教程记录了前段时间本人学习 ExtJS 的一些心得及小结,希望能帮助正在...

Global site tag (gtag.js) - Google Analytics