自学extjs.pdf

所需积分/C币:10 2012-08-07 15:34:08 2.14MB PDF
收藏 收藏
举报

ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。   功能丰富,无人能出其右。   无论是界面之美,还是功能之强,ext的表格控件都高居榜首。
cxt tutorial 2.11.2.2.尢间道之从这个表格拖到另一个表格 2.11.2.3.无疆界之从表格里拖到树上 2.12.大步流星,后台排序 3.歌颂吧!只为了树也要学ext。 3.1.真的,我是为了树,才开始学cxt的。.. ,,,,52 2.传统是先做出一棵树来。 52 3.3.超越一个根 3.4.你不会认为2.0甲跟1.x是一样的吧? 54 3.5.这种装配树节点的形式,真是让人头大。 3.5.1. Freeloader外传之 JsonPlugin. 3.5.2. Trccloador外传之读取本地json. 58 3.6.jsp的例子是一定要有的 3.7.让你知道树都可以做些什么 61 3.7.1.检阅树形的事件.. ,61 3.7.2.右键菜单并非单纯的事件 3.7.3.默认图标好单调,改一下撒 64 3.7.4.偷偷告诉你咋从节点弹出对话框 ,,,,,,,,,,65 3.7.5.小小提 65 3.7.6.给树节点设置超链接. ,66 3.8.灰壳显灵!让我直接修改树节点的名称吧! 67 3.9.我拖,我拖,我拖拖拖。 68 3.9.1.树形节点的拖拽有三种形式 3.9.2.用事件控制拖拽 3.9.2.1.叶子不能 append 69 3.9.2.2.把节点扔到哪里啦 70 3.9.2.3.裟椤双树,常与无常 祝福吧!把表单和输入控件都改成ext的样式。 73 4.1.不用ext的form啊,不怕错过有趣的东西吗? 4.2.慢慢来,先建一个form再说. 73 4.3.胡乱扫一下输入控件 ,74 4.4.起点高撒,从 comboBox往上蹦 75 4.4.1.凭空变出个 combobox来 75 4.4.2.把 select变成 combobox。.. 77 4.4.3.破例研究下 comboBox的内在本质哟 77 4.4.4.嘿嘿~本地的做完了,试试远程滴。 79 4.4.5.给咱们的 combobox安上零配件 4.4.6.每次你选择什么,我都知道 4.4.7.露一小手,组合上面所知,省市县三级级联。哈哈 84 4.4.7.1.先做一个模拟的,所有数据都在本地 84 4.4.7.2.再做一个有后台的,需要放在服务器上咯 4.5.把form里的那些控件全部拿出来看看 89 4.6.form提交数据的三重门 91 4.6.1.cxt中默认的提交形式 91 4.6.2.使用htm1原始的提交形式 4.6.3.单纯ajax 94 4.7.验证苦旅 4.7.1.不能为空 4.7.2.最大长度,最小长度 4.7.3.借助 typo.. ext0.1.2 cxt tutorial 4.7.4.自定义验证规贝 97 4.7.5.算不上校验的 Numberfield 8.关于表单内部控件的布局问题 4.8.1.什么都不做,默认的平铺布局 4.8.2.分裂,分列 4.8.2.1.分裂,分列。1.x 100 4.8.2.2.分裂,分列。2.0 4.8.3. fieldset是个神奇的东西 ,,105 4. 当某一天,需要往form加个图片什么的,该咋办? ....107 4.9.还要做文件上传哟 4.10.非想非想,单选框多选框 110 4.10.1.多选呢 checkbox 110 4.10.2.单选呢 radio 112 4.11.日动把数据填充到form甲 5.雀跃吧!超脱了一切的弹出窗口。 呵呵跳出来和缩回去总给人惊艳的感觉 1l6 5.2.先看看最基本的三个例子 116 5.2.1. Ext MessageBox. alert o 5.2.2. Ext MessageBox. confirm() ,,,,,,116 5. 2.3. Ext MessageBox. prompt O 117 5.3.如果你想的话,可以控制得更多. 5.3.1.可以输入多行的输入框 117 5.3.2.再看一个例子呗 5.3.3.下一个例子是进度条 5.3.4.动画效果,跳出来,缩回去 .I19 5.4.让弹出窗口,显示我们想要的东东,叱如表格 ,120 5.4.1.2.0的弹出表格哦 ...120 5.4.2.向2.0 window里加表格. ...121 5.4.3.1.x里的叫做 BasicDialog 122 5.4.4.把form放进对话框里 ,,,,124 6.奔腾吧!让不同的浏览器里显示一样的布局。 12 6.1.有了它,我们就可以摆脱那些自称ui设计师的人了。 126 6.2.关于 Borderlayout.. 6.3.嗯,不如再看看附加效果 127 6.3.1.先看看 split 6.3.2.再试试 titlebar ,,,,,,,,,,,,,129 6.3.3.还不够,还不够,让四周的区域可以缩起来 131 6.3.4.给这些区域都加上个关闭按钮 6.4.2.0的 ViewPort是完全不同的实现 鲁申申···· 134 6.5.脑袋上有几个标签的 takane1 136 6.6.让布局复杂一点儿 140 6.7.向诸位介绍一下2.0甲各具特色的布局. 144 6.7.1. accordion航是QQ那样的伸缩菜单 144 6.7.2. Cardlayout?其实就是 Wizard。 l46 6.7.3.呼呼, Tablelayou就是合并行,合并列 148 7.低鸣吧!拖拽就像呼吸一样容易。. 150 7.1.如此拖拽,简直就像与生俱来的本能一样。 150 7.2.第一!乱拖 150 7.3.第二!代理 proxy和目标 target. 151 ext0.1.2 cxt tutorial 7.4.yui自远方来,不亦乐乎 7.4.1. Basic,基础 153 7.4.2. Handles,把手 154 7.4.3. On Top,总在上边 7.4.4. Proxy,代理 157 7.4.5. Groups,组 15 7.4.6.Grid,网格 ,,161 7.4.7. Circle,圆形 16 7.4.8. Region,范围 164 8.哭泣吧!现在才开始讲基础问题 ,167 8.1. Ext gct 167 8.2.要是我们想一下子获得一堆元素咋办? 168 8.3. DomHelper利 Template动态生成htm1 169 8.3.1. DomHelper用来生成小片段 169 8.3.2.批量生成还是需要 Template模板 172 8.3.3.騠醐灌顶, MasterTemplate和 XTemplate。 174 8.3.3.1.1.x中的 MasterTemplate.175 3.3.2.2.0中的 XTemplate 175 8.4.Bxt.data命名空间 8.4.1. proxy系列. ,178 4.1.1.人畜无害 Memory Proxy.. .178 8.4.1.2.常规武器 Httpproxy 8.4.1.3.洲际导弹 Scripttagproxy ,178 8.4.2. rader系列.. ,,,,,,,,,,,,,,,,,,,179 8.4.2.1.简单易行 Array Reader .179 8.4.2.2.灵活轻使 nonReader ,180 8.4.2.3.久负盛名Xm1 Reader ...181 8.4.3.相信你知道怎么做加法 ...183 8.5.跟我用json,每天五分钟 ,183 8.5.1. Hello老爸。 ,,,,183 8.5.2.老妈等等,孩子先上场。 l84 8.5.3.老妈来了,老妈来啦。∴ 8.5.4.Ext对json的支持力度 8.5.5.反向操作,ext把 Json变成字符串 187 8.6.小声说说 scope 188 8.7.菜单和工具条 ,,,,,,,190 8.7.1.至简至廉的菜单 ....190 8.7.2.丰富一点儿的多级菜单 191 8.7.3.单选多选,菜单里搞这套 申·鲁申···, .,192 8.7.4.小把戏,定制好的菜单 194 8.7.5. SplitButton让按钮和菜单结合 8.8.蓝与灰,切换主题 8.9.悬停提示 197 8.9.1.起初,初始化.. l98 8.9.2.诞生,注卅提 198 8.9.3.分支,标签提示 199 8.9.4.发展,全局配置 8.9.5.进化,个休配置 200 8.10.灵异事件,Eⅹt. stato ,,,201 xt0.1.2 cxt tutorial 8.11.所谓的事件 207 9.沉寂吧!我们要自己的控件 9.1.下拉树形选择框 Freefield 209 9.2.带全选的 checkbox树形 CheckBoxtree ,,,,,,,,,,,,,,,,,,,,,209 9.3.带全选的 checkbox的grid 9. 4. fisheye 210 9.5.可以设置时间的日期控件 ,,210 9.6. Jsonview实现用户卡片拖拽与右键菜单. .211 9.7.下拉列表选择每页显示多少数据 10.撕裂吧!邪魔外道与边缘学科 ,213 10.1.dwr与cxt整合 10.1.1.无侵入式整合dwr和ext 10.1.2. DWRProxy....., 214 10.1.3. DWRTreeloader 216 10.2.1 ocalXhr让你在不用服务器就玩ajax ..217 10.3.在form中使用 fckeditor 219 10.4.健康快乐动起来,fx甲的动画效果 .常见问题乱弹. 21 A.1.ext到底是收费还是免费 A.2.怎么查看eXt2里的api文档 221 A.3.如何在页面中引用ext A.3.1.顺便说说常见的 Ext is not defined错误 222 A.4.想把弹出对话框单独拿出来用的看这里 223 A.5.想把日期选择框单独拿出来用的看这里.. A.6.听说有人现在还不会汉化ext. 223 A.7.碰到使用ajax获得数据,或者提交数据出现乱码 223 A.8. Tabpane1使用 autoload加载的页面中的js脚本没有执行 A.9.有关grid的一些小问题 224 A.9.1.如何让grid总所有的列都支持排序 224 A.9.2.修改一个grid的 ColumnModcl和Stor 如何选中树中的某个节点 224 A.11.如何使用 Input type=" Image". 224 B.修改日志 226 22 C.1.2007年12月5日,迷汇阶段 C.1.1.仇恨,. ·鲁 ,,,,,,,,,,,,229 C.1.2.反省. 22 C.2.关于ext与dwr整合部分的讨论 9 C.3.怎么看文档附件里的范例 .,230 D.页献者列表 ...231 D.1.感谢[飘]的大力支持 D.2.感谢[吧啦吧啦]的大力支持 D.3.感谢[游戏人牛」的大力支持 231 D.4.感谢[綻帥]的大力攴持 D.5.感谢[葡萄]的大力支持 D.6.感谢[天外小人]的大力支持 232 D.7.感谢[我想我是海]的大力攴持 32 D.8.还要感谢: ext0.1.2 VI 说在前头的 有些话是要说在前头的,请详细阅读这些东西,免得后悔莫及。 LINGO 为啥要掏钱学ext? 1.w. extJs.cOm是从yui-ex发展来的一套ajax控件,在卜认为它是当今最好用的js控件库了,非常 有学习的价值。 如果没听说过 extJs或者对 extJs没有兴趣,请不要继续看下去。 2. extJs是一套亢整的富客户端解决方案,也因为功能完整,造成ext-a11.js有400多k,请注意,这还 是仄缩后的大小,而且因为是基于js和css的功能实现,对客户端机器性能也有一定的要求,比如不 支持ie6以下的版本, 如果您旳项目建立在不畅通的网络条件下,对响应速度要求严格,或者客户端操作系统过于陈旧 请不要选择 extJs,也没有必要继续看下去了。 3.关键性问题: 汪 为什么 extJs有免费协议,而这个文档却是收费文档? 如果您对靠自己的劳动赚取生活费有异议的话,请不要继续看下去了。 如果您认为我们的劳动不值得您掏钱的话,请不要继续看下去了。 如果您认为我们光靠喝西北风就可以活下去,请不要继续看下去了。 如果您认为我们是好人,请不要继续看下去了。 很高兴您赞同我们上述的观点,并且愿意继续浏览下面的内容,如果您对上述任何一点有异议,那么 请不要继续看下去了。 注意 本教程将每天更新一点点,全部完成后便开始封闭收费。预订可享受八折优惠。技术服务,收 费咨询,找土豆(QQ1184282。 ext0.1.2 第1章闪烁吧!看看 extJs那些美丽的例子。 1.1.一切从 extJs发布包开始 非常幸运的是,我们可以免费去extjs.com下载ext发布包,里边源代码,api文档,例子一应俱仝。不 过要是想访问sⅥ获得最新的代码,就要花钱了。不过我们现阶段只要这个免费的发布包就可以了,通 过里边的范例,可以让我们体验一下ext的风范。 下载地址http://www.extjscom/download到写文档的此时此刻,咱们可以选择ext-l.l1或者是 cxt-2.0下载。明显可以看出来cxt-2.0的版本高,12月4日终于正式发布了,尚未经过详细测试,所以 不改说什么。下面我们把两个版本都个绍一点儿 1.2.看看ext-1.1.1的文档 docs目录下是api文档,基本上所有的函数,配置,事件都可以在里边找到,直接打开 index.htm1就可 以查看,左侧菜单还包含了对 examples目录下例子的引用,不过有些例子需要使用json与后台做数据 交换,必须放到服务器上才能看到效果。还有一些后台代码是使用php编写的,如果想看这些例子的效 果,还需要配置php运行环境。 如果你用java,而且jdk在1.5以上,不如直接装个 resin-3方便,它可以跑php呢。 1.3.看看ext-2.0的文档 api文档依然在docs目录下,虽然可以看到左边的菜单,但是点击之后,右侧的api页面都是靠ajax获 得的,所以不能直接在木地査看了,你必须把整个解压缩后的目录放到服务器上,通过浏览器访问服 务器,才能看到。 问为什么docs打不开,只能看到一直1 oading的兄弟,都是因为没把这些东西放到服务器上的原因 2.0中的api文档中没有例子的链接了,你需要自己去 examples录下找你需要的例子,然后打开看, 当然还是有一些例子需要放在服务器上才能看到效果。 1.4.为什么有的例子必须放在服务器上才能看到效果? 因为有些例子里,用到Ajax去后台读取数据,如果没在服务器上,Ajax返回的状态一直是失败,也无 法获得任何数据,所有就看不到正确的效果。不过以前在 extJs.COm论坛上看到过有人写了 localXhr, 可以让ajax从本地文件系统获得数据,这样也许就可以摆脱服务器的束缚了。 1.5.为什么自己按照例子写的代码,显示出来总找不到图片 ext里经常用一个空白图片做位符号,然后用css里配置的背景图片做显示,这样有利于更换主题。 这个空白图片的名字就是Ext. BLANK IMAGE URL,默认情况下它的值是 BLANK IMAGE URL: http:/+/extjs.com/s.gif虽然图片很小,也要去网上下载,一旦下载失贩就显示找不到图片了 ext0.1.2 闪烁吧!看看 extJs那些美丽的例子。 看到这里可能有人奇怪了,为什么 examples下的例子没有找不到图片的问题呢?看来你没有仔细看例 子那些代码呢,每个例子都引用了../ examples.js。在 examples.js里设冒了Ext. BLANK IMAGE URL= ./ resources/ Image s/ default/s.gi”’;。所以要解决自己写的例子找不到图片的问题,只需要照 examples.js里修改s.gif的本地路径就可以了。很简单吧? 1.6.我们还需要什么? 1.介于木人对 firefox的喜爱,以及 firebug在调试js过程中的便利,隆重向您推荐 firefox+f' erebus的 开发组合。再说了ext开发者也都是倾向于 firefox开发的,所以一般都是在 firefox上跑的好好的 放到ie上就出问题。这也跟ie自身的问题有些关系,可是目前ie占据90%的浏览器市场,最后我们还 是需要让自己的项目在ie上跑起来,所以要求我们能写出跨浏览器的js来。 firebug的好处在于,可以显示动态生成的dom,你甚至可以在 firebug里直接对dom进行修改,而这 些修改公直接反应到显示上。太厉害了 firebug提供的 console,可以直接执行js脚本,配置 console. debug, console.info, console. error等日志方法更便于跟踪。 对于ajax发送接收的数据, firebug都可以显示出来,并且可以查看发送的参数,以及返回的状态和 信息。 1.7.入门之前,都看 hellowor|d 为了照顾连最基本应用都跑不起来的同志,我们给出两个入门版 hellowor1d范例,并结合讲解,领你 入门呢。 1.7.1.直接使用下载的发布包 1.先去http://www.extjs.com/download下载zip格式的发布包 2.随便解压缩到什么目录下,不管目录名是什么,最后应该看到里边是这样的目录结构。 ext0.1.2 闪烁吧!看看 extJs那些美丽的例子。 名称 adapter build resources SourCE 目 CHANGES EXE slext-all lext-all-debug. js Bext-core. js 已xCe 目 ACLUDE ORDER Ext 目 LICENSE, 3.现在我们利用它的日录结构,写一个 helloworlo例子 进入上图中的 cxamples目录,新建一个 hclloworld目录, hclloworld目录下新建一个 helloworld.htm1文件,将下列内容复制进 index. htm1文件中。 <link rel= stylesheet" type="text/css"href="././resources/css/ext-all css"/> script type="text/javascript src=./,/adapter/ext/ext-base js ></script> <script type=text/javascript src="././ext-all js ></script <script type="text/javascript src="./examples. js" ></script> Script Ext onReady(function(( Exl Message Box. alert( helloworld,Hello World.) 4.双击 helloworld.htm1打开负亩,效果如下: helloworld x lello world c 很高兴的告诉您,咱们的 hclloworld范例已绎正确的执行了,下一步你最好把 examples目录下的例子 都看一看,再看看里边的代码怎么写的,好好感受一下ext的风范,再继续下去 1.7.2.只把必要的东西放进项目中 想把ext放入自己的项目,需要自己整理一下,因为发布包里的东西并非都是必要的,比如文档,比如 ext0.1.2

...展开详情
试读 127P 自学extjs.pdf
立即下载 低至0.43元/次 身份认证VIP会员低至7折
    抢沙发
    一个资源只可评论一次,评论内容不能少于5个字
    • 分享达人

      成功上传6个资源即可获取
    关注 私信 TA的资源
    上传资源赚积分,得勋章
    最新推荐
    自学extjs.pdf 10积分/C币 立即下载
    1/127
    自学extjs.pdf第1页
    自学extjs.pdf第2页
    自学extjs.pdf第3页
    自学extjs.pdf第4页
    自学extjs.pdf第5页
    自学extjs.pdf第6页
    自学extjs.pdf第7页
    自学extjs.pdf第8页
    自学extjs.pdf第9页
    自学extjs.pdf第10页
    自学extjs.pdf第11页
    自学extjs.pdf第12页
    自学extjs.pdf第13页
    自学extjs.pdf第14页
    自学extjs.pdf第15页
    自学extjs.pdf第16页
    自学extjs.pdf第17页
    自学extjs.pdf第18页
    自学extjs.pdf第19页
    自学extjs.pdf第20页

    试读已结束,剩余107页未读...

    10积分/C币 立即下载 >