【ExtJs】ExtJs4.2.1的配置与Helloworld

ExtJs在2.x之后如果用于商业用途将会收费,在官网如果要下载就要给钱,但是完全传说中有个gpl版本,可以随便用,不过法律上的问题就不是我们程序猿细究的事情了。至少自己弄来玩玩是不会有什么问题的。ExtJs这东西,个人觉得非常适合做OA,简直就是把以前的VC6的MFC搬到网页上面来了。

下面以ExtJs4.2.1为例子,讲述这东西是如何开发的。不同的版本的ExtJs可能会有不同,因为ExtJs这东西,在2.x,3.x,5.x是完全不同的,因为现在最常用的ExtJs的版本是4.x,因此就研究ExtJs4.2.1。ExtJs4.2.1与Bootstrap一样,是一个CSS+JavaScript的前端框架。

一、基本目标

上来搞出如下的Helloworld就可以了,可以看到,这东西由于兼容IE6,因此是非常受欢迎的。

二、基本准备

ExtJs4.2.1在网上能够随便搜到,这里提供两个我个人找到下载地址,一个是某大型下载网站的,一个是CSDN网友无私提供的:

http://120.198.244.52:9999/sqyd10.newhua.com:82/down/ext-4.2.1-gpl.zip(点击打开链接

http://download.csdn.net/download/litaohm/6775189(点击打开链接

下载之后ext-4.2.1-gpl.zip,如下图把里面的

./ext-all.js Ext4.x不再出现adapt,base等文件

./bootstrap.js

./locale/ext-lang-zh_CN.js 繁体中文的朋友请选择ext-lang-zh_TW.js,英文自动支持非必要

./resources/ext-theme-classic Ext4.x不再使用ext-all.css,取而代之的是各种主题,ext-theme-classic是默认主题。你要哪种主题则拷贝那个文件夹,且引用其中的ext-theme-xx-all.css即可,其中xx是主题名称,下面以ext-theme-classic主题为例,

放到你的WEB工程:

最终,你的WEB工程的目录结构如下图,其中helloworld.html是新建的。

三、制作过程

在helloworld.html中写入如下代码,则可以顺利地运行:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>extHelloworld</title>
		<script type="text/javascript" src="js/ext-all.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
        <span style="white-space:pre">	</span><script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
		<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" >
	</head>
    <body>
    </body>
</html>
<script>
	Ext.onReady(function(){
		Ext.MessageBox.alert('Helloworld!标题栏','HelloWorld,内容!');
	});
</script>

其中,js与css的引入顺序,最好如同上面的所示,因为改变顺序之后可能会出现这样那样的问题。

然后<script>标签中的脚本,Ext.onReady(function(){});是必须的,不像Jquery那样去掉与不去掉只是页面加载前与页面加载后的问题。

时间: 2024-10-11 16:18:47

【ExtJs】ExtJs4.2.1的配置与Helloworld的相关文章

ExtJS4.2 仅需配置URL动态加载GridPanel列(带分页)

最近做ExtJS一直想做个傻瓜式的GridPanel,今天折腾了一天,从GitHub找到的老外写的解决方案, 在他的基础上做了一些改动,增加了分页,增加了columns手动配置(原本只能动态生成),大家有兴趣可以自由扩展,我做了很详细的注释 效果图如下,仅需在html页面引入ext.all,并创建自定义控件,配置url即可创建带分页效果的GirdPanel 代码: 效果图: 一.动态加载自定义控件 自定义脚本包括两部分:DynamicGrid.js和DynamicReader.js 将Ext目录

[笔记]Android开发环境配置及HelloWorld程序

Android的开发需要以下四个工具: 1.JDK 2.Eclipse 3.Android SDK 4.ADT 具体功能: 1.JDK.JDK即Java Development Kit(Java开发工具包),包括JAVA运行环境,基础类库和JAVA工具,是JAVA运行的基础. 2.Eclipse.Eclipse是开发JAVA程序的软件工具. 3.Android SDK.SDK即Software Development Kit(软件开发工具包).AndroidSDK指的是Android专属的软件开

