Ext学习笔记11-布局

最新推荐文章于 2014-02-20 15:03:04 发布

乐韬科技

最新推荐文章于 2014-02-20 15:03:04 发布

阅读量716

点赞数

分类专栏： Ext学习笔记

本文链接：https://blog.csdn.net/sjf8013/article/details/7722631

版权

Ext学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Ext中的布局类

主要布局类有:

ContainerLayout(容器布局)
FitLayout(自适应布局)
AccordionLayout(折叠布局)
CardLayout(卡片布局)
AnchorLayout(锚点布局)
AbsoluteLayout(绝对位置布局)
FormLayout(表单布局)
ColumnLayouyt(列布局)
TableLayout(表格布局)
BorderLayout(边框布局)

ContainerLayout(容器布局)
--- 所有布局类的基类
--- 主要配置项目

配置项	参数类型	说明
activeItem	String/Number	一个对当前活动组件的引用. activeItem只能在那些一次只能显示一个items项目的布局中生效例如:Accordion, CardLayout, FitLayout

FitLayout自适应布局
--- 是布局类的基础类

AccordionLayout折叠布局
--- 扩展自FitLayout
--- 主要配置项目表

配置项	参数类型	说明
activeOnTop	Boolean	是否保持展开的子面板处于父面板的顶端, true则交换当前展开面版到顶端,false则保持原来的位置不动
animate	Boolean	设置是否有动画效果,默认为false
fill	Boolean	设置子面板是否自动调整高度允许面板的剩余空间,true则充满, 默认为true
hideCollapseTool	Boolean	设置是否隐藏子面板的"展开收缩"按钮,true表示隐藏,默认为false 如果设置为true,则应使titleCollapse配置项也为true
titleCollapse	Boolean	设置是否允许通过单击子面板的标题来展开或收缩面板,true表示允许, 默认为true

示例:
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   layout : 'accordion',
   layoutConfig : {
    activeOnTop : true,//设置打开的子面板置顶
    fill : true,//子面板充满父面板的剩余空间
    hideCollapseTool: false,//显示“展开收缩”按钮
    titleCollapse : true,//允许通过点击子面板的标题来展开或收缩面板
    animate:true//使用动画效果
   },
   title:'Ext.layout.Accordion布局示例',
   frame:true,//渲染面板
   height : 150,
   width : 250,
   applyTo :'panel',
   defaults : {//设置默认属性
    bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
   },
   items: [
    {
     title : '嵌套面板一',
     html : '说明一'
    },
    {
     title : '嵌套面板二',
     html : '说明二'
    }
    ,
    {
     title : '嵌套面板三',
     html : '说明三'
    }
   ]
  })
});

AnchorLayout锚点布局
--- 该布局时根据容器大小为其所包含的子面板进行定位的布局
--- 使用该布局需要注意配置项的使用:
       @ anchor(子容器提供).加入到使用anchor布局面板的子面板也都支持一个anchor配置项,他是一个包含两个值的字符串,水平和垂直.
      例如:'100% 50%',有效值包括如下3类
                  --- 百分比(Percentage): 例如:anchor:'100% 50%'
                  --- 偏移值(Offsets): 任意数值,可以时正数,也可以是负数,
                       第一项数值表示子面板到父容器有边缘的偏移量,第二项数值表示子面板到父容器下边缘的偏移量
                       例如:'-50 -100'.
                  --- 参考边(Sides): 有效值包括'right'(或'r') 和 'bottom'(或'b'), 例如:'r b'.
       --- 以上3种值类型可以组合使用, 例如:'-50 75%'
CardLayout卡片式布局
--- 扩展自FitLayout
--- 该布局会包含多个子面板任何时候都只有一个子面板处于显示状态,这钟布局经常用来制作导航和标签页.
      该布局的重点方式时setActiveItem方法,它接受一个子面板id或索引做为参数.CardLayout布局并没有提供子面板的导航机制,
      需要开发人员自己实现

方法名

说明

setActiveItem(String/Number item) : void

根据子面板id或索引切换当前显示的子面板

示例:

