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

最新推荐文章于 2020-11-28 14:10:14 发布

SucreLiu04

最新推荐文章于 2020-11-28 14:10:14 发布

阅读量3.3k

点赞数

分类专栏： ExtJS 文章标签： extjs html javascript

ExtJS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近遇到的问题，在使用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;' οnclick='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>

SucreLiu04

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决extjs grid 不随窗口大小自适应的问题

最近遇到的问题，在使用grid的时候窗口改变了但是grid却不能自适应的改变于是加了一条这行语句问题就解决了，效果图拖大后的效果添加的语句：Ext.EventManager.onWindowResize(function(){ grid1.getView().refresh() })参看完整代码； grid
复制链接

扫一扫

专栏目录