extjs入门——开始

转载

mb5ff4099f0a555 2012-12-12 16:41:00

文章标签 表单 html javascript 加载配置项 文章分类 代码人生

认识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种：

auto（自动布局） checkboxgroup（复选框组布局） fit（自适应布局） column（列布局）

accordion（折叠布局）table(表格布局） card（卡片式布局） border（边框布局）

　　 anchor（锚点布局）　box（盒布局） absolute（绝对位置布局）

（1）auto自动布局默认采用，使用原始的HTML文档流来布局子元素。