Extjs 解决grid 列未占满整个表格

刚开始学习Extjs，使用到了GridPanel，用的是4.0

结果出现的结果是如图

在右边始终是不能让表格列占满整个表格，想着设置成固定的width又不好，得要根据内容填充。

网上找到一个是Extjs3.0的例子，使用autoExpandColumn

[javascript]  view plain copy

1. 1.Ext.onReady(function(){    
2. 2.    var data = [    
3. 3.      [1,"EasyJWeb","EasyJF","www.easyjf.com"],    
4. 4.      [2,"Jfox","huihoo","www.huihoo.org"],    
5. 5.      [3,"jdon","jdon","www.jdon.com"],    
6. 6.      [4,"springside","springside","www.springside.org.cn"]    
7. 7.    ];    
8. 8.        
9. 9.    var store = new Ext.data.SimpleStore({    
10. 10.      data:data,    
11. 11.      fields:["id","name","organization","homepage"]    
12. 12.    });    
13. 13.        
14. 14.    var grid = new Ext.grid.GridPanel({    
15. 15.      renderTo:"hello",    
16. 16.      title:"中国java开源产品及团队",    
17. 17.      height:150,    
18. 18.      width:560,    
19. 19.      columns:[{header:"项目名称",dataIndex:"name"},    
20. 20.          {header:"开发团队",dataIndex:"organization"},    
21. 21.          {header:"网址",dataIndex:"homepage",renderer:showUrl}],    
22. 22.      store:store,    
23. 23.      //当使用ext2.2时，autoExpandColumn为0时没效果，为1时第2列扩展，为2时第3列扩展；    
24. 24.      //当使用ext3.0时，autoExpandColumn为0时没效果，为1时第1列扩展，为2时第2列扩展，为3时第3列扩展    
25. 25.      autoExpandColumn:3    
26. 26.    });    
27. 27.  });    
28. 28.  function showUrl(value){    
29. 29.    return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";    
30. 30.  }    

而Extjs4.0中使用的是flex，flex代表列宽占所有列的比例，自动填充

[javascript]  view plain copy

1. 1.Ext.onReady(function(){    
2. 2.    var data = [    
3. 3.      [1,"EasyJWeb","EasyJF","www.easyjf.com"],    
4. 4.      [2,"Jfox","huihoo","www.huihoo.org"],    
5. 5.      [3,"jdon","jdon","www.jdon.com"],    
6. 6.      [4,"springside","springside","www.springside.org.cn"]    
7. 7.    ];    
8. 8.        
9. 9.    var store = new Ext.data.SimpleStore({    
10. 10.      data:data,    
11. 11.      fields:["id","name","organization","homepage"]    
12. 12.    });    
13. 13.        
14. 14.    var grid = new Ext.grid.GridPanel({    
15. 15.      renderTo:"hello",    
16. 16.      title:"中国java开源产品及团队",    
17. 17.      height:150,    
18. 18.      width:560,    
19. 19.      columns:[{header:"项目名称",dataIndex:"name"},    
20. 20.          {header:"开发团队",dataIndex:"organization"},    
21. 21.          {header:"网址",dataIndex:"homepage",renderer:showUrl,flex:1}],   //使用flex自动填充列 
22. 22.      store:store  
23. 25.        
24. 26.    });    
25. 27.  });    
26. 28.  function showUrl(value){    
27. 29.    return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";    
28. 30.  }