Ext.onReady(function(){

  var panel = new Ext.Panel({
   layout : 'card',
   activeItem : 0,//设置默认显示第一个子面板
   title:'Ext.layout.CardLayout布局示例',
   frame:true,//渲染面板
   height : 150,
   width : 250,
   applyTo :'hello',
   defaults : {//设置默认属性
    bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
   },
   items: [
    {
     title : '嵌套面板一',
     html : '说明一',
     id : 'p1'
    },
    {
     title : '嵌套面板二',
     html : '说明二',
     id : 'p2'
    }
    ,
    {
     title : '嵌套面板三',
     html : '说明三',
     id : 'p3'
    }
   ],
   buttons:[
    {
     text : '上一页',
     handler : changePage
    },
    {
     text : '下一页',
     handler : changePage
    }
   ]
  })
  //切换子面板
  function changePage(btn){
   var index = Number(panel.layout.activeItem.id.substring(1));
   if(btn.text == '上一页'){
    index -= 1;
    if(index < 1){
     index = 1;
    }
   }else{
    index += 1;
    if(index > 3){
     index = 3;
    }
   }
   panel.layout.setActiveItem('p'+index);
  }
});

TabPanel页签
--- 扩展自Ext.Panel组件,它的每个tab页都是一个Ext.Panel
--- 主要配置项目表

配置项	参数类型	说明
activeTab	Stirng/ Number	设置默认激活的tab页,参数为tab页的id或索引值
animScroll	Boolean	设置是否在tab页滚地哦那个的时候启动动画效果,true则使用,默认为true 该项只在enableTab/scroll=true时生效
autoTabSelector	String	用于在dom中自动查找div的样式选择器,只有在autoTabs=true时生效,默认值:'div.x-tab'
autoTabs	Boolean	设置是否在dom中查找样式类为'x-tab'的div,并且将其转换为tab页,true则进行查找,默认为false
enableTabScroll	Boolean	设置是否在tab标签总宽度超出可用宽度时自动出现滚动按钮,true则出现,默认为false
layoutOnTabChange	Boolean	设置是否在tab切换时重新对tab页元素进行布局
minTabWidth	Number	tab标签的最小宽度,默认为30,只在resizeTabs=true时生效
resizeTabs	Boolean	设置是否允许tab标签自动调整宽度
scrollDuration	Float	设置每次股东tab页执行动画的时间,单位为毫秒,默认是.35.该项只有在animScroll=true时生效
scrollIncrement	Number	设置每次滚动tab标签的长度,单位是像素,默认值是100. 该项只有在enableTabScroll:true时生效
scrollRepeatInterval	Number	设置当tab页滚动按钮被持续按下时(即鼠标左键连续按下,而不是点击),执行滚动操作的时间间隔. 单位时毫秒
tabMargin	Number	以像素为单位计算的空白空间,计算tab标签大小和滚动尺寸
tabPosition	String	tab标签在面板上的位置,包括'top'和bottom,默认值是'top'
tabWidth	Number	设置tab页的初始宽度,默认为120像素.该项只在resizeTabs=true时生效

Ext中的Ajax

Ext.Ajax主要配置项及公共属性表

配置项	参数类型	说明
listeners	Object	包含一个或多个事件处理函数的配置对象
autoAbort	Boolean	设置一个新的请求是否终止任何未完成的请求,true则终止,默认为false
defaultHeaders	Object	默认的请求头配置对象,在每次请求中该对象的信息信息将被添加到请求中
disableCaching	Boolean	true则增加一个cache-buster参数到get请求中,默认为true
extraParams	Object	包含请求额外参数的配置对象,在每次请求中该对象的信息将被添加到请求中, 默认为undefined
method	String	设置默认的请求方式,有效值包括POST和GET
timeout	Number	设置请求的超时时间,默认为300000毫秒
url	String	设置请求的服务器url地址,默认为undefined

Ext.Ajax主要方法

方法名	说明
abort([Number transactionId]) : void	用于终止任何未完成的Ajax请求参数说明:transactionId, 表示要终止的传输id
isLoading([Number transactionId]) ) : Boolean	判断指定的Ajax请求是否正在运行中参数说明:transactionId, 表示要判断的传输id
request([Object optinos]) : Number	向服务器发送一个http请求,参数见下表
serializeForm(String/HTMLElement form):String	串行化一个表单字段到一个编码后的url中参数说明:form,form表单id或对应的dom元素

