开始ExtJS之旅:2.也从Hello world开始

2 也从Hello world开始

    几乎所有开发语言的学习都是从“Hello world”开始的。因为“Hello world”虽然只是简单的输出,但是它所要求的开发与运行环境和工作流程与写一个大型软件所要求的环境和流程没有太大的差别。所以说重要的并不在显示或者输出“Hello world”,而是为成功显示或者输出这个“Hello world”所经历的过程。
    对于ExtJS的学习,可以从“Hello world”开始,熟悉其开发与运行过程。ExtJS只是一套用JavaScript实现的界面层组件,所以在没有与服务器要进行数据交换的情况之下,并不需要服务器的支持,就在本地浏览器中就能运行得很好。第一个ExtJS程序“Hello world”不需要同服务器端进行通讯,只要使用简单的Html文件即可。如代码2-1所示。
    代码2-1:ExtJS的Hello world
<HTML>
<HEAD>
<TITLE>ExtJS2-HelloWorld</TITLE>
<link rel="stylesheet" type="text/css" href="ExtJS2/resources/css/ext-all.css" />
<script type="text/JavaScript" src="ExtJS2/adapter/ext/ext-base.js"></script>
<script type="text/JavaScript" src="ExtJS2/ext-all.js"></script>
</HEAD>
<BODY>
<script>
Ext.BLANK_IMAGE_URL = 'ExtJS2/resources/images/default/s.gif'
Ext.onReady(function(){
    Ext.MessageBox.alert('HelloWorld', 'Hello World!Hello World!Hello World!Hello World!');
});
</script>
</BODY>
</HTML>
    代码2-1对于写过JavaScript程序的人来说并不难懂。除了Html的框架之外,引入了1个CSS文件,2个js文件,这3个文件是做ExtJS开发必须引入的。在Body部分,有一段js代码,对于这段代码的具体意义现在并不用过分的关注,这在以后的章节中会有更加详细的说明。将这段代码保存为ExtJS-HelloWorld.html文件,为了正常的引入必须的资源,我们需要特别注意这个文件要存放的路径,它应该放到ExtJS开发包的同一级,如图2-2所示。


图2-2  HelloWorld放置的位置

    如图2-2所示,这就是文件放置的路径,其中ExtJS2目录就是图2-1所示的内容。好了,程序已经写完,可以看看运行效果了。只要双击ExtJS-HelloWorld.html文件,就会自动打开浏览器,但是由于这是JavaScript程序,在浏览器上会被浏览器阻止,如图2-3所示。


图2-3  浏览器会阻止ExtJS程序的运行

    此时,只要如图 2-3 所示那样,选择“允许阻止的内容”,程序就会正常运行,并出现
如图2-4所示的界面,表明ExtJS程序已经完全正常运行了!虽然简单,但是惊喜才刚刚开
始,简单的对话框就已经如此的漂亮了。


图2-4  Helloworld程序运行结果

 

 

posted @ 2010-05-07 23:53  貔貅  阅读(524)  评论(0编辑  收藏  举报