Extjs如何使用百分比设置高和宽

但最近发现使用 Extjs 进行窗口布局的时候发现有点不方便, 很难做到高度宽度自适应(根据浏览器大小的变化自动调整高度,宽度), 还有高度不能使用百分比只能用数字, 宽度虽然可以用百分比(anchor)但也只能用在字段中. Extjs 提供了另外的一个自适应的控件：Ext.Viewport , 使用这个控件可以将你的元素部署在 north, south, east, west, center 这五个地方来填充满你的整个页面, 其中你可以固定 north, south 的高度, east, west 的宽度, 其它的部分则可以根据浏览器的大小自动调整自己的大小, 但是有一个不方便的地方就是高度不能像我们 *** 作 table 一样 设置为百分比, 这样就有一个问题, 当用户显示器的分辨率为 1024*768 或者是 1280*1024 或者是其他的时候显示会很不一样, 经过不断尝试, 找到一种可行的解决方法 view plaincopy to clipboardprint? listeners: { 'resize': function( viewport, adjWidth, adjHeight, rawWidth, rawHeight ) { Ext.getCmp("southpanel").setHeight((document.body.clientHeight - 290) * 0.67)} } listeners: { 'resize': function( viewport, adjWidth, adjHeight, rawWidth, rawHeight ) { Ext.getCmp("southpanel").setHeight((document.body.clientHeight - 290) * 0.67)} }

浏览器改变大小会触发 viewport 的 resize 事件, 比如你将 north 的高度设置为 290, 那么你的 center 和 sorth 比例就为 33%, 67%,同理对于其他的控件也一样.

ExtJS做Ajax请求的时候，默认的相应时间是30秒，如果后来数据查询时间超过30秒，ExtJS就会报错。

这就需要修改ExtJS的超时时间：在js开始时后加

示例代码如下所示：

view sourceprint?

1.Ext.onReady(function() {

2.Ext.BLANK_IMAGE_URL = '../../common/ext3/resources/images/default/s.gif '

3.Ext.Ajax.timeout = 180000 //设置请求超时时间（单位毫秒）

4.})

EXTJS中border布局包含多个子面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是：east（东）、south（南）、west（西）、north（北）、center（中）。加入到容器中的子面板需要指定region配置下来告知容器要加入到那个部分。

1、实例演示：

Ext.onReady(function()

{

  Ext.create('Ext.panel.Panel',

      {

          title: '容器面板',

          renderTo: 'div1',

          width: 450,

          height: 300,

          layout: 'border',

          defaults:

              {

               split: true,                  //是否有分割线

                  collapsible: true,           //是否可以折叠

                  bodyStyle: 'padding:15px'

              },

          items: [

                  {  //子元素的方位：north、west、east、center、south   region: 'north',

                      title: '北',

                      xtype: "panel",

                      html: "子元素1",

                      height: 70

                  },

                  {

                      region: 'west',

                      title: '西',

                      xtype: "panel",

                      html: "子元素2",

                      width: 100

                  },

                  {

                      region: 'east',

                      title: '东',

                      xtype: "panel",

                      html: "子元素2",

                      width: 100

                  },

                  {

                      region: 'center',

                      title: '主体',

                      xtype: "panel",

                      html: "子元素3"

                  },

                  {

                      region: 'south',

                      title: '南',

                      xtype: "panel",

                      html: "子元素4",

                      height: 70

                  }

                 ]

      })

})

2、运行效果：

---