ExtJS (1)

其实学这个ExtJS主要是它的功能的强大,还有一些大型公司的常用开发前端框架,其次呢是为了整一套新的前端框架出来,所以用了ExtJS

这是网上看到的一个ExtJS 桌面的一个案例截图

但是要想灵活运用Extjs,还是的慢慢来~估计有基础的同胞们都会了,初学者,如有错误的地方大神请指教~O(∩_∩)O谢谢!

文件/文件夹名的作用:

build:文件夹下有一个sdk.jsb3文件,这个文件用于eclipse中spket插件,可以实现ExtJs的代码提示功能;

builds:压缩后的ExtJS代码,体积更小,更快;
    docs:开发文档;
    examples:官方演示示例;
    locale:多国语言资源文件;
    pkgs:ExtJS各部分功能的打包文件;
    resource:ExtJS所需要的CSS与图片文件;
    src:未压缩的源代码目录;
    bootstarp.js:ExtJS库引导文件,可通过参数自动切换ext-all.js与ext-all-debug.js;
    ext-all.js:ExtJS核心库,需要引用;
    ext-all-debug.js:ExtJS核心库的调试版,调试时使用。

注:EXTJS文件的区别:

ext-all.js:包含所有的EXTJS框架文件,已经混淆
    ext-all-debug.js:包含所有的EXTJS框架文件,没有混淆
    ext-all-dev.js:包含所有的EXTJS框架文件,没有混淆,且包含调试信息
    ext.js:仅包含能让EXTJS运行的最小集合,已经混淆
    ext-debug.js:仅包含能让EXTJS运行的最小集合,没有混淆
    ext-dev.js:仅包含能让EXTJS运行的最小集合,没有混淆,且包含调试信息
    bootstrap.js:自动加载ext-all.js或者ext-all-debug.js,在以下情况下会加载ext-all-debug.js

1.当前主机名是本地
        2.当前主机是使用IPV4地址
        3.Current protocol is a file
        4.其他情况下自动加载ext-all.js

其次呢我们要知道:

1、知道ExtJs是干嘛的

2、有面向对象的知识

3、具有一定的Javascript知识

4、熟悉JSON

5、不是拿来主义者,遇到问题先百度的

本教程不仅能教会你ExtJs的使用,而且还要教会大家怎么查文档(这个才是最重要的),跟着我让你们一步一步成为ExtJs大神(其实我是在夸自己,呵呵),如果大家在学习的时候遇到了问题可以留言,如果有时间一定回复。

首先看使用ExtJs5.0所必须的文件,解压后打开build目录,如下所示,红色框内的为必须的文件,其中ext-all.js为主文件,packages中为主题文件

1 <link rel="stylesheet" type="text/css" href="extjs5.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
2 <script type="text/javascript" src="extjs5.0/ext-all.js"></script>
3 <script type="text/javascript" src="extjs5.0/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
4 <script type="text/javascript" src="extjs5.0/examples/shared/include-ext.js"></script>

这个js会自动加载上面的三个文件,效果等同于上面的引用,需要注意文件顺序ext-all.js必须在所有js前面

下面是packages内的文件夹

ext-local 是语言包,其中有中文支持

其他带有theme的都是主题,主题一般需要引入一个样式文件和一个js文件,与上面的类似如:ext-theme-crisp-all.css和ext-theme-crisp.js

js在build下,样式在build/resource下,所有主题包结构类似。

完成上面的操作之后就可以使用ExtJs了,下面写一个弹出框的效果

1 <script type="text/javascript">
2         //在页面加载完成之后执行
3         Ext.onReady(function(){
4             Ext.MessageBox.alert(‘系统提示‘,‘ExtJS 5.0 测试案例!‘);
5         });
6 </script>

最终效果

ExtJS 5.0版本下载:点击下载ExtJS5.0

时间: 2024-10-10 23:33:01

ExtJS (1)的相关文章

Extjs 4.2 设置buttontext为中文

可以在Ext.QuickTips.init();后加入如下代码: Ext.MessageBox.buttonText = { ok : "确定", cancel : "取消", yes : "是", no : "否" }; Extjs 4.2 设置buttontext为中文,布布扣,bubuko.com

ExtJs基础知识总结:弹窗(四)

概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌套到widget.window,然后随着widget.window的show方法展示到页面上哪?下面有几种方案思路 思路一.直接将gridpandel填充到widget.window对应的Items 代码如下: var InvoiceItemGrid = Ext.create('Ext.grid.P

ExtJs布局之viewport

<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/

ExtJS如何取出某个DIV中的内容

在使用ExtJS的时候,不免我们要在某个DIV中取出DIV的内容,因此通过查找api和相关资料应该向如下方式进行取值 1 Ext.onReady(function(){ 2 var panel = new Ext.Panel({ 3 title:'Ext.core.domhelper.applystyles示例', 4 width:300, 5 height:200, 6 renderTo:'sub1', 7 html:"<div id='div1' style='height:160px

ExtJS实例1

1.创建一个Extjs的Window,用ajax请求HTML文件,并执行HTML的代码和脚本 窗体中文字是从一个HTML中获取,并且HTML中执行脚本使窗体高亮1秒 主页面: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../../extjslib/resources/css/ext-all.css"

ExtJS实现Excel导出

1. 使用POI组件实现excel导出功能 //获取问题列表 List<Suggestion> targetStockList = suggestionService.getSuggestionList(map);           //创建一个新的Excel         HSSFWorkbook workBook = new HSSFWorkbook();         //创建sheet页         HSSFSheet sheet = workBook.createSheet

二、第一个ExtJS程序:helloExtJS

开发前的准备 下载并解压ExtJS包后,可以得到下图的文件目录结构: 在实际开发过程中并不需要所有的文件和目录,所需的包含如下目录即可: 若使用eclipse进行开发,只需将上述文件复制到WebRoot目录或其子目录. 开始 新建firstextjs.html 在使用ExtJS之前,需要在页面引入相应的样式和js文件,一般包括的最小集合是这样:ext-all.js,adapter/ext/ext-base.js,locale/ext-lang-zh_CN.js和整个resources目录. ex

extjs desktop中桌面图标换行

在Desktop.js中扩展一个函数 initShortCut : function() { var btnHeight = 64; var btnWidth = 64; var btnPadding = 30; var col = { index : 1, x : btnPadding }; var row = { index : 1, y : btnPadding }; var bottom; var numberOfItems = 0; var taskBarHeight = Ext.qu

Extjs5.0从入门到实战开发信息管理系统(Extjs基础、Extjs5新特性、Spring、Spring mvc、Mybatis)视频教程

Extjs5.0从入门到实战开发信息管理系统(Extjs基础.Extjs5新特性.Spring.Spring mvc.Mybatis)视频教程下载   联系QQ:1026270010 Extjs作为一款优秀的JS前端开发框架以其良好的架构.丰富的UI组件库.完善的文档和社区支持等诸多优点拥有广泛的市场应用空间,开发人员无需过多的关注HTML.CSS甚至各种常用JS算法,只需把精力放在业务逻辑上,利用各种组件的相互组合调用便可轻松而高效的开发出系统的前端页面. Extjs5在之前版本的基础上又推出

Extjs 4.2 树结点右键菜单(全选,反选,撤销)

自己写的最新版本extjs4.2的树结点的操作,记录一下,以后可能会用到. var tree = new Ext.tree.TreePanel({ flex: 1, animate: true, autoScroll: true, anchor: '100% 93%', store: new Ext.data.TreeStore({ root:{ expanded: true, text:'A', children:[{ expanded: true, text:'1', children:[{