ExtJS4.2學習(九)屬性表格控件PropertyGrid

PropertyGrid是在上節咱們說的Editor的基礎上開發的更靈活的高級表格組件，下面咱們來看下它的功能和應用方式：

屬性表格擴展自EditGrid，因此能夠直接編輯右邊的內容。注意，只有右邊的，即便你單擊左邊的單元格，編輯器也只會出如今右邊。
實際上，咱們能夠用散列表來形容PropertyGrid，左邊能夠看作key，右邊的是value。key是由咱們指定好的，用戶只須要修改對應的value便可。對於某些屬性而言，配置很方便。呵呵，是否是很像map。對了，下面的數據，你也能夠用Java的HashMap或有鍵值對的組合來傳遞，經過Ext.ajax來實現。代碼方面，由於只有兩列，因此咱們不用擔憂columns，store的部分肯定是key和value的組合，所以也不用再分幾步準備。下面用代碼建立一個瞧瞧：

var grid = new Ext.grid.PropertyGrid({ 
        title:'屬性表格', //表格標題 
        autoHeight:true, //有了它就不須要咱們爲div指定style 
        width:300, 
        renderTo:'grid', 
        viewConfig:{ 
            forceFit:true 
        }, 
        source:{ //json數據裏指定了一組key和value 
            "名字":"束洋洋", 
            "建立時間":new Date(Date.parse('2013/11/15')), 
            "是否有效":false, 
            "版本號":.01, 
            "描述":"ExtJs4.2學習之路" 
        } 
    });

你們看了確定會明白，某些表單的功能也能夠用PropertyGrid來實現，是否是方便多了，看起來互動性更強了？
雖然PropertyGrid默認是提供編輯功能的，可是在某些狀況下，也但願它只用來顯示數據，這時就須要禁用PropertyGrid中的編輯功能。PropertyGrid中並無直接提供能夠開關編輯功能的參數，但咱們能夠經過Ext的事件監 聽 器實現這一功能，具體代碼以下：

//只能看不能動，經過如下方式實現 
    grid.on("beforeedit",function(e){ 
        e.cancel = true; 
        return false; 
    });

如今表格就只能看不能編輯了。
連載中，請你們持續關注，本文出自個人我的網站思考者日記網