ExtJS入门——开始

Posted 周五, 12/14/2012 - 01:40 by admin


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

  • 要发表评论，请先登录