【Ratchet】Ratchet2.0.2的下载、配置与Helloworld

Ratchet这东西经常被人诟病,说其组件不够多,很多东西需要自己写,但是这也正是它的优势,因为它是完全基于基本的HTML与javascript,你可以在移动端利用最基本的HTML写出自己的想要的东西,说其长久不更新,也是其优势,主要是稳定.如果你需要搭建一个轻便的移动端网站,那么可以考虑使用Ratchet2.0.2,这东西在界面上,可以取代复杂的jQueryMobile,<[jQueryMobile]Helloworld与页面切换>(点击打开链接).同时最关键的一点,又没有人要求你仅用一种框

【Spring】Spring3.0.5的下载、配置与Helloworld

Spring这东西其实没有想象中这么难,只是由于网上大部分资料杂糅了许多其它奇奇怪怪的技术,什么Maven,log4j,什么东西都来,还有上来就将SSH整合的,那叫初学者,怎么可能看懂?下面以一个最简单,无其它额外的技术,讲解一下Spring. 一.Spring下载 首先,Spring的下载就是一个问题.这些框架的官网改来改去,然后在强推其新技术,把历史版本通通都去掉了.正如ExtJs一样,只能在国内的网上搜一下历史版本下载.要搞Spring3.0要下两个压缩包.一个是spring-framew

Extjs MVC模式开发,循序渐进,Helloworld

MVC模式案例(一) 即将实现网页的布局有三部分组成:顶部标题.左侧菜单和右侧主题内容显示.这里我们对案例的布局有个初步印象,方便今后我们的进一步学习. 了解了项目的最终效果,下面来看一下该案例最终的文件结构: 文件结构可以看出,在整个项目中,app文件夹是我们的主要工作目录,其中包含:controller(控制器).model(数据模型).store(数据集).view(视图).另外还有server文件夹,其主要目的是代替后台服务器为项目提供数据.这些内容我们将在今后的文章中逐步讲解,今天我们

【学习Struts2】 -- Struts2.3.24.1环境配置及HelloWorld应用

在创建好WebProject后,就可以开始进行Struts2的环境配置,可以到Struts2官网下载,本环境使用struts-2.3.24.1版本. 首先导入必要的jar包到WebProject的/WebRoot/WEB-INF/lib下,具体jar包如下图所示: 接着修改web.xml文件,加入struts2的配置信息,文件内容如下: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xs

Node.js配置And HelloWorld

先从https://nodejs.org/en/上下载Node.js的安装程序  node-v4.4.4-x64.msi 直接双击运行,安装到默认路径 C:\Program Files\nodejs 安装完成后需要配置一下环境变量 我的电脑右键->属性->高级系统设置->环境变量->在path后面加上C:\Program Files\nodejs\node.exe   (node.js的安装目录中的可执行文件) cmd 打印出了版本号说明安装成功了. 开始我的第一个Node.js程

【Python】Windows版本的Python开发环境的配置,Helloworld,Python中文问题,输入输出、条件、循环、数组、类

Python这东西似乎很有用的样子,但不知道为何一直火不起来, 有可能是因为这东西太难读~读作什么,派神.英语不好的人,第一眼看上去就懵了,还经常拼错,呵呵! 不过怎么说都好关键是要会. 一.Python开发环境的配置 1.首先打开Python的官网https://www.python.org/downloads/下载(点击打开链接)Python的开发环境.这东西是基础的基础,相当于JDK在Java的地位.值得注意的是,Python这小子又不老实了,又开始把自身的语法改到面目全非,在强推Pyth

springMVC入门配置及helloworld实例

1. 新建web project 2. 往lib里copy必须的jar 3. 改写web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-inst