在做eclipse插件时经常会用的属性列表,也没有做好记录,现在都不知道是怎么做的了,只是觉得当时做起来十分麻烦,因为要跟编辑器中的对象对应。
在用Ext做前一个项目时从来没有用到过Property Grid,看了Ext所给的Property Grid示例感觉非常简单,所以在这里说说。
上图和代码:
- /*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
- Ext.onReady(function(){
- var propsGrid = new Ext.grid.PropertyGrid({
- renderTo: 'prop-grid',
- width: 300,
- autoHeight: true,
- propertyNames: {
- tested: 'QA',
- borderWidth: 'Border Width'
- },
- source: {
- '(name)': 'Properties Grid',
- grouping: false,
- autoFitColumns: true,
- productionQuality: false,
- created: new Date(Date.parse('10/15/2006')),
- tested: false,
- version: 0.01,
- borderWidth: 1
- },
- viewConfig : {
- forceFit: true,
- scrollOffset: 2 // the grid will never have scrollbars
- }
- });
- // simulate updating the grid data via a button click
- new Ext.Button({
- renderTo: 'button-container',
- text: 'Update source',
- handler: function(){
- propsGrid.setSource({
- '(name)': 'Property Grid',
- grouping: false,
- autoFitColumns: true,
- productionQuality: true,
- created: new Date(),
- tested: false,
- version: 0.8,
- borderWidth: 2
- });
- }
- });
- });
代码十分简短
主要是这一部分
- source: {
- '(name)': 'Properties Grid',
- grouping: false,
- autoFitColumns: true,
- productionQuality: false,
- created: new Date(Date.parse('10/15/2006')),
- tested: false,
- version: 0.01,
- borderWidth: 1
- },
- propertyNames: {
- tested: 'QA',
- borderWidth: 'Border Width'
- },
- viewConfig : {
- forceFit: true,
- scrollOffset: 2 // the grid will never have scrollbars
- }
这个例子用到的是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,其他的没啥可说的了,打完收工。