`
xiaoyanzi1205
  • 浏览: 42074 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

ExtJS4的HelloWorld

ExtJS4 HelloWorld 
阅读更多

本文摘自ExtJS4官方文档

1.新建index.html

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

其中

<script type="text/javascript" src="extjs/ext-all.js"></script>

在官方文档里漏掉了，要补上，app.js如下：

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

 上面的程序实现了html和js的分离，执行index.html,效果如图：


OVER!

 

 

  • 大小: 7.8 KB
分享到：
| Drools的内存管理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs4 helloworld

    标题“extjs4 helloworld”指的是使用Ext JS 4框架创建的一个基础的“Hello, World”应用程序。Ext JS是一个强大的JavaScript库，用于构建富客户端Web应用程序。它提供了一个全面的组件模型，允许开发者构建复杂的...

    ExtJS helloworld.html

    简单的ExtJS版的helloworld.html代码

    extjs4学习文档

    接着，通过编写简单的HelloWorld示例来实践EXTJS4的基本用法。创建一个名为helloworld.js的JavaScript文件，定义一个EXTJS应用，创建一个容器组件，并在其中放置一个具有标题和内容的Panel。同时，创建一个hello...

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中，我们将会看到如何使用ExtJS来创建一个简单的“你好，世界！”应用。以下是对这个示例中涉及的主要知识点的详细解释： 1. **引入ExtJS库**：首先，你需要在HTML文件中引入ExtJS...

    ExtJS5学习之Hello World

    在"ExtJS5学习之Hello World"这个主题中，我们将深入探讨如何使用ExtJS5进行基本的开发工作。 首先，ExtJS5的"Hello World"程序通常是一个简单的窗口应用，展示如何创建一个基本的ExtJS应用。在这个例子中，我们...

    Extjs4的demo

    将这两个文件放在正确的位置，然后在浏览器中访问`http://localhost:8080/Ext4/helloworld.html`，你将看到一个带有标题"Hello Ext"的面板，显示文本"Hello! Welcome to Ext JS."。 在ExtJS中，`Ext.onReady`和`Ext...

    HelloWorld.rar

    在"HelloWorld.rar"这个压缩包中，我们很显然会找到一个基础的ExtJS项目，用于初学者学习和理解如何在实践中应用和导入ExtJS组件库。 在深入探讨之前，先来了解一下ExtJS的核心特性。ExtJS 提供了一个丰富的组件...

    ExtJS4之初体验

    通过以上步骤，我们不仅完成了ExtJS4的基础安装与配置，还实现了第一个简单的“Hello World”程序，这对于初学者来说是非常重要的第一步。随着对框架理解的深入，可以逐步探索更多高级特性和技术细节。

    Extjs4 权威指南(中)

    - 测试：打开浏览器，输入`http://localhost:8080/Ext4/helloworld.html`。 #### 五、Extjs4常用方法 - **Ext.onReady**：确保DOM加载完成后再执行后续操作。 - 示例代码：在页面加载完成后弹出对话框。 - **Ext...

    Extjs4 Extjs4学习指南

    - **运行测试**：通过浏览器访问`http://localhost:8080/Ext4/helloworld.html`，如果一切配置正确，将会看到一个标题为“HelloExt”的面板，面板内显示“Hello! Welcome to ExtJS”。 #### 二、Extjs4 布局详解 ...

    Extjs4 学习指南

    正确设置文件路径后，通过浏览器访问`http://localhost:8080/Ext4/helloworld.html`，你将看到这个简单的应用程序。 在ExtJS中，`Ext.onReady`和`Ext.application`是非常重要的方法。`Ext.onReady`会在DOM完全加载...

    extjs4 学习指南 学习手册

    helloworld.js 包含一个简单的EXTJS应用，创建一个具有标题和内容的Panel。helloworld.html 引入了必要的CSS和JavaScript文件。确保文件路径正确，然后通过浏览器访问http://localhost:8080/Ext4/helloworld.html，...

    EXTjs4学习指南

    在浏览器中访问`http://localhost:8080/Ext4/helloworld.html`，你应该会看到一个带有标题"Hello Ext"且内容为"Hello! Welcome to Ext JS."的面板。 EXTJS中的核心概念包括`Ext.onReady`和`Ext.application`。`Ext....

    ExtJS4学习指南

    - 在浏览器中访问 `http://localhost:8080/Ext4/HelloWorld.html`，应能看到一个标题为`HelloExt`的Panel，其内容为`Hello! Welcome to ExtJS.`。 **2. 使用Ext.onReady方法** - **功能:** 当DOM加载完成后自动...

    extjs4 中文api

    3. **测试实例**：在浏览器中输入`http://localhost:8080/Ext4/helloworld.html`，如果一切正常，你将看到一个标题为“HelloExt”的面板，内容为“Hello! Welcome to ExtJS。” #### 四、关键函数与元素获取 Extjs...

    extjs4中文视频下载地址

    - **Hello World 程序**：通过一个简单的“Hello World”示例程序来快速上手 ExtJS 4.0。该示例将帮助初学者了解如何创建基本的 ExtJS 项目结构，配置必要的开发环境以及如何编写第一个 ExtJS 应用程序。 #### 二、...

    extJS4中文API学习教程

    `helloworld.js`中定义了一个简单的应用，使用`Ext.application`方法启动，并创建了一个全屏布局的容器，包含一个具有标题和内容的Panel。`helloworld.html`则负责引入必要的CSS和JavaScript文件，确保路径正确。当...

    extjs入门之helloword

    这篇博客“extjs入门之hello world”应该是引导初学者了解并开始使用ExtJS的基本步骤。由于描述部分是空的，我们将主要依据标题和标签来探讨相关知识点。 首先，让我们来看看“源码”这个标签。在学习任何编程技术...

Magicbox
Global site tag (gtag.js) - Google Analytics