ExtJS入门——开始


认识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文档流来布局子元素。
(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