ExtJS学习之Ext.panel.Panel

Ext.panel.Panel扩展自Ext.container.Container,它可以应用布局,也可以作为各种组件的容器,并且可以扩展出各种功能强大的面板。作为标准的面板组件,它主要包括如下5个部分:底部工具栏、顶部工具栏、面板头部、面板底部和面板体,面板组件还内置了折叠、展开和关闭功能。面板内置的关闭功能将销毁面板组件,这会使得其与其子组件都不可以用,如果只是希望简单的隐藏,那么就需要设置closeAction:'hide',因为默认的是closeAction:'destroy'。

下面是一段简单的Panle的示例代码:

Ext.onReady(function() {
  Ext.create('Ext.panel.Panel', {
        title : '面板头部',
        width : 400,
        height : 300,
        frame : true, // 渲染一下
        renderTo : Ext.getBody(),
        bodyPadding : 30,
        bodyStyle : 'background-color:#FFC;font-size:16px',
        html : '这是一行用来测试的文字,这是一行用来测试的文字,这是一行用来测试的文字,这是一行用来测试的文字这是一行用来测试的文字',
        tbar : [{
              xtype : 'button',
              text : '头部按钮1'
            }, {
              xtype : 'button',
              text : '头部按钮2'
            }],
        tools : [{
              type : 'minimize'
            }, {
              type : 'maximize'

            }, {
              type : 'close',
              handler : function() {
                Ext.Msg.alert('提示', '点击了关闭');
              }
            }],
        buttons : [{
              text : '底部按钮1'
            }, {
              text : '底部按钮2'
            }]
      });
});

上面代码的效果图如下图1所示:

示例panel

图1:示例panel

上面代码中的tools指的是头部右侧的那个小工具,比如可实现关闭、最大化、最小化等等,可供选择的type有如下多种:

tools可用的type类型

图2:tools可用的type类型

代码中配置了tbar,使得按钮显示在面板头部的下方,面板体的上方,如果此时再添加一个bbar,那么显示的会是在buttons的下方,如下图3所示:

添加bbar

图3:添加bbar

以下又是一个panel的例子,介绍了一点点高级的应用:

Ext.onReady(function() {
  Ext.create('Ext.panel.Panel', {
  title : '面板头部',
  width : 400,
  height : 300,
  frame : true, // 渲染一下
  renderTo : Ext.getBody(),
  bodyPadding : 30,
  bodyStyle : 'background-color:#FFC;font-size:16px',
  defaults : {
    width : 100,
    height : 100
  },
  layout : {
    type : 'hbox'
  },
  items : [{
    xtype : 'panel',
    title : '内部panel01'
    }, {
    xtype : 'panel',
    title : '内部panel02'
    }, {
    xtype : 'panel',
    title : '内部panel03',
    // 使用loader访问远程数据(指的是本文件以外的文件,比如在1.jsp中访问2.jsp),如果远程数据不是同一个域(比如访问百度),那么会报错,由于AJAX本身的限制,这里就需要做特殊处理。如果是访问同一个文件中的数据,那么直接使用contentEI即可,配置后面的值是数据源的id
    loader : {
    url : 'test1.html',
    autoLoad : true
    }
    }],
  tbar : [{
    xtype : 'button',
    text : '头部按钮1'
    }, {
    xtype : 'button',
    text : '头部按钮2'
    }],
  bbar : [{
    xtype : 'button',
    text : '按钮22'
    }],
  tools : [{
    type : 'minimize'
    }, {
    type : 'maximize'

    }, {
    type : 'close',
    handler : function() {
    Ext.Msg.alert('提示', '点击了关闭');
    }
    }],
  buttons : [{
    text : '底部按钮1'
    }, {
    text : '底部按钮2'
    }]
    });
  });

效果如下图4所示:

效果图

图4:效果图

本文是以ExtJS4版本为例,有关panel的其他应用,可参考官方文档。

本文标题:ExtJS学习之Ext.panel.Panel

本文链接:http://yedward.net/?id=278

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章