由實例出發看看Ext——《Property Grid》

在做eclipse插件時經常會用的屬性列表，也沒有做好記錄，現在都不知道是怎麼做的了，只是覺得當時做起來十分麻煩，因爲要跟編輯器中的對象對應。
在用Ext做前一個項目時從來沒有用到過Property Grid，看了Ext所給的Property Grid示例感覺非常簡單，所以在這裏說說。

上圖和代碼：

/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * [email protected]
 * 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，其他的沒啥可說的了，打完收工。