`
yadsun
  • 浏览: 181386 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

开眼看世界,初识ExtJS之HelloWorld

阅读更多
开始学习ext,先从helloworld开始
准备工作-搭建Ext的工作环境:
    下载Ext:http://www.extjs.com/products/extjs/download.php
    IDE:eclipse with Spket plugin Spket是目前最好的Ext IDE,提供Eclipse插件,可以手动下载也可以通过eclipse的自动安装和更新自动安装,update site: http://www.spket.com/update,需要重起eclipse生效
    配置js文件的编缉器:Window-->Preferences-->Spket-->JavaScript Profiles-->点右侧的New在弹出框中输入"ExtJS"-->选中ExtJS点右侧Add Library选择ExtJS-->选中ExtJS点右侧的Add File选择下载的Ext包下的ext.jsb2-->选中ExtJS点右侧的default
新建工程:
   -- 新建一个Web工程extjsDemo
   -- 将Ext解压后的包拷到webcontent下
   -- 新建文件夹html
   -- 在html文件夹下新建第一个html helloworld.html,代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--引入ext样式表-->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<!--引入ext适配器脚本-->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<!--引入ext框架脚本-->
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {
		var win;
		win = new Ext.Window({
				applyTo : 'hw',
				title : 'HelloWorld',
				width : '400',
				height : '200',
				items: new Ext.Component({
					xtype : 'textarea',
					html : '开眼看世界,ExtJS的世界多么美好!'
				}),
				buttons: [{
	                    text: 'Close',
	                    handler: function(){
	                        win.close();
	                    }
	                }],
				frame : true
			});
		win.show(this);
	});
</script>
</head>
<body>
<div id="hw"></div>
</body>
</html>

    --编译布署到tomcat服务器下
    --访问http://localhost:8080/extjsDemo/html/helloworld.html
   
   虽然很简单也算是起步了,先学会爬才能学会走,然后才可能会跑...一步一步来吧,加油!有了ext就可以告别eclipse plugin了,啊...世界多美好!抓紧时间学习...
2
0
分享到:
评论

相关推荐

    extjs4 helloworld

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

    ExtJS5学习之Hello World

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

    ExtJS helloworld.html

    简单的ExtJS版的helloworld.html代码

    ExtJS----HelloWorld程序源码

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

    HelloWorld.rar

    ExtJS 是一个强大的JavaScript应用程序框架,专为构建复杂的、数据驱动的Web用户界面而设计。在"HelloWorld.rar"这个压缩包中,我们很显然会...总之,"HelloWorld.rar"是一个理想的实践平台,帮助你踏上ExtJS开发之旅。

    Extjs学习笔记之一 初识Extjs之MessageBox

    在初识ExtJS时,创建一个新的目录`my`用于存放所有样例文件是很好的习惯,这有助于保持项目组织有序。在`Hello World`示例中,我们看到HTML文档包含了几个重要的引用,包括ExtJS的基础样式表`ext-all.css`和...

    extjs入门之helloword

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

    Extjs例子Hello Word

    Extjs Hello Wordhttp://download.csdn.net/download/wanglei121105/5551243

    ExtJs开始之旅

    首先,"初识ExtJS" 部分会介绍ExtJS的基本理念和架构,包括MVC(Model-View-Controller)设计模式的应用,以及如何利用这个框架构建响应式的用户界面。你会了解到ExtJS是如何通过组件化的思想来构建页面,每个组件都...

    我与EXTJS有个约会--初识EXTJS

    离线API和该文章pdf文件 博文链接:https://yongtree.iteye.com/blog/199588

    extjs4学习文档

    创建一个名为helloworld.js的JavaScript文件,定义一个EXTJS应用,创建一个容器组件,并在其中放置一个具有标题和内容的Panel。同时,创建一个helloworld.html文件,引入EXTJS的CSS和JavaScript库以及自定义的hello...

    Extjs学习笔记之二 初识Extjs之Form

    在本篇Extjs学习笔记中,我们将深入探讨Extjs中的Form,特别是其封装的Ext.form.BasicForm和Ext.form.FormPanel。 首先,Extjs中的表单组件主要基于Ext.form.BasicForm,这是一个基础的表单对象,负责处理表单数据...

    让我们开始EXTJS之旅

    ### 让我们开始EXTJS之旅 ...&lt;TITLE&gt;ExtJS2-HelloWorld &lt;link rel="stylesheet" type="text/css" href="ExtJS2/resources/css/ext-all.css"/&gt; &lt;script type="text/JavaScript" src="ExtJS2/adapter/ext/ext-base.js"&gt; ...

    ExtJS4之初体验

    ### ExtJS4之初体验 #### 一、准备工作 在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分...

    Extjs4.1.1

    第一讲.ExtJs初识及其环境搭建 第二讲.开始ExtJs梦想之旅 第三讲.ExtJS工具栏、菜单栏 第四讲.ExtJS最常用的表单之textfield控件 第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第六讲.ExtJs最常用表单...

    让我们开始EXTJS之旅EXTJS_WEB开发指南

    开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...

Global site tag (gtag.js) - Google Analytics