Ext学习笔记4-Panel

13-Ext_Panel

• Ext.Panel的主要配置项
  

  配置项	参数类型	说 明
  animCollapse	Boolean	设置面板折叠或展开时是否显示动画效果,如果Ext.Fx类可用则默认为true
  applyTo	Mixed	一个页面上已经存在的元素或元素id,组件将会追加到元素的后面,而不是 将其作为新组件的容器
  autoDestroy	Boolean	设置是否自动销毁从容器中移除的组件,默认为true,否则要手工销毁
  autoHeight	Boolean	是否使用自动高度,true则使用自动高度,false则使用固定高度,默认为false
  autoLoad	Object/ string/ Function	设置面板自动加载的url地址.如果不为null则面板会尝试加载该url并立刻在面板中进行渲染, 这个连接将变成面板的body元素,所以可以根据需要在任何时候刷新面板内容
  autoScroll	Boolean	设置是否自动显示滚动条,true则设置面板的body元素样式为overflow:'auto', 内容溢出时会自动显示滚动条,false则不显示滚动条,而对溢出的内容进行截断 默认为false
  autoShow	Boolean	设置是否移除组件的隐藏样式(例如:'x-hidden' or 'x-hide-display'), 如果true则在渲染的时候移除他们,默认为false
  autoWidth	Boolean	是否使用自动宽度,true为自动宽度,false为固定宽度,默认为false
  baseCls	String	应用于面板元素的基本样式类,默认为'x-panel'
  bbar	Object/ Array	设置面板的低端工具栏,可以是Ext.Toolbar对象,工具栏配置对象或button配置对象的数组
  bodyBorder	Boolean	设置是否显示面板体(body)的内部边框,true则显示,false则隐藏,默认为true, 并且该项值在border:true时生效
  bodyStyle	Object/ string/ Function	应用于面板体(body)的自定义样式,默认为null
  border	Boolean	是否显示面板体(body)的边框,true则显示,,false则隐藏,默认为true,默认边框宽度为2px
  buttonAlign	String	设置面板底部(footer)中按钮对齐方式,有效值为left,center,right(默认)
  buttons	Array	加入到面板底部中的按钮配置对象的数组
  collapseFirst	Boolean	设置渲染展开或收缩按钮的顺序.true则最后渲染,默认为true. true则在其他按钮渲染前渲染展开或收缩按钮,false则最后渲染 默认为true,该配置项决定了展开或收缩按钮的位置
  collapsed	Boolean	设置面板在第一次渲染时是否处于收缩状态,true则收缩,false则展开,默认为false
  collapsible	Boolean	设置是否允许面板进行展开和收缩,true则允许进行展开和收缩,并在面板头部显示收缩按钮. 默认为false
  contentEl	String	设置面板的内容元素,可以时页面元素的id或已存在的HTML节点
  defaultType	String	面板中元素的默认类型,默认为'panel'
  defaults	Object	应用到面板容器中所有元素的配置对象,例如:defaults{bodyStyle:'padding:15px'}
  floating	Boolean	设置面板是否可以浮动,true则允许,默认为false, 注意:设置floating为true会导致面板显示在负偏移位置,从而面板不可见,因为浮动状态下, 面板时采用绝对定位的,位置必须在渲染之后进行明确设置(例如myPanel.setPosition(100,100);) 浮动面板也需要有固定宽度
  footer	Boolean	设置是否创建面板底部元素,true则创建,false则跳过footer元素的创建,如果一个或多个按钮 加入到footer中,则footer的设置会被忽略,而直接创建footer元素
  frame	Boolean	设置是否渲染面板,true则渲染面板为自定义的圆角框,false则渲染为1px的直角框
  header	Boolean	设置是否创建面板头部元素,如果提供了title,但明确色设置header为false则默认为true
  headerAsText	Boolean	设置是否在面板header中显示title,true则显示,默认true
  height	Number	面板高度
  hideBorders	Boolean	true则隐藏面板容器综合那个所有组件的边框,false则根据组件的具体配置进行显示
  hideCollapseTool	Boolean	设置当collapsible为true时,是否显示展开或收缩按钮
  html	String/ Object	设置面板(body)元素的内容为HTML片段,或DomHeper生成的内容
  items	Mixed	单独一个子组件或子组件的数组
  layout	String	面板的布局类型,默认Ext.layout.ContainerLayout布局, 被选布局的配置项通过layoutConfig进行设置
  layoutConfig	Object	这个配置对象包含被选布局的配置项,针对每种布局的配置项需要查看相应布局类说明
  maskDisabled	Boolean	设置当面板不能使用时是否遮罩面板,true则遮罩,么哦人为true
  shadow	Boolean/ String	设置是否在面板后面显示阴影,true则显示,通过字符串指定阴影的显示模式, 有效值包括:sides,frame,drop 默认为sides,该项只有在floating为true时生效
  shadowOffset	Number	设置面板阴影的偏移量,以像素为单位,默认为4,该项只有在floating为true时生效
  tbar	Object/ Array	设置面板的顶端工具栏,可以时Ext.Toolbar对象,工具栏配置对象或button配置对象的数组, 注意,面板渲染后只能通过getTopToolbar方法防卫该工具栏
  title	String	显示在面板头部的标题信息
  titleCollapse	Boolean	设置是否允许通过单击面板头部进行展开和收缩操作,true则允许,默认为false
  tools	Array	工具按钮配置对象数组,这写按钮会被添加到面板头部功能区,在下表中会有详细说明
  width	Number	面板宽度,默认为auto

  
  
