1、Extjs——ExtJs简介

最新推荐文章于 2024-10-14 16:16:09 发布
最新推荐文章于 2024-10-14 16:16:09 发布
阅读量2.2k 收藏 5
点赞数
分类专栏： 网页前台技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaoa000/article/details/39182933
版权

ExtJs是一个富客户端AJAX框架。

1、准备环境搭建

myeclipse10集成spket：把下载到的spket-1.6.23解压后,拷贝features和plugins两个文件夹拷贝到eclipse/dropins,然后重启eclipse,点击Window/Preferences/Spket/JavaScript Profiles,点击New新建一个ExtJs,选中ExtJs，点击Add Library,在弹出的框中选中ExtJs,然后再点击Add File把ext.jsb2选中，最后设为默认(Default).这里要注意使用ExtJs4.2时的jsb3文件从网上下载

使用spket编写js时会出现提示。进行测试。

1）在myeclipse中新建一个web project项目，在WebRoot下建立一个test.js文件，打开方式使用spket Javascript  Editor，可以在Window/Preferences/General/Editors/Files Associations中将*.js的打开方式默认设置为spket Javascript  Editor，


2）打开编辑test.js文件，会有提示出现：


3）引入ExtJs开发包，就是把下载的extjs4.2解压后的文件引入，先看一下extjs的包结构：


Ext开发包目录结构说明
- builds目录为ExtJS压缩后的代码
- docs目录为ExtJS的文档
- examples目录中是官方的演示示例
- locale是多国语言的资源文件,其中ext-lang-zh_CN.js是简体中文
- pkgs中是ExtJS各部分功能的打包文件
- resource中书ExtJS要用到的图片文件与样式表文件
- src目录是未压缩的源码
- bootstrap.js是ExtJS库的引导文件,通过参数可以自动切换ext-all.js和ext-debug.js
- ext-all.js文件是ExtJS的核心库,是必须要引入的
- ext-all-debug.js文件是-all.extjs的调试版,在调试的时候可能需要使用

先把resources文件夹拷贝到项目的js/ExtJs下，对于examples，可以在开发时进行参考，拷入时，先关闭验证，右键点项目——Properties：


去掉JavaScript Validator和Validation项，这样能加快速度。然后还要考入locale/ext-lang-zh_CN.js本地资源文件，ext-all.js，ext-all-dev.js，ext-all-debug.js，bootstrap.js，其中ext-all*是ext的核心文件，带dev的是开发调试模式用的，不带是正常部署应用时用的，bootstrap文件用来判断开发模式，然后自动引入ext-all或是ext-all-dev。

最终的结果：


现在环境搭建完毕，写一个测试，修改index.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<span style="color:#ff0000;"><!-- 引入ext的样式文件 ，因为定义了basePath，href使用相对路径，从js开始-->
	<link rel="stylesheet" type="text/css" href="js/ExtJs/resources/css/ext-all.css">
	
	<!-- extjs的核心文件 -->
	<script type="text/javascript" charset="utf-8" src="js/ExtJs/bootstrap.js"></script>
	
	<!-- 国际化资源文件 -->
	<script type="text/javascript" charset="utf-8" src="js/ExtJs/ext-lang-zh_CN.js"></script>
	
	<script type="text/javascript" src="test.js">
		
	</script></span>
  </head>  
  <body>
    This is my JSP page. <br>
  </body>
</html>
需要三步引入三个extjs文件，包括样式文件，核心文件和国际化资源文件，然后是引入我们自己的js文件。test.js： 

Ext.onReady(function(){

	Ext.MessageBox.alert('提示信息！','hello word!');
});
显示结果：

如果觉得显示的字体小，可以进行修改，打开resources/css/ext-all.css，将其中的11px替换为12px，extjs默认字体大小为11px。




kaoa000
关注
专栏目录
EXTJS入门教程（非常详细）
11-16
EXTJS入门教程 组件的介绍与应用 ext核心 Element：Ext的核心 获取多个DOM的节点 响应事件
ExtJS快速入门指南
热门推荐
励志的蜗牛
11-15 2万+
1 ExtJS快速入门指南 一、ExtJS 框架简介.......................................................................................................................... 2 二、如何使用Ext.....................................
ExtJs 3.2.0 开发者指南：全面的API参考与实践
最新发布
weixin_28895791的博客
10-14 1094
本文还有配套的精品资源，点击获取 简介：ExtJS 3.2.0 是一个为构建富客户端Web应用程序设计的强大JavaScript框架，它提供了一系列优化和增强的组件、类库和功能。此版本遵循MVC设计模式，拥有丰富的UI组件如Grid、Panel、Window等，并通过Fit、Border、Table等布局管理机制满足不同界面需求。事件处理系统支持高效的组件间通信，Store...
Extjs入门
weixin_43763430的博客
05-08 4772
1、什么是Extjs Ext JS 是一个强大的JavaScript类库，提供了丰富且美观的UI组件，和easyUI类似，但更强大，因而使用了Ext JS，您需要写的代码基本上是JavaScript，不需要写HTML，它主要用于创建前端用户界面，是一个与后台技术无关的前端Ajax框架，因此，可以把Ext JS用在Java、.Net、PHP等各种开发语言开发的应用中。 Ext JS属于Ajax技术，基于JavaScript语言及Java Swing的MVC架构，支持组件化、模块化设计，提供“本地数据源”的支持
ExtJs学习（一）~~ 简述概念
xiaozhegaa的博客
09-22 1万+
一、学习经历 如果想看我的学习心得、项目截图、写ExtJs专栏的目的，可以看一下以下这篇文章： https://blog.csdn.net/xiaozhegaa/article/details/82806835 二、ExtJs概念 1、什么是ExtJs？ What ExtJS是一个Ajax框架，是一个用JavaScript写的，用于在客户端创建丰富多彩的web应用程序界面。 说白了，就...
EXTJS详细教程
qq_34462698的博客
06-16 1万+
布局和容器 普通布局 Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), width: 400, height: 300, title: 'Container Panel', items: [{ xtype: 'panel', title: 'Child Panel 1', height: 100, width: '75%' }, {
ExtJS——poa
03-28
标题中的"ExtJS——poa"可能是指在ExtJS框架中应用了POA（Plain Old JavaScript Object）的设计模式。在JavaScript开发中，POA是一种常见的术语，用来描述使用传统JavaScript对象，而不是特定框架或库的特性来构建...
ExtJS 7.6 SDK trial
10-03
1. **组件库增强**：ExtJS 7.6提供了大量预先封装好的UI组件，如表格、树形视图、图表、按钮、表单、菜单等。在7.6版本中，这些组件可能得到了优化，以提供更好的用户体验和更高的性能。 2. **响应式布局**：ExtJS ...
ExtJs扩展之GroupPropertyGrid代码
10-29
ExtJs以丰富的组件和数据处理能力著称，特别是在复杂表格显示和管理方面，它提供了一个非常强大的控件——PropertyGrid。 然而，ExtJs的PropertyGrid默认并不支持对属性进行分组显示，这在处理具有大量属性的信息时...
轻松搞定Extjs
10-16
- **Ajax**: 简介了Ajax的基本原理及其在Extjs中的应用。 - **Ext.Ajax类**: 详细介绍了Extjs中用于发起Ajax请求的方法。 - **Ajax文件上传**: 展示了如何使用Extjs实现文件的异步上传功能。 #### 分页与ComboBox ...
Extjs中文教程
01-02
Extjs中文教程(李赞红) PDF版是Extjs中文教程;Extjs是一个javascript框架，其开发团队的核心开发人员...但只要认真去研究去组织，就会得到贵夫人的欢心，但是，很抱歉，Jack已捷足先登，并且生了一个孩子——Extjs。
Ext Js详解指南
weixin_30685047的博客
02-17 2385
什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript、HTML和CSS开发而成，无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果。 个人总结Ext JS的方法 从Extjs的视图学起 例如：窗体、表单、数等等。并且可以掌握调试工具和技巧 学习使用API 学会怎么查询以及使用大牛提供的接口解决常见的问题（一般我们用到的效果，大牛们在做...
extjs的学习笔记
程序猿的十万个为什么
11-30 2789
一.extjs的官网：http://extjs.org.cn/ 二.产品目录介绍 一.extjs的官网：http://extjs.org.cn/ 二.产品目录介绍 三.在项目中使用 应用语言local文件，resources样式文件，核心的js文件 引入： &lt;link  type="text/css" rel="stylesheet" href="extjs/resourc...
EXTJS是一个用于构建富客户端应用程序的JavaScript框架，它提供了丰富的组件和功能来创建交互式的用户界面
BLOG域名:programb.blog.csdn.net
04-10 753
在这个示例中，嵌入的HTML代码是一个简单的div标签，显示了"Hello, EXTJS HTML5!EXTJS是一个用于构建富客户端应用程序的JavaScript框架，它提供了丰富的组件和功能来创建交互式的用户界面。在EXTJS中创建其他类型的组件可以使用不同的方法，具体取决于你想要创建的组件类型。这些方法可以根据你的需求选择使用，根据组件的类型和具体的场景来创建不同类型的组件。以上是EXTJS创建组件的几种方法，可以根据具体需求选择适合的方法来创建组件。在上面的代码中，我们首先使用。
Ext JS简介（一）
chengxi2031的博客
12-19 2万+
一、简介 Ext JS通常简称为EXT，是一种用JavaScript编写的功能强大的Ajax框架，与 后台技术无关，可用于开发绚丽多彩的富客户端Ajax应用。对于企业应用系统，尤其是MIS类型的系统而言，EXT非常适用。对于没有美术功底的程序员来说，EXT为我们解决了一大难题，因为它...
Extjs基础(一)
weixin_43686925的博客
01-09 6629
1.1基础学习 说明： 本示例的所有代码均在extjs6.2版本上测试通过,学习内容来源于官方文档和自己的一些见解。 1.1.1window组件 简单的一个window面板： title: '窗口标题', height: 220, //可以使用百分比 width: 220, html: '内容部分', resizable: true, //允许改变大小 ...
Ext JS权威指南
牛志欢的专栏
12-15 1746
第1章 Ext JS 4开发入门 需要掌握html,css,javascript基础知识，有点面向对象编程知识，了解Ext Js的框架结构。 1.1 学习Ext JS必需的基础知识 1 JavaScript ExtJs本身是一个JavaScript的框架，需要使用JavaScript来开发ExtJs。 JavaScript的框架就是通过控制HTML和CSS来实现功能。 2 HTML
Ext.js 4 部分基础内容学习记录
LItaoaikaifa的博客
07-29 965
ext.js 4
ExtJS是一个用于构建富客户端应用程序的JavaScript框架
BLOG域名:programb.blog.csdn.net
03-09 719
它提供了丰富的UI组件和功能，使开发人员能够轻松创建交互式和可扩展的Web应用程序。这是一个简单的示例，演示了如何使用ExtPascal库创建一个带有按钮的表单面板。通过以上功能，ExtJS帮助开发人员在短时间内构建富客户端应用程序，并提供了一套强大而灵活的工具和组件，以满足各种复杂的业务需求。你可以在浏览器中查看和测试应用程序的功能。ExtJS是一个功能强大的JavaScript框架，提供了丰富的UI组件。创建项目文件：在Delphi或Free Pascal中创建一个新的项目文件，并添加所需的单元文件。
ExtJS实战：1-6章精华解析
"extjs in action 1-6章节的内容涵盖了ExtJS框架的基础知识、组件使用以及构建可配置复合组件的深入实践。这本书的部分章节包括对ExtJS的介绍，如其作为框架的独特性、基础教程、组件系统、动态表单构建、数据网格、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值