ExtJs 专题
专题目录
您的位置:JS框架 > ExtJs 专题 > Ext.js 第一个程序
Ext.js 第一个程序
作者:--    发布时间:2019-11-20

本章列出了在ext js中首先编写hello world程序的步骤:

步骤1

在我们选择的编辑器中创建index.htm页面。 将所需的库文件包含在html页面的head部分,如下所述:

index.htm

<!doctype html>
<html>
   <head>
      <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      <script  class="lazy" data-original="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js"></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>

explanation

  • ext.onready()方法将在ext js准备好渲染ext js元素时调用。

  • ext.create()方法用于在ext js中创建对象,这里我们创建一个简单的面板类ext.panel的对象。

  • ext.panel是ext js中用于创建面板的预定义类。

  • 每个ext js类都有不同的属性来执行一些基本的功能。

ext.panel类有以下各种属性:

  • renderto 是此面板必须呈现的元素。 \'helloworldpanel\'是index.html文件中的div id。

  • height 和宽度属性用于提供面板的自定义尺寸。

  • title 属性是为面板提供标题。

  • html 属性是要在面板中显示的html内容。

第2步

在标准浏览器中打开index.htm文件,您将在浏览器上获得以下输出。


网站声明:
本站部分内容来自网络,如您发现本站内容
侵害到您的利益,请联系本站管理员处理。
联系站长
373515719@qq.com
关于本站:
编程参考手册