Extjs4.1 Ext.gridで作成したpropertyGridの内容を動的に更新する。

I. PropertyGridの定義

 this.propertyGrid = Ext.create('Ext.grid.PropertyGrid', {) <未定義



                    title: '現在の車両の状態',



                    id: 'propGrid',



                    のソースになります。{ <未定義



                        ナンバープレート: EA.N1002。



                        走行速度：80.0,



                        進行方向：東から北へ。



                        場所：深圳市南山区科学技術園南側白石路。



                        "場所時間"。Ext.Date.parse('10/15/2006', 'm/d/Y')。



                        "報告された時間"。Ext.Date.parse('10/15/2006','m/d/Y')です。



                    }



                });

II. ページ内の指定された場所に配置する

    var viewport = Ext.create('Ext.Viewport', {) <未定義



        id: 'border-example',



        レイアウトを使用します。'ボーダー',



        の項目があります。[{ <未定義



            region: 'north',



            height: 32,



            items:ツールバー



        }, { <未定義



            region: 'south',



            split: true。



            height: 100,



            minSize: 100,



            maxSize: 200,



            折りたたみ可能：true。



            collapsed: true。



            title: 'ログ出力',



            マージン: '0 0 0 0',



            の項目があります。[loggridpanel] です。



        }, { <未定義



            xtype: 'tabpanel' です。



            region: '東',



            タイトル：「運転状況



            animCollapse: true。



            折りたたみ可能：true。



            split: true。



            幅：225



            minSize: 175,



            maxSize：400。



            margins: '0 5 0 0',



            activeTab: 1,



            tabPosition: 'bottom',



            の項目があります。[panel.propertyGrid]です。



        }, { <未定義



            region: 'west',



            stateId: 'navigation-panel'です。



            id: 'west-panel',



            title: '車両リスト',



            split: true。



            width: 200,



            minWidth: 175,



            maxWidth: 400,



            折りたたみ可能：true。



            animCollapse: true。



            margins: '0 0 0 5',



            レイアウトを使用します。'アコーディオン',



            の項目があります。[ツリー/*, { <未定義



                title: '地域計画',



                htmlを使用します。'<p>Some settings in here.</p>'。



                iconCls: '設定'



            }, { <未定義



                title: 'オンラインリスティング',



                htmlを使用します。'<p>Some info in here.</p>'。



                iconCls: 'info'



            }*/]



        },



        Ext.create('Ext.tab.Panel', {) <未定義



            region: 'center',



            deferredRender: false。



            activeTab: 0,



            の項目があります。[グリッドパネル]



        })]



    });

III. 動的な更新

var gridPanel = Ext.create('Ext.grid.Panel', {) <未定義



    store: getLocalStore()。



    の列があります。[



        {text: "license plate number", dataIndex: 'number_plate',locked:true,width:100}となります。



        {text: "car_plate_number", dataIndex: 'call_letter',width:100}となります。



        {text: "speed"、dataIndex: 'speed',width:50}となります。



        {text: "方向",dataIndex: 'cncourse',width:50}です。



        {text: "オリエンテーションの時間", dataIndex: 'gpstime',width:110}です。 



        {text: "報告された時間", dataIndex: 'stamp',width:110}です。



        {text: "referenceposition", dataIndex: 'referenceposition',width:600}となります。



    ],



    折りたたみ可能：true。



    animCollapse: falseです。



    title: '車両表示領域',



    iconCls: 'icon-grid'です。



    リスナー : { <未定義



  itemdblclick : function(view, record, item, index, e, eOpts) { （ビュー、レコード、アイテム、インデックス、e、eOpts）。 <未定義



   var unitid=record.get('call_letter')。



   //alert('unitid:'+unitid)を実行します。



   //propertyGrid.setSource(record.data)を実行します。



  // プロパティグリッドコンポーネントを取得する



            var propGrid = Ext.getCmp('propGrid');



            // プロップグリッドが存在することを確認する



            if (propGrid) { <未定義



                // プロパティグリッドのストアデータを取得する



                //propGrid.setSource(record.data);//This line is working, please don't delete it



             var data={ <未定義



                        ナンバープレート番号": record.get('number_plate')。



                        "プラットフォーム番号": record.get('call_letter')。



                        "移動速度": record.get('速度')。



                        "進行方向":record.get('cncourse')。



                        "位置": record.get('referenceposition')。



                        "位置時間": record.get('gpstime')。



                        "報告された時間": record.get('stamp')。



                    };



                propGrid.setSource(data)を実行します。



            }



  }



    }



});