Benney Blog

			Ext.isiPad = navigator.userAgent.match(/iPad/i) != null;
			Ext.isiPhone = navigator.userAgent.match(/iPhone/i) != null;
			//TODO: Add support for more devices like Android etc. here.
			Ext.isMobileDevice = Ext.isiPad || Ext.isiPhone;

			///////////////////////////////////////////////////////////
			//iScroll Overrides
			Ext.override(Ext.Panel, {
				afterRender: Ext.Panel.prototype.afterRender.createSequence(function() {
					if (this.getXType() == 'panel') {
						this._getIScrollElement = function() {
							return (this.el.child('.x-panel-body', true));
						}
					}

					//Uncomment below to use iScroll only on mobile devices but use regular scrolling on PCs.
					if (this.autoScroll /*&& Ext.isMobileDevice*/) {
						if (this._getIScrollElement) {
							this._updateIScroll();
							this.on('afterlayout', this._updateIScroll);
						}
					}
				}),

				_ensureIScroll: function() {
					if (!this.iScroll) {
						var el = this._getIScrollElement();
						if (el.children.length > 0) {
							this.iScroll = new iScroll(el);
							this.iScrollTask = new Ext.util.DelayedTask(this._refreshIScroll, this);
						}
					}
				},

				_updateIScroll: function() {
					this._ensureIScroll();
					if (this.iScroll) {
						this.iScrollTask.delay(1000);
					}
				},

				_refreshIScroll: function() {
					this.iScroll.refresh();
					//Refresh one more time.
					this.iScrollTask.delay(1000);
				}
			});

			Ext.override(Ext.tree.TreePanel, {
				_getIScrollElement: function() {
					return (this.el.child('.x-panel-body', true));
				}
			});

			Ext.override(Ext.grid.GridPanel, {
				_getIScrollElement: function() {  // 아래 부분이 Extjs에서 그리드위에 생성되는 스크롤이다. 
					return (this.el.child('.x-grid3-scroller', true)); // 이부분이 스크롤 된다.
				},

				afterRender: Ext.grid.GridPanel.prototype.afterRender.createSequence(function() {
					//TODO: need to hook into more events and to update iScroll.
					this.view.on('refresh', this._updateIScroll, this);
				})
			});

    createGridPanel: function(){
        this.gridPanel = Ext.create('widget.EmStock.gridPanel', {
            region: 'center',
            store : this.store,
            pageSessionId : this.pageSessionId,
            floatable: false,
            defaults:{ autoScroll:Ext.isiPad || Ext.isiPhone },  // 이 부분이 꼭 필요하다. 패드나 폰일 경우 true를 리턴한다. 갤탭일 경우 그냥 true
            padding: '10 0 0 0',
            totalCount : this.totalCount, 
            split: 	true,
            listeners: {
                scope: this,
                ongridselect: this.onGridSelect,
                columnhide : this.onColumnHide,
                refreshgrid : this.refreshGrid
            }
        });
        
        return this.gridPanel;
    },

// Create a record instance through the ModelManager
                var r = Ext.ModelManager.create({
                    name: 'New Guy',
                    email: 'new@sencha-test.com',
                    start: new Date(),
                    salary: 50000,
                    active: true
                }, 'Employee');

                store.insert(0, r);

Ext.require([
		'Ext.button.Button',
		'Ext.grid.property.Grid'
	]);
	
	Ext.onReady(function(){
		// simulate updating the grid data via a button click
		
		var Unit = Ext.create('Ext.data.Store', {
			fields: ['abbr', 'name'],
				data : [
					{"abbr":"AUstralian", "name":"AUD"},
					{"abbr":"Canadian", "name":"CND"},
					{"abbr":"Europe", "name":"EUR"},
					{"abbr":"british", "name":"GBP"},
					{"abbr":"indian", "name":"INR"},
					{"abbr":"united", "name":"USD"}
				]
			});
		
		var Scale = Ext.create('Ext.data.Store', {
			fields: ['abbr', 'name'],
				data : [
				{"abbr":"AUstralian", "name":"actual"},
				{"abbr":"Canadian", "name":"crore"},
				{"abbr":"Europe", "name":"hundred"},
				{"abbr":"british", "name":"lakh"},
				{"abbr":"indian", "name":"million"},
				{"abbr":"united", "name":"thousand"}
				]
			});
		
		var propsGrid = Ext.create('Ext.grid.property.Grid', {
			width: 300,
			renderTo: 'smpl',
			customEditors: {
				Unit: Ext.create('Ext.form.ComboBox', {                       
					store: Unit,
					queryMode: 'local',
					displayField: 'name',
					valueField: 'abbr',
					editable: false
				}),
				Scale: Ext.create('Ext.form.ComboBox', {                                         
					store: Scale,
					queryMode: 'local',
					displayField: 'name',
					valueField: 'abbr',
					editable: false
				})
			},
			source: {
				"Name": "Properties Grid",
				"(ID)": 'id',
				"Type": true,
				"SubGroup": false,
				"PeriodType": Ext.Date.parse('10/15/2006', 'm/d/Y'),
				"Balance": false,
				"abstract": 0.01,
				"Nullable": 1,
				"Unit": 'USD',
				"Scale":'actual'
			}
		});
	});

Don't specify a model property - it seems that it would override the fields property.

I also wanted to change the columns and content of an existing grid dynamically:

// reconfigure the grid to use the new store and other columns 

var newColumns = [ 

  {header: 'Totally', dataIndex: 'totally'}, 

  {header: 'Dynamic', dataIndex: 'dynamic'} 

]; 

myGrid.reconfigure(newStore, newColumns); 

/** JSON.decode의 버젼별 코드 
*/
// ExtJS 3
obj = Ext.util.JSON.decode(action.response.responseText);

// ExtJS 4
obj = Ext.JSON.decode(action.response.responseText);