ExtJS入门——开始

最新推荐文章于 2023-07-20 22:15:00 发布

荻莫

最新推荐文章于 2023-07-20 22:15:00 发布

阅读量786

点赞数

分类专栏： JavaScript 经验 Web开发 Ext 文章标签： ext Ext extjs ExtJS EXTJS Extjs ExtJs html Html HTML javascript JavaScript Javascript javaScript

经验同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

Web开发

13 篇文章 0 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

认识ExtJS

extjs是使用javascript、css和html等技术实现的主要用于创建用户界面，且与后台技术无关的前端ajax框架。extjs来源于yui，开发理念来源于传统的桌面软件开发。

1.下载extjs，解压，得到目录结构

builds：是extjs压缩后的代码，体积更小，加载更快
docs ：extjs的文档
examples：官方示例
locale：多国语言的资源文件
overview：extjs的功能简述
pkgs：extjs各部分功能的打包文件
resource：extjs要用到的图片文件与样式文件。
src：未压缩过的代码目录
bootstrap.js：extjs库的引导文件
ext-all.js ：必须引入的核心库
ext-all-debug.js：ext-all.js的调试版

2.也从hello world开始（extjs 4.0）

<HTML>
 <HEAD>
  <TITLE>HelloWorld</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="./ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="./ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="./ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.MessageBox.alert('HelloWorld', 'Hello World!Hello World!Hello World!Hello World!');
 });
  </script>
 </HEAD>
 <BODY></BODY>
</HTML>

3.实现工具栏和菜单栏

 <script type="text/javascript">
Ext.onReady(function(){
       var toolbar = new Ext.toolbar.Toolbar({
           renderTo:'toolbar',
           width:300
       });
       
       var childrenMenu = new Ext.menu.Menu({
           ignoreParentClicks:true,
           items:[
               {text:'open one'},
               {text:'open two'}
           ]            
       });
       
       var fileMenu = new Ext.menu.Menu({
           shadow:'frame',
           allowOtherMenus:true,
           items:[
               new Ext.menu.Item({
                   text:'new'
               }),
               {text:'open',menu:childrenMenu},
               {text:'close'}
           ]
       });
       
       
       toolbar.add(
           {
               text:'新建',
               menu:fileMenu
           },
           {
               text:'打开'
           },
           {
               text:'保存'
           },
           '->',
           '<a href="#">link</a>',
           'text'
       );
       
});
 </script>
</HEAD>
<BODY>
<div id='toolbar'></div>
</BODY>

4.最常用的表单

1）Ext.form.Basic基本表单提供了字段管理、数据验证、表单提交、数据加载等功能
2）认识Ext.form.Panel表单面板是表单项的容器，默认使用anchor布局
Ext.form.Panel与传统表单的提交方式、表单的验证和对表单组件的支持有不同：
（1）表单的提交方式原始的方式是同步进行，panel使用异步方式
（2）对表单验证的支持 ExtJS支持javascript验证方式
（3）对表单组件的支持 panel支持ext封装后的高级组件
例子一：

 <script type="text/javascript">
Ext.onReady(function(){
       Ext.QuickTips.init();
       var form = new Ext.form.Panel({
           title:'myForm',
           height:120,
           width:200,
           frame:true,
           renderTo:'form',
           defaults:{
               labelWidth:50,
               width:150,
               labelAlign:'left',
               allowBlank:false,
               blankText:'will not null',
               msgTarget:'qtip'
           },
           items:[{
               xtype:'textfield',
               fieldLabel:'name'
               },
               {
               xtype:'numberfield',
               fieldLabel:'age'
           }]
       });
});
 </script>
</HEAD>
<BODY>
<div id='form'></div>
</BODY>

5.面板和布局类

1）Ext.panel.Panel 主要包括5部分：底部工具栏，顶部工具栏，面板头部，面板底部，面板体

对于面板最重要的功能和作用就是在其中显示各种不同来源的内容，extjs提供了4种不同的显示内容的方式，分别是：

1）使用autoLoad配置项为面板加载远程页面就是远程加载html文件
2）使用contentEl配置项为面板加载本地资源加载当前页面中的html代码
3）使用html配置项自定义面板内容自己编写html代码
4）使用items配置项在面板中添加组件

2）标准布局类主要包括如下11种：
（1）auto（自动布局）默认采用，使用原始的HTML文档流来布局子元素。
（2）fit（自适应布局）使唯一的子元素充满容器
（3）accordion（折叠布局）只有一个子面板处于打开状态，其他的收缩起来
（4）card（卡片式布局）多个子面板，只有一个处于打开状态，其他的需要调用事件才能显示出来
（5）anchor（锚点布局）根据容器大小为其所包含的子面板进行定位。
（6）absolute（绝对位置布局）可以根据面板的位置配合x/y坐标进行定位
（7）checkboxgroup（复选框组布局）
（8）column（列布局）多列风格的布局样式
（9）table（表格布局）可以创建出复杂的表格布局
（10）border（边框布局）将整个容器分为5个部分：东南西北中。
（11）box（盒布局）
在ext中，所有的布局都是从ext.container开始的
3）使用viewport
viewport代表整个浏览器窗口的显示区域，将document.body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，每个页面中只允许出现一个viewport实例。

6.ext的事件和类

分为两种类型：自定义类型事件和浏览器事件
自定义事件：所有继承自Ext.util.Observable类的控件都可以支持事件，可以为这些对象定义一些事件，然后为这些事件配置监听器。当某个事件被触发时，ext会自动调用对应的监听器。
浏览器事件：传统意义上的鼠标单击、移动等事件。

作者:陈建虹
原文:http://blog.csdn.net/cjh6311882/article/details/8287283

荻莫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS入门——开始

认识ExtJSextjs是使用javascript、css和html等技术实现的主要用于创建用户界面，且与后台技术无关的前端ajax框架。extjs来源于yui，开发理念来源于传统的桌面软件开发。1.下载extjs，解压，得到目录结构builds：是extjs压缩后的代码，体积更小，加载更快docs ：extjs的文档examples：官方示例locale：多国语言的资源文件ove
复制链接

扫一扫