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>
分享到:
相关推荐
1、开始使用extjs 2、组件的介绍以及应用 3、ExtJS的核心 该教程有相应的代码以供参考 <!--导入Ext3.2--> <link rel="stylesheet" type="text/css" href="extjs3.2/resources/css/ext-all.css" /> ...
第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之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
extjs4.2 desktop demo 拓展功能:图标换行,拖动,多级开始菜单,修正extjs4.2的一些bug,加了几个桌面图标,纯js无后台程序,无需发布即可浏览。
第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开始之旅第二讲,总共有4部视频 涵盖从初识extjs,到环境搭建,工具栏到控件。
开始ExtJs梦想之旅 第三讲.ExtJS工具栏、菜单栏 第四讲.ExtJS最常用的表单之textfield控件 第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第六讲.ExtJs最常用表单组件ComboBox、time、date 第七讲.ExtJS...
该系列文章不侧重全方位的去介绍ExtJs 的使用,只是侧重于解决ExtJs 问题的思考方法。写的人不用长篇大论,学的人则能够自立更生
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 ...
ExtJS可以与prototype.js和jquery等成熟的js库一起使用,也可以作为单独的应用部署到开发中去,Adobe AIR与iPhone开发工具都提供了对Ext的支持。 就我个人的观点而言,在业务处理上讲ExtJS2.0已非常完备,足以满足...
这个项目里面包含了本人从开始初学EXTJS4的全部事例:grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释,还有一个file.txt文件是本人的小小总结,还没完整。我也是一个第一...
因为以前弄过3.x版本, 所以对extjs还是有一定的熟悉程度; extjs相关联的技术也是比较熟悉的, 所以特决定: 把extjs3.4的开发前的准备这篇文章写好以后, 好好研究下4.1版本, 后续会...下面就开始我的ExtJS学习之路吧……
转-eclipse下安装Extjs的插件spket,extjs3.2版 转自:http://xiehx163.blog.163.com/blog/static/6146679620097281113653/ 最近项目要用ext进行开发,所以这段时间开始学习ext. 我这里用的是ext3.2,eclipse3.5。 每...
本模块采用的是Extjs6.0的开发技术,使用过extjs的朋友都知道,从Extjs5.0版本开始引入的新的开发模式,这种模式更清楚,更易理解,所以作为入门,大家不妨下载下来看看。 ps:本模块共有3个模块,其中两个模块采用...
个人开发的记录,希望能有帮助,互相学习技术
ExtJS入门教程 一、开始EXTJS 二、组件的介绍 三、EXT核心
extJs教程 例子 从入门开始学习 extJs教程 例子 从入门开始学习
让我们开始EXTJS之旅,是开始学习的ext必看的基础知识!
要开始,让我们使用 Ext JS 的现代工具包来查看一个简单的“Hello World”应用程序。 Hello world! 提示:单击“Run”查看代码呈现为应用程序。(它将在这里启动) 正如您从这个内联代码示例中看到的,生成一个 Ext JS...