由实例出发看看Ext——《Property Grid》

在做eclipse插件时经常会用的属性列表，也没有做好记录，现在都不知道是怎么做的了，只是觉得当时做起来十分麻烦，因为要跟编辑器中的对象对应。
在用Ext做前一个项目时从来没有用到过Property Grid，看了Ext所给的Property Grid示例感觉非常简单，所以在这里说说。

上图和代码：

Js代码  

1. /*! 
2.  * Ext JS Library 3.2.1 
3.  * Copyright(c) 2006-2010 Ext JS, Inc. 
4.  * licensing@extjs.com 
5.  * http://www.extjs.com/license 
6.  */  
7. Ext.onReady(function(){  
8.       
9.     var propsGrid = new Ext.grid.PropertyGrid({  
10.         renderTo: 'prop-grid',  
11.         width: 300,  
12.         autoHeight: true,  
13.         propertyNames: {  
14.             tested: 'QA',  
15.             borderWidth: 'Border Width'  
16.         },  
17.         source: {  
18.             '(name)': 'Properties Grid',  
19.             grouping: false,  
20.             autoFitColumns: true,  
21.             productionQuality: false,  
22.             created: new Date(Date.parse('10/15/2006')),  
23.             tested: false,  
24.             version: 0.01,  
25.             borderWidth: 1  
26.         },  
27.         viewConfig : {  
28.             forceFit: true,  
29.             scrollOffset: 2 // the grid will never have scrollbars  
30.         }  
31.     });  
32.   
33.     // simulate updating the grid data via a button click  
34.     new Ext.Button({  
35.         renderTo: 'button-container',  
36.         text: 'Update source',  
37.         handler: function(){  
38.             propsGrid.setSource({  
39.                 '(name)': 'Property Grid',  
40.                 grouping: false,  
41.                 autoFitColumns: true,  
42.                 productionQuality: true,  
43.                 created: new Date(),  
44.                 tested: false,  
45.                 version: 0.8,  
46.                 borderWidth: 2  
47.             });  
48.         }  
49.     });  
50. });  

代码十分简短

主要是这一部分

Js代码  

1. source: {  
2.     '(name)': 'Properties Grid',  
3.     grouping: false,  
4.     autoFitColumns: true,  
5.     productionQuality: false,  
6.     created: new Date(Date.parse('10/15/2006')),  
7.     tested: false,  
8.     version: 0.01,  
9.     borderWidth: 1  
10. },  
11.   
12.   
13. propertyNames: {  
14.     tested: 'QA',  
15.     borderWidth: 'Border Width'  
16. },  
17.   
18.   
19. viewConfig : {  
20.     forceFit: true,  
21.     scrollOffset: 2 // the grid will never have scrollbars  
22. }  

 

这个例子用到的是Ext.grid.PropertyGrid类，该类也是一个Grid不过他与之前说的GridPanel有所不同，他是专为显示属性列表设计的。
正如上面给出的三段代码，设置好source、propertyNames、viewConfig就可以显示了。

source，要求设置一个对象，实际上就是属性名称和值的对应。属性名称可以用“''”引起来，也可以不用，不过有特殊字符的就一定要引了。PropertyGrid可以根据设置的值类型自动选择修改值的控件；当然如果对他为你选择的控件不满意，你可以修改它，使用customEditors属性来设置某一个属性值的编辑控件，这个以后有机会可能会详细说明。

propertyNames，通过该属性设置属性名，这里是一个source中定义的名称与实际显示名称的对应。在例子中设置了tested和borderWidth，让他们在显示时不显示他们的原名，而是显示后面点以的名称。

viewConfig，显示配置。这里设置的两个属性是：forceFit，自动让Grid中的所有列按原有宽度比例重拍，占满整个Grid；scrollOffset设置滚动条占用的宽度。viewConfig接受的对象实际是Ext.grid.GridView类型的对象，具体还能设置哪些属性可以看该类的API。

 

例子中还有一个按钮，功能是重新设置PropertyGrid中的各个属性。

ok，其他的没啥可说的了，打完收工。