DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 解決extjs grid 不隨窗口大小自適應的改變問題
解決extjs grid 不隨窗口大小自適應的改變問題
編輯:JavaScript綜合知識     

 在使用grid的時候窗口改變了但是grid卻不能自適應,下面有個不粗的解決方法,大家可以參考下

最近遇到的問題,在使用grid的時候窗口改變了但是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>   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved