`
jayyanzhang2010
  • 浏览: 373178 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

开始使用ExtJS

阅读更多
Ext本身包括了很多界面元素,这些界面元素的显示特性由样式文件来定义,使用Ext框架时先要引入ExtJS的样式文件。
引入ExtJS的样式文件
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-3.2/resources/css/ext-all.css" />
ExtJS核心是一个javascript库,因此,我们先要引入Ext的javascript库存文件。ext的JS库文件分成两部分,一个是适配器adapter,其中定义了事件处理、动画效果等底层的API,Ext提供了几种适配器,jquery、prototype、yui及Ext自生的适配器。
引入ExtJS的脚本库
<script type="text/javascript" src="plugins/extjs/ext-3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-3.2/ext-all.js"></script>

把extjs的样式及js库文件引入到页面后,就可以开始使用extjs来开发应用程序界面。Ext提供了一个Ext类,在我们的js程序中,直接调用Ext.onReady来开始使用Ext应用界面。ExtJS版Hello World示例:
Ext应用代码:使用Ext.onReady来调用ExtJS组件
Ext.onReady(function(){
var win= new Ext.Window({title:"很cool的窗口",width:500,height:400,buttons:[{text:"确定"},{text:"取消"}]});
win.show();
})

当然,最好是把自己的js程序放独立的js文件中,然后使用script标签引入,这样便于开发及管理。示例,把脚本代码移植到独立的js文件中。

Ext 应用骨架代码:
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="plugins/extjs/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.2/ext-all.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.onReady(function(){
…///在这里面创建及使用ext控件。
});
</script>
0
0
分享到:
评论

相关推荐

    ExtJS入门教程

    1、开始使用extjs 2、组件的介绍以及应用 3、ExtJS的核心 该教程有相应的代码以供参考 &lt;!--导入Ext3.2--&gt; &lt;link rel="stylesheet" type="text/css" href="extjs3.2/resources/css/ext-all.css" /&gt; ...

    精通JS脚本之ExtJS框架.part2.rar

    第3章 开始使用ExtJS 3.1 ExtJS概述 3.1.1 ExtJS简介 3.1.2 ExtJS中的基本概念 3.1.3 ExtJS与常见JavaScript库的介绍与对比 3.2 创建第一个程序 3.2.1 下载ExtJS 3.2.2 部署到开发工具中 3.2.3 编写Hello...

    让我们开始EXTJS之旅EXTJS_WEB开发指南

    开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...

    extjs4.x学习笔记

    xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...

    extjs4.2 desktop 拓展

    extjs4.2 desktop demo 拓展功能:图标换行,拖动,多级开始菜单,修正extjs4.2的一些bug,加了几个桌面图标,纯js无后台程序,无需发布即可浏览。

    精通JS脚本之ExtJS框架.part1.rar

    第3章 开始使用ExtJS 3.1 ExtJS概述 3.1.1 ExtJS简介 3.1.2 ExtJS中的基本概念 3.1.3 ExtJS与常见JavaScript库的介绍与对比 3.2 创建第一个程序 3.2.1 下载ExtJS 3.2.2 部署到开发工具中 3.2.3 编写Hello...

    ExtJs开始之旅

    ExtJs开始之旅第二讲,总共有4部视频 涵盖从初识extjs,到环境搭建,工具栏到控件。

    Extjs4.1.1

    开始ExtJs梦想之旅 第三讲.ExtJS工具栏、菜单栏 第四讲.ExtJS最常用的表单之textfield控件 第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第六讲.ExtJs最常用表单组件ComboBox、time、date 第七讲.ExtJS...

    ExtJS 自学教程一切从API 开始

    该系列文章不侧重全方位的去介绍ExtJs 的使用,只是侧重于解决ExtJs 问题的思考方法。写的人不用长篇大论,学的人则能够自立更生

    深入浅出Extjs4.1.1

    2、开始ExtJs梦想之旅# n8 }: ~+ d4 X+ V1 c 3、ExtJS工具栏、菜单栏0 Q' y0 E. y E 4、ExtJS最常用的表单之textfield控件4 |4 ]8 ~/ d3 Y& k# X 5、ExtJs最常用表单组件Number、CheckBox、Radio* s, r% ~+ k; y# W ...

    ExtJS2 软件库

    ExtJS可以与prototype.js和jquery等成熟的js库一起使用,也可以作为单独的应用部署到开发中去,Adobe AIR与iPhone开发工具都提供了对Ext的支持。 就我个人的观点而言,在业务处理上讲ExtJS2.0已非常完备,足以满足...

    extjs4 项目例子

    这个项目里面包含了本人从开始初学EXTJS4的全部事例:grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释,还有一个file.txt文件是本人的小小总结,还没完整。我也是一个第一...

    extjs 3.4 开发前准备

    因为以前弄过3.x版本, 所以对extjs还是有一定的熟悉程度; extjs相关联的技术也是比较熟悉的, 所以特决定: 把extjs3.4的开发前的准备这篇文章写好以后, 好好研究下4.1版本, 后续会...下面就开始我的ExtJS学习之路吧……

    安装Extjs的插件spket,extjs3.2版.doc

    转-eclipse下安装Extjs的插件spket,extjs3.2版 转自:http://xiehx163.blog.163.com/blog/static/6146679620097281113653/ 最近项目要用ext进行开发,所以这段时间开始学习ext. 我这里用的是ext3.2,eclipse3.5。 每...

    Extjs6.0开发之mvvm与mvc的使用案例

    本模块采用的是Extjs6.0的开发技术,使用过extjs的朋友都知道,从Extjs5.0版本开始引入的新的开发模式,这种模式更清楚,更易理解,所以作为入门,大家不妨下载下来看看。 ps:本模块共有3个模块,其中两个模块采用...

    EXTJS讲解个人项目经历

    个人开发的记录,希望能有帮助,互相学习技术

    ExtJS入门教程.pdf

    ExtJS入门教程 一、开始EXTJS 二、组件的介绍 三、EXT核心

    extJs教程 例子 从入门开始学习

    extJs教程 例子 从入门开始学习 extJs教程 例子 从入门开始学习

    让我们开始EXTJS之旅

    让我们开始EXTJS之旅,是开始学习的ext必看的基础知识!

    extjs6.5快速开始.pdf

    要开始,让我们使用 Ext JS 的现代工具包来查看一个简单的“Hello World”应用程序。 Hello world! 提示:单击“Run”查看代码呈现为应用程序。(它将在这里启动) 正如您从这个内联代码示例中看到的,生成一个 Ext JS...

Global site tag (gtag.js) - Google Analytics