Ext.Ajax.requesst方法详解
--- 该方法是客户端向服务器发送请求的重要方法,下啊将会对该方法的使用进行详细的讲解
--- 调用格式:request([Object optinos]) : Number
--- 参数options:包含请求参数及回调处理,可能属性包括下表:

参数项	参数类型	说明
url	String	请求的服务器地址,默认使用Ext.Ajax对象中的url配置的值
paras	Object/ String/ Function	包含请求参数的配置对象,或者包含字段名称和字段值的字符串 (格式:name=username&age=20),或可以返回上诉内容的函数
method	String	指定http请求方式,有效值包括GET和POST,默认使用Ext.Ajax对象中的ethod配置项的值
callback	Function	指定接收到服务器相应后的处理函数,不管成功还是失败,该函数都将会被调用, 并将如下参数传递到回调函数中. * options : Object 执行请求时的options参数 * success : Boolean true则表示请求成功 * response : Object 包含相应值的XMLHttpRegquest对象
success	Function	指定请求成功时的回调函数,并将如下两个参数传递到回调函数中 * response : Object 包含相应值的XMLHttpRegquest对象 * options : Object 执行请求时的options参数
failure	Function	指定请求失败时的回调函数,并将如下两个参数传递到回调函数中 * response : Object 包含相应值的XMLHttpRegquest对象 * options : Object 执行请求时的options参数
scope	Object	执行回调函数的作用域,即回调函数中this指向的对象,默认是浏览器的window对象
form	Object/ String	制定要提交表单的id
isUpload	Boolean	true则设置表单进行文件上传,默认为自动检测.
headers	Object	设置请求头
xmlData	Object	指定要发送到服务器端的XML文档, 它将会替代要发送的数据参数,任何参数都将被添加到url中
jsonData	Object/ String	指定要发送到服务器端的json数据, 它将会替代要发送的数据参数,任何参数都将被添加到url中
disableCaching	Boolean	true则增加唯一的cache-buster参数到GET请求中

Ext.Updater基础
Ext.Updater主要配置项及公共属性表

Ext组件自定义类化

/**
* @class Ws.WebQQ.UI.AllUserGrid
* @public
* @description 格式化用户状态函数
*/
PackageURL.ClassName = Ext.extend(superClass, {
/** >>>>>>>>>>>>>>>>>>>>成员变量区域<<<<<<<<<<<<<<<<<<<< */

/** >>>>>>>>>>>>>>>>>>>>成员变量区域<<<<<<<<<<<<<<<<<<<< */

/** >>>>>>>>>>>>>>>>>>>>构造函数区域<<<<<<<<<<<<<<<<<<<< */
constructor : function(_cfg) {

  if (_cfg == null) {
   _cfg = {};
  }
  Ext.apply(this, _cfg);

/** >>>>>>>>>>>>>>>>>>>>初始化成员变量区<<<<<<<<<<<<<<<<<<<< */

  /** >>>>>>>>>>>>>>>>>>>>初始化成员变量区<<<<<<<<<<<<<<<<<<<< */
  /** >>>>>>>>>>>>>>>>>>>>超类构造函数区域<<<<<<<<<<<<<<<<<<<< */
  PackageURL.ClassName.superclass.constructor.call(this, {
    // 超类配置项
    });
  /** >>>>>>>>>>>>>>>>>>>>超类构造函数区域<<<<<<<<<<<<<<<<<<<< */
  /** >>>>>>>>>>>>>>>>>>>>定义事件区 <<<<<<<<<<<<<<<<<<<< */

/** >>>>>>>>>>>>>>>>>>>>定义事件区 <<<<<<<<<<<<<<<<<<<< */
}
/** >>>>>>>>>>>>>>>>>>>>构造函数区域<<<<<<<<<<<<<<<<<<<< */

/** >>>>>>>>>>>>>>>>>>>>方法区<<<<<<<<<<<<<<<<<<<< */

/** >>>>>>>>>>>>>>>>>>>>事件函数区<<<<<<<<<<<<<<<<<<<< */

});

/**
*class ChatMsg 类
*
*
*/
Ws.WebQQ.VO.ChatMsg = function(_cfg){
Ext.apply(this ,_cfg);
};

Ext.apply(Ws.WebQQ.VO.ChatMsg.prototype,{
                userId:null,
                userName:null,
                email:null,
                password:null,
                sex:null,
                age:null,
                realName:null,
                birthday:null,
                introduction:null
            });