• tools配置项明细表
  

  配置项	参数类型	说 明
  id	String	必选项,可能值及效果见下表
  handler	Function	单击按钮后触发的处理函数, 参数包括event:Ext.EventObject,toolEl:Ext.Element,Panel:Ext.Panel
  scope	Object	处理函数的执行范围
  qtip	String/ Object	为按钮制定提示信息,可以时自负串,或配置对象
  hidden	Boolean	设置初次渲染时,是否隐藏
  on	Object	为按钮配置事件监听器

  
  id图对应表
  
  

  tooggle

  close

  minimize

  maximize

  restore

  gear

  pin

  unpin

  right

  left

  up

  down

  refresh

  minus

  plus

  help

  search

  save

* 属性:12
     - frame : 就是把四个角变成圆角, 默认为直角, 值为true就可以设成圆角, 并且拥有背景颜色且将button也包含在其中
     - renderTo : 将该元素放到某个元素中 其对应的方法是 render
     - applyTo: 将该元素在某个元素的基础上创建 其对应的方法是 applyToMarkup
     - plain : Boolean : True 表示为渲染window body的背景为透明的背景,这样看来window body 与边框元素(framing elements)融为一体,false表示为加入浅色的背景, 使得在视觉上body元素与外围边框清晰地分辨出来(默认为 false).

* 方法:
     - addButton(String/Object_config, Function_handler, Object_scope ): 添加一个按钮对象到面板中,它为设计时方法(即一旦该组件被添加到网页之后就不能再用该方法了 )
     - add(Ext.Component/Object_component) : 添加一个组建到面板中
     -  applyToMarkup(在什么节点上,添加什么节点, 是Ext元素,还是普通的HTML元素): 将该元素在某个元素的基础上创建 ,见示例3
     - render : 将该元素放到某个元素中 

* 事件:
     - render : 当前对象被正确构造后触发

* 由Ext_form_TextField组建产生的引申话题(1)
     - Ext.layout.FormLayout : 只有在次布局下才能正确现实文本框的标签名,
                                                 布局的宿主对象必须是Ext.Container或者Ext.Container的子类
     - 在应用FormLayout布局时只要在宿主对象的构造参数中指定layout:'form' 即可
     - Ext.getCmp(string _id) : 得到id为_id的组建(EXT组建)对象

* 由Ext_form_TextField组建产生的引申话题(2)
     - xtype : 在ExtJS的可视化组建部署中有一种xtype机制, 即:通过指定xtype的值, 来告诉容器组建如何初始化包含组建,
                    如:xtype : 'textfield', 表示使用Ext.form.TextField来进行初始化(示例3)
     - 其他xtype值如下:

xtype            类Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
grid             Ext.grid.GridPanel
paging           Ext.PagingToolbar
panel            Ext.Panel
progress         Ext.ProgressBar
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.ViewPort
window           Ext.Window

Toolbar components 工具条组件
---------------------------------------
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton
tbtext           Ext.Toolbar.TextItem

Form components 表单组件
---------------------------------------
form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

 

示例代码1:

