EXTJS系列二《第一个程序》

一、概要

上一步我们已经把环境搭建好了，本章我们将用编辑器开始我们第一个extjs程序

二、开始开发

1.首先先在我们之前建立好的工作目录新建个目录名叫“1.第一个程序”

2.新建htm文件“index.htm”

如下图所示

3.用任何一个能打开文件的编辑器，我这里用的notepad++，打开文件，可以将下面的内容复制的index.htm里面

<!DOCTYPE html>
<html>
   <head>
      <link href="D:/work/extJs/build/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank"  rel="stylesheet">
      <script src="D:/work/extJs/build/ext-all.js" rel="external nofollow" ></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 200,
            width: 600,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel" />
   </body>
</html>

4.用浏览器打开index.htm,可以看到创建的视图如下所示