posts - 30, comments - 5, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

FF是深受广大程序员喜爱,不是因为它的快,而是因为FIREBUG1.2版本(点这里 )这个宇宙无敌插件,调试JS程序变成了一片小蛋糕。
不过,新推出的FireFox 3.0,据称比2.0速度提高2倍,内存占用减小,几乎与苹果的Safari速度不相上下。或许会改变大家的看法。
Spket的JS编辑器,强啊,实时提示语法错误,自动完成,CTRL+SHIFT+F的缩进排版,啥也不说了,眼泪哗哗的。EXT就不说了,地球人都知道。

 
蹒跚学步
第一步 - 入门

想必您已经听说过 Ext、浏览了在线演示,并且尝试阅读API文档。不过,面对复杂的API文档,您却不知如何下手?!

第二步 - 起步

通览过API文档,并且找到了所要立刻尝试的功能,面对混杂的网页源代码,如何开始一个简单的测试页面?那么……

不论您的目标是什么,您都可以依照本文快速的开始使用Ext。不,不用搭建服务器,您所需要的仅仅是Firefox浏览器和Firebug调试插件。如果还没有安装,那么现在就是一个好机会。

 

牛刀小试
  • 打开Ext API文档,您已经上路!
  • 单击 F12 打开 Firebug 控制台。
  • 如果您的 firebug 控制台处于单行模式(以 '>>>' 开头),那么请单击右下角的红色上箭头以开启多行编辑模式。
  • 输入以下代码,并敲击 Ctrl-Enter 来运行:
Ext.get(document.body).update('<div id="test"></div>');

上边这行代码的作用是将当前DOM body元素用一个ID为test的div元素替换。刚才那些API文档已经被删除,但 Ext 代码依旧生效,并且随时为您效劳。

现在,我们假设您希望简单的添加一个面板元素(Panel),但对Ext.Panel的API冗繁的说明无能为力。那么试着将这些代码添加到 firebug 的控制台中:


再次敲击 Ctrl-Enter 。嗨!您的面板元素已经诞生。

很好,不过如果修改一些选项呢?用下边的代码替换刚才的那些代码:



敲击 Ctrl-Enter 。怎么样,一个可以伸缩的面板就配置好了。(注意面板右上角的小图标)

每次敲击 Ctrl-Enter ,第一行代码都会移除现有的内容,这样您就可以有一个干净的调试环境。这是一个简单的小技巧,十分方便您尝试各种配置选项。

您可以为update()函数添加所需要的 HTML 代码,无论多少。然后编写或多或少的 Javascript 来探索 Ext API。

还等什么?现在就去亲自实践 Ext Api 吧。

Retrieved from "http://www.extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_(Chinese)"


只有注册用户登录后才能发表评论。


网站导航: