Extjs第一课

                                                                 Extjs第一课

         我们在第一节课中,我们就开始讲到的是类库文件,在第一节课中我们第一个接触到的便是这个Extjs.onReady了。我们下面来看一下这个jsp文件时怎么写的。

      是这样的我们首先说一下我们在这里用的是Extjs4.0的类库

我们开始用一下这个Extjs里面都是什么东西

adapter:负责将里面提供第三方底层库(包括Ext 自带的底层库)映射为Ext 所支持

的底层库。

build: 压缩后的ext 全部源码(里面分类存放)。

docs: API 帮助文档。

exmaples:提供使用ExtJs 技术做出的小实例。

resources:Ext UI 资源文件目录,如CSS、图片文件都存放在这里面。

source: 无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的

协议。

Ext-all.js:压缩后的Ext 全部源码。

ext-all-debug.js:无压缩的Ext 全部的源码(用于调试)。

ext-core.js:压缩后的Ext 的核心组件,包括sources/core 下的所有类。

ext-core-debug.js:无压缩Ext 的核心组件,包括sources/core 下的所有类。

这就是我们解压出来的都是什么东西,

      我们在来看一下我们这个第一个的jsp文件是怎么写的。

<%@ page language="java"import="java.util.*" pageEncoding="ISO-8859-1"%>

 

<%

String path =request.getContextPath();

String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 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">

    -->

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ext-4.0.0/resources/css/ext-all.css">

    <script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.0.0/ext.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.0.0/ext-all.js"></script>

  </head>

 

  <body>

    <script type="text/javascript">

    Ext.onReady(function(){

        Ext.MessageBox.alert("hello easy is extjs");

   });

    </script>

  </body>

</html>

下面我们来解释一下:

<script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.0.0/ext.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.0.0/ext-all.js"></script>

其中呢?顺序是不能改变的,这就是在引入这个js的类库。我们再来看一下这个函数<script type="text/javascript">

    Ext.onReady(function(){

        Ext.MessageBox.alert("hello easy is extjs");

   });

    </script>

这里是这样的,在ExtJS 库文件及页面内容加载完后,ExtJS 会执行Ext.onReady 中指定的函数,因此可以用,一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的,所以我们当加载的时候我们就开始显示一个字符串,当然了,我们也可以用alert(“hello world”);

其中的函数使用了一个匿名函数,当然我们也可以写成一个函数:

<script>

function fn()

{

alert(‘ExtJS库已加载!’);

}

Ext.onReady(function ()

{

alert(‘ExtJS库已加载!’);

}

);

其实这样也是可以用的。其中Ext是这个Extjs中的一个关键字!剩下的东西我们在慢慢的讲来!

在充满仪式感的生活里,一款能传递心意的小工具总能带来意外惊喜。这款基于Java开发的满屏飘字弹幕工具,正是为热爱生活、乐于分享的你而来——它以简洁优雅的视觉效果,将治愈系文字化作灵动弹幕,在屏幕上缓缓流淌,既可以作为送给心仪之人的浪漫彩蛋,也能成为日常自娱自乐、舒缓心情的小确幸。 作为程序员献给crush的心意之作,工具的设计藏满了细节巧思。开发者基于Swing框架构建图形界面,实现了无边框全屏显示效果,搭配毛玻璃质感的弹幕窗口与圆润边角设计,让文字呈现既柔和又不突兀。弹幕内容精选了30条治愈系文案,从“秋天的风很温柔”到“你值得所有温柔”,涵盖生活感悟、自我关怀、浪漫告白等多个维度,每一条都能传递温暖力量;同时支持自定义修改文案库,你可以替换成专属情话、纪念文字或趣味梗,让弹幕更具个性化。 在视觉体验上,工具采用柔和色调生成算法,每一条弹幕都拥有独特的清新配色,搭配半透明渐变效果与平滑的移动动画,既不会遮挡屏幕内容,又能营造出灵动治愈的氛围。开发者还优化了弹幕的生成逻辑,支持自定义窗口大小、移动速度、生成间隔等参数,最多可同时显示60条弹幕,且不会造成电脑卡顿;按下任意按键即可快速关闭程序,操作便捷无负担。 对于Java学习者而言,这款工具更是一份优质的实战参考。源码完整展示了Swing图形界面开发、定时器调度、动画绘制、颜色算法等核心技术,注释清晰、结构简洁,哪怕是初学者也能轻松理解。开发者在AI辅助的基础上,反复调试优化细节,解决了透明度控制、弹幕碰撞、资源占用等多个问题,这份“踩坑实录”也为同类项目开发提供了宝贵经验。 无论是想给喜欢的人制造浪漫惊喜,用满屏文字传递心意;还是想在工作间隙用治愈文案舒缓压力,或是作为Java学习的实战案例参考,这款满屏飘字弹幕工具都能满足你的需求。它没有复杂的操作流程,无需额外配置环境,下载即可运行,用最纯粹的设计传递最真挚的
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值