Ext.onReady(function(){
    var _panel = new Ext.Panel({
        renderTo:Ext.getBody(),
        layout:'form',
        labelWidth:30,
        listeners:{
            'render' : function(_panel){                 //这里之所以在这里用这个render事件而不像下面注释掉的代码那样添加组建
                _panel.add(new Ext.form.TextField({     //,是因为那样的话很可能该组建还没有实例化完全,久像其中添加组建,很可能会出错!
                    fieldLabel:'姓名',
                    id:'txt_name'
                }))
            }
        }
    });
   
    //_panel.add(new Ext.form.TextField({
   //                fieldLabel:'姓名11',
  //                id:'txt_name1'
 //            }));
 
    new Ext.Button({
        text:"按钮",
        renderTo:Ext.getBody(),
        handler:function(){
            alert(Ext.getCmp('txt_name').getValue());
        }
    });
})

 

示例代码2:

/// <reference path="../ext/vswd-ext_2.0.2.js" />< /FONT>

Ext.onReady(function(){

    var _panel = new Ext.Panel({
      //  renderTo:Ext.getBody(),
        title : '人员信息',
        frame : true,   //设成圆角,并且拥有背景颜色且将button也包含在其中
        width : 300,
        height : 200
    });
   
    _panel.addButton({text:'确定'});    //这个按钮是由form创建的
   
    _panel.addButton(new Ext.Button({    //这个按钮是我们创建好了再加进去的,区别在于自己创建
                                                               //的最小宽度由内部字体的宽度而定,而由form创建的有默认最小宽度
            text : '取消',
     }));

    _panel.render(Ext.getBody()); //可以看到上面属性中的注释,如果和这条语句换一下,就可以看到按钮并没有加上,原因就是addButton方法是设计时方法
});

示例代码3:

<!--cssStyle-->

<style type="text/css">
 .contain
 {
     width:100%;
     height:100%;
     top:0;
     left:0;    
 }
 .center
 {
     position:absolute;
     top:30%;
     left:43%;
     text-align:left;
 }
 </style>

//js代码

Ext.onReady(function(){

    var _panel = new Ext.Panel({
      //  renderTo:Ext.getBody(),
        title : '人员信息',
        frame : true,    //设成圆角,并且拥有背景颜色且将button也包含在其中
        width : 300,
        height : 200,
        layout : 'form'  //记得添加表单,一定要有form布局
    });

    _panel.add({
        xtype:'textfield',    //xtype用法
        fieldLabel:'用户名'
    })
    _panel.addButton({text:'确定'});    //这个按钮是由form创建的
   
    _panel.addButton(new Ext.Button({    //这个按钮是我们创建好了再加进去的,区别在于自己创建的最小宽度由内部字体的宽度而定,而由form创建的有默认最小宽度
            text : '取消'
    }));

   _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),        //applyToMarkup(在什么节点上,添加什么节点,是Ext元素,还是普通的HTML元素)
                                              {
                                                tag : 'div',
                                                cls : 'contain',
                                                cn : [{                      //cn是子结点
                                                    tag : 'div',
                                                    cls : 'center'   
                                                }]
                                              },
                                              true).child('div'));  //child 指的是 元素的子节点
});

综合实例:

Ext.onReady(function(){
    //var lp = new LP();
    //lp.render(Ext.getBody());
   
    var _loginBox = new Ext.Panel({
        title : '登陆',
        width : 270,
        autoHeight:true,    //这里是关键 不加它将不能正常现实文本框
        layout : 'form',
        frame : true,
        labelWidth : 65,
        labelAlign : 'right',
        buttonAlign :'center',
        defaults : {xtype:'textfield',width:150},
        items:[{
            id : 'username',
            fieldLabel : '用户名'
        },{
            id : 'password',
            fieldLabel : '密　码'
         }],
         buttons:[{
             text : '登陆',
             handler:function(){
                            alert(String.format('用户名是:{0}\n密码是:{1}',Ext.getCmp('username').getValue(),Ext.getCmp('password').getValue()));
                       }
         },{
            text:'注册',
            handler : function(){
                alert('注册');
            }
         },{
            text : '退出',
            handler:function(){
                _loginBox.hide();
            }
         }]
    });

 _loginBox.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{tag:'div',cls:'contian',cn:{tag:'div',cls:'center'}},true).child('div'));

})