Ext.grid.propertyGridの表示順に関するメモ

ExtJSという日本だとあまりメジャーじゃないJavaScriptライブラリを現在使っております。jQueryに比べてユーザーが少なくて、正直なところ結構辛い･･･。

Ext.grid.PropertyGridの表示順で嵌ったのでメモを残しておきます。使っているバージョンはExtJS3.4です。ExtJS4ではありませんのでご了承ください。

Ext.grid.property.Grid Example | Sencha Try

Java側で生成したJSONデータをExt.grid.PropertyGridでそのままの順番で表示したかったのですが、思い通りにデータを表示できませんでした。Stack Overflow, Sencha Forumで調べたところ、自動的にsortがかかってしまっているのが原因だということが分かりました。
propertygrid - Disable auto sorting on property grid in ExtJS - Stack Overflow
Ext JS 3.4.0 - Sencha Docs

Ext.data.JsonStoreクラスにJSONデータを格納する時、sortInfoというプロパティがオブジェクトに自動的に付与されているので、Ext.grid.PropertyGridのsourceプロパティで記述した順番というのは全く関係ないようです。

解決策としては、

• Ext.grid.PropertyGridを継承してソート情報をクリア、その後setSourceでデータの詰め込む順番を指定してあげる

サンプルを以下に記載しておきます。

var hoge = Ext.extend.(Ext.grid.PropertyGrid,{
    initComponent: function(){
        var me= this;
        hoge.superclass.initComponent.call(me);
        delete me.propStore.store.sortInfo;
        return me;
    },
    setSource: function(source){
        var me = this,
            _source = {};
        if(me.propertyNames){
            Ext.iterate(me.propertyNames, function(propertyName){
                source.hasOwnProperty(propertyName) && (_source[propertyName] = source[propertyName]);
            }, me);
        } else {
            _source = source;
        }
        hoge.superclass.setSource.call(me, _source);
    }
});