解决extjs grid 不随窗口大小自适应的问题

时间:2023-03-08 22:16:52

解决extjs grid 不随窗口大小自适应的问题

最近遇到的问题,在使用grid的时候窗口改变了但是grid却不能自适应的改变于是加了一条这行语句 问题就解决了,效果图 解决extjs grid 不随窗口大小自适应的问题  拖大后的效果

解决extjs grid 不随窗口大小自适应的问题

添加的语句:

Ext.EventManager.onWindowResize(function(){      grid1.getView().refresh()  })

参看完整代码;

<html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">      <title>grid</title>      <link href="../ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

<script src="../ext/adapter/ext/ext-base.js" type="text/javascript"></script>

<script src="../ext/ext-all.js" type="text/javascript"></script>

<script type="text/javascript">

Ext.onReady(function() {   function renderAdmin()  {  return " <span style='cursor:pointer;' onclick='alert();'><img src='../IMAGES/icons/email.jpg'/> </a></span>";  }       var sm= new Ext.grid.CheckboxSelectionModel();      // var sm1= new Ext.grid.RowSelectionModel({singleSelect:true}),       var cm=new Ext.grid.ColumnModel([       new Ext.grid.RowNumberer(),       sm,    // sm1,       {header:'<span style="cursor:pointer;"><img src="../IMAGES/icons/email.jpg"/> </a></span>',dataIndex:'admin',width:30,renderer:renderAdmin,sortable:false},       {header:'ID',dataIndex:'id'},       {id:'name',header:'名称',dataIndex:'name'},       {header:'发送人',dataIndex:'from'},       {header:'收件人',dataIndex:'to'}       ]);       var data=[           ['','001','收件单一','张三','李四'],           ['','002','收件单二','张四','李五'],           ['','003','收件单三','张六','李七']       ];       var store= new Ext.data.Store({       proxy:new Ext.data.MemoryProxy(data),       reader:new Ext.data.ArrayReader({},[           {name:'admin'},       {name:'id'},       {name:'name'} ,       {name:'from'},       {name:'to'}           ])         });       store.load();           var grid1= new Ext.grid.GridPanel({       renderTo:'grid1',       name:'grid1',       layout:'fit' ,       title:'收件单',           autoHeight:true,       autoWidth:true,       bodyStyle:'width:100%',       loadMask :true,       //autoExpandColumn:'name',       autoWidth:true,  //     tbar:[{text:'发送',  //          icon: '../Images/icons/application_edit.jpg',  //          cls: 'x-btn-text-icon'},  //          {text:'删除',  //          icon: '../Images/icons/application_edit.jpg',  //          cls: 'x-btn-text-icon'}],       store:store,       frame:true,       cm:cm,       sm:sm,       viewConfig:{            forceFit:true},       listeners : {                                          rowdblclick : function(n) {                                                 //获取当前选中行, 输向                                                // debugger;                                                                                   var iid= grid.getSelectionModel().getSelected().data.id    ;                                                   window.location.href="SubFrame.html?id="+iid;                                                  }                                              }       });              Ext.EventManager.onWindowResize(function(){          grid1.getView().refresh()      })  });      </script>

</head>  <body>      <div id="grid1" style="width: 100%; height: 100%;">      </div>  </body>  </html>

ps: 最后几天一直在搞界面的问题,所以遇到的问题比较多,为防止以后遇到相同的问题,所以都记录在博客中