开始学习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了,啊...世界多美好!抓紧时间学习...
分享到:
相关推荐
标题“extjs4 helloworld”指的是使用Ext JS 4框架创建的一个基础的“Hello, World”应用程序。Ext JS是一个强大的JavaScript库,用于构建富客户端Web应用程序。它提供了一个全面的组件模型,允许开发者构建复杂的...
在"ExtJS5学习之Hello World"这个主题中,我们将深入探讨如何使用ExtJS5进行基本的开发工作。 首先,ExtJS5的"Hello World"程序通常是一个简单的窗口应用,展示如何创建一个基本的ExtJS应用。在这个例子中,我们...
简单的ExtJS版的helloworld.html代码
在"ExtJS----HelloWorld程序源码"中,我们将会看到如何使用ExtJS来创建一个简单的“你好,世界!”应用。以下是对这个示例中涉及的主要知识点的详细解释: 1. **引入ExtJS库**:首先,你需要在HTML文件中引入ExtJS...
ExtJS 是一个强大的JavaScript应用程序框架,专为构建复杂的、数据驱动的Web用户界面而设计。在"HelloWorld.rar"这个压缩包中,我们很显然会...总之,"HelloWorld.rar"是一个理想的实践平台,帮助你踏上ExtJS开发之旅。
在初识ExtJS时,创建一个新的目录`my`用于存放所有样例文件是很好的习惯,这有助于保持项目组织有序。在`Hello World`示例中,我们看到HTML文档包含了几个重要的引用,包括ExtJS的基础样式表`ext-all.css`和...
这篇博客“extjs入门之hello world”应该是引导初学者了解并开始使用ExtJS的基本步骤。由于描述部分是空的,我们将主要依据标题和标签来探讨相关知识点。 首先,让我们来看看“源码”这个标签。在学习任何编程技术...
Extjs Hello Wordhttp://download.csdn.net/download/wanglei121105/5551243
首先,"初识ExtJS" 部分会介绍ExtJS的基本理念和架构,包括MVC(Model-View-Controller)设计模式的应用,以及如何利用这个框架构建响应式的用户界面。你会了解到ExtJS是如何通过组件化的思想来构建页面,每个组件都...
离线API和该文章pdf文件 博文链接:https://yongtree.iteye.com/blog/199588
创建一个名为helloworld.js的JavaScript文件,定义一个EXTJS应用,创建一个容器组件,并在其中放置一个具有标题和内容的Panel。同时,创建一个helloworld.html文件,引入EXTJS的CSS和JavaScript库以及自定义的hello...
在本篇Extjs学习笔记中,我们将深入探讨Extjs中的Form,特别是其封装的Ext.form.BasicForm和Ext.form.FormPanel。 首先,Extjs中的表单组件主要基于Ext.form.BasicForm,这是一个基础的表单对象,负责处理表单数据...
### 让我们开始EXTJS之旅 ...<TITLE>ExtJS2-HelloWorld <link rel="stylesheet" type="text/css" href="ExtJS2/resources/css/ext-all.css"/> <script type="text/JavaScript" src="ExtJS2/adapter/ext/ext-base.js"> ...
### ExtJS4之初体验 #### 一、准备工作 在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分...
第一讲.ExtJs初识及其环境搭建 第二讲.开始ExtJs梦想之旅 第三讲.ExtJS工具栏、菜单栏 第四讲.ExtJS最常用的表单之textfield控件 第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第六讲.ExtJs最常用表单...
开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...