Tutorial:Playing With Ext The Easy Way(蹒跚学步)
2009-06-09 10:29
531 查看
蹒跚学步
第一步 - 入门
想必您已经听说过 Ext、浏览了在线演示,并且尝试阅读API文档。不过,面对复杂的API文档,您却不如何下手?!
第二步 - 起步
通览过API文档,并且找到了所要立刻尝试的功能,面对混杂的网页源代码,如何开始一个简单的测试页面?那么……
不论您的目标是什么,您都可以依照本文快速的开始使用Ext。不,不用搭建服务器,您所需要的仅仅是Firefox浏览器和Firebug调试插件。如果还没有安装,那么现在就是一个好机会。
牛刀小试
打开Ext API文档,您已经上路!
单击 F12 打开 Firebug 控制台。
如果您的 firebug 控制台处于单行模式(以 '>>>' 开头),那么请单击右下角的红色上箭头以开启多行编辑模式。
输入以下代码,并敲击 Ctrl-Enter 来运行:
view plain
copy to clipboard
print
?
Ext.get(document.body).update(
'<div id="test"></div>'
);
上边这行代码的作用是将当前DOM body元素用一个ID为test的div元素替换。刚才那些API文档已经被删除,但 Ext 代码依旧生效,并且随时为您效劳。
现在,我们假设您希望简单的添加一个面板元素(Panel),但对Ext.Panel的API冗繁的说明无能为力。那么试着将这些代码添加到 firebug 的控制台中:
view plain
copy to clipboard
print
?
Ext.get(document.body).update(
'<div id="test"></div>'
);
new
Ext.Panel({
renderTo: 'test'
,
width: '200px'
,
title: 'My Title'
,
html: 'My HTML content'
});
再次敲击 Ctrl-Enter 。嗨!您的面板元素已经诞生。
很好,不过如果修改一些选项呢?用下边的代码替换刚才的那些代码:
view plain
copy to clipboard
print
?
Ext.get(document.body).update(
'<div id="test"></div>'
);
new
Ext.Panel({
renderTo: 'test'
,
width: '200px'
,
title: 'My Title'
,
html: 'My HTML content'
,
collapsible: true
});
敲击 Ctrl-Enter 。怎么样,一个可以伸缩的面板就配置好了。(注意面板右上角的小图标)
每次敲击 Ctrl-Enter ,第一行代码都会移除现有的内容,这样您就可以有一个干净的调试环境。这是一个简单的小技巧,十分方便您尝试各种配置选项。
您可以为update()函数添加所需要的 HTML 代码,无论多少。然后编写或多或少的 Javascript 来探索 Ext API。
还等什么?现在就去亲自实践 Ext Api 吧。
Ext Programmer's API Documentation
Ext User Forums
Summary: Playing With Ext The Easy Way (Chinese)
Author: Patrick Donelan (翻译:Cloudream)
Published: 2007-10-12
Ext Version: 2.0
文章来自:http://extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_%28Chinese%29
第一步 - 入门
想必您已经听说过 Ext、浏览了在线演示,并且尝试阅读API文档。不过,面对复杂的API文档,您却不如何下手?!
第二步 - 起步
通览过API文档,并且找到了所要立刻尝试的功能,面对混杂的网页源代码,如何开始一个简单的测试页面?那么……
不论您的目标是什么,您都可以依照本文快速的开始使用Ext。不,不用搭建服务器,您所需要的仅仅是Firefox浏览器和Firebug调试插件。如果还没有安装,那么现在就是一个好机会。
牛刀小试
打开Ext API文档,您已经上路!
单击 F12 打开 Firebug 控制台。
如果您的 firebug 控制台处于单行模式(以 '>>>' 开头),那么请单击右下角的红色上箭头以开启多行编辑模式。
输入以下代码,并敲击 Ctrl-Enter 来运行:
view plain
copy to clipboard
?
Ext.get(document.body).update(
'<div id="test"></div>'
);
Ext.get(document.body).update('<div id="test"></div>');
上边这行代码的作用是将当前DOM body元素用一个ID为test的div元素替换。刚才那些API文档已经被删除,但 Ext 代码依旧生效,并且随时为您效劳。
现在,我们假设您希望简单的添加一个面板元素(Panel),但对Ext.Panel的API冗繁的说明无能为力。那么试着将这些代码添加到 firebug 的控制台中:
view plain
copy to clipboard
?
Ext.get(document.body).update(
'<div id="test"></div>'
);
new
Ext.Panel({
renderTo: 'test'
,
width: '200px'
,
title: 'My Title'
,
html: 'My HTML content'
});
Ext.get(document.body).update('<div id="test"></div>');new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content'
});
再次敲击 Ctrl-Enter 。嗨!您的面板元素已经诞生。
很好,不过如果修改一些选项呢?用下边的代码替换刚才的那些代码:
view plain
copy to clipboard
?
Ext.get(document.body).update(
'<div id="test"></div>'
);
new
Ext.Panel({
renderTo: 'test'
,
width: '200px'
,
title: 'My Title'
,
html: 'My HTML content'
,
collapsible: true
});
Ext.get(document.body).update('<div id="test"></div>');new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content',
collapsible: true
});
敲击 Ctrl-Enter 。怎么样,一个可以伸缩的面板就配置好了。(注意面板右上角的小图标)
每次敲击 Ctrl-Enter ,第一行代码都会移除现有的内容,这样您就可以有一个干净的调试环境。这是一个简单的小技巧,十分方便您尝试各种配置选项。
您可以为update()函数添加所需要的 HTML 代码,无论多少。然后编写或多或少的 Javascript 来探索 Ext API。
还等什么?现在就去亲自实践 Ext Api 吧。
Ext Programmer's API Documentation
Ext User Forums
Summary: Playing With Ext The Easy Way (Chinese)
Author: Patrick Donelan (翻译:Cloudream)
Published: 2007-10-12
Ext Version: 2.0
文章来自:http://extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_%28Chinese%29
相关文章推荐
- Playing With Ext The Easy Way
- Playing With Ext The Easy Way (玩EXT简单方法)--firebug下调试ext
- EXT 快速上手(Playing With Ext The Easy Way)
- Decrypting TLS Browser Traffic With Wireshark – The Easy Way!
- Managing DbContext the right way with Entity Framework 6: an in-depth guide by mehdime
- Vagrant is attempting to interface with the UI in a way that requires a TTY
- The Way They Move: Tracking Muitiple Targets with Similar Appearance文章思想及其代码分析
- HowTo: The Ultimate Logrotate Command Tutorial with 10 Examples
- windbg the easy way
- [转]J2ME MIDP Device Fragmentation Tutorial with Marv The Miner
- the changes between with Ext1.0 and Ext 2.0
- Managing DbContext the right way with Entity Framework 6: an in-depth guide
- hdu 2462 poj 3696 The Luckiest number fzu 1017 zoj 1537 Playing with Calculator
- The easy way to run Powershell 2.0 using .NET Framework 4.0
- CMake and GTK+ 3: the easy way
- The Easy Way To Get Recent Comments In WordPress
- GWT in Action: Easy Ajax with the Google Web Toolkit
- Xenomai: Hard Real Time Driver Example Tutorial with MMAP using the RTDM (Real Time Driver Model)
- A good article :csi cameras on the TX2 (the easy Way)
- Exploit writing tutorial part 10 : Chaining DEP with ROP – the Rubik’s[TM] Cube