EXT gridPannel自适应宽度的实现

在Ext初始化的时候读取div的宽度,

var content_width = parseInt(Ext.get("content_div").getComputedWidth());

var grid = new Ext.grid.EditorGridPanel({
       el     : 'gridDiv',
       width    : $("gridDiv").style.width,
       height    : 550,
       title    : '客户管理',
       store    : store,
       cm     : cm,
       sm     : sm,
       trackMouseOver : false,
       loadMask   : {
        msg : '载入中,请稍候...'
       };

这样就实现了grid的自适应，但这种只局限于在第一次打开时的宽度，如果用鼠标改变浏览器的窗口大于，则原来的grid的宽度还是不变的，这时候我们就要加一个window事件window.onresize,实现如下: window.onresize = function() {
     grid.setWidth(0);
     grid.setWidth(parseInt(Ext.get("content_div").getComputedWidth()));
     content_width = parseInt(Ext.get("content_div").getComputedWidth());
    };

这样就可以让grid适应不同的窗口变化了。

但是这只实现了Grid的自适应，但对grid里面的Column则不起作用，所以我们在声明column的时候就要设置自适应属性：

var cm = new Ext.grid.ColumnModel([
      new Ext.grid.RowNumberer(),// 自动行号
      sm,// 添加的地方
      {
       header   : "客户简称",
       width   : content_width * 0.18,
       dataIndex : 'CUST_NAME',
       id    : 'custNameCmId',
       sortable : true
      }

]);

这样就给该列设置了总宽度18%的宽度值。与Grid适应窗口变化一样，

我们也要在window.onresize的事件中设置

cm.setColumnWidth(2,parseInt(content_width*0.18));//设置第3例值，第一列为数字列，第二列为复选框，不用调整.

这样就实现了整个Grid页面的自适应。