extjs4.2 - キャッチされていない TypeError: 未定義のメソッド 'querySelector' を呼び出せません

Question

こんにちは、Extjs 4 でアプリケーションを構築しています。モデル、ストア、および gridPanel 変数を作成し、グリッド パネル変数を EXT.panel に入れています。

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/grid/binding.html

ボタンをクリックするとパネルが表示される

「キャッチされていない TypeError: 未定義のメソッド 'querySelector' を呼び出せません」とページが機能しなくなります:

コードは次のとおりです。

 <code>
 // Model+store+grid

  Ext.define('mschedule', {
extend: 'Ext.data.Model',
fields:      ['id','name','country','state_id','zone_id','county_id','animal_type_id','animal_id','hunti   ng_too       l_id','start_date','end_date','hname','animal_name','state','zone','notes','county']
});

  var scheduleStore = Ext.create('Ext.data.Store', {
    extend: 'Ext.data.Store',
    autoLoad: true,
    autoSync: true,
     model: 'mschedule',
    proxy: {
        type: 'ajax',
            api: {
create: 'php_form/schedule.php',
read: 'php_form/schedule.php',
update:'php_form/schedule.php',
destroy: 'php_form/schedule.php?delete',
  }

 } 
    });


var scGrid= Ext.create('Ext.grid.Panel', {

    emptyText: 'No Record to Display',
    viewConfig: { 
        deferEmptyText: false
    },

    anchor: '100% 75%' ,
    frame: true,
    title: 'Game schedule |  Today Date : '+Ext.Date.format( new Date(),'Y/m/d'),
    store: scheduleStore,
    iconCls: 'icon-user',
    columns: [

    {
        text: 'Game ID',
        sortable: true,
        dataIndex: 'id',
        renderer: function(value){
            return value
        }
    }, {
        text: 'Game Details:',
        flex: 1,
        sortable: true,
        dataIndex: 'name',
        field: {
            xtype: 'textfield'
        },
        renderer: function(v, cellValues, rec){
            return 'Game name: '+rec.get('name') + '<br><br> Animal: '   + rec.get('animal_name');
        }   
        }
    , {
        text: 'Dates:',
        flex: 1,
        sortable: true,
        dataIndex: 'start_date',
        field: {
            xtype: 'textfield'
        }
        ,
        renderer: function(v, cellValues, rec){
            return 'Start Date: '+rec.get('start_date') + '<br> <br>End   date:' + rec.get('end_date');
        } 

    },  {
        text: 'Hunting Tools ',
        flex: 1,
        sortable: true,
        dataIndex: 'hname',
        field: {
            xtype: 'textfield'
        }
    },{
        text: 'Location: ',
        flex: 1,
        sortable: true,
        dataIndex: 'state',
        field: {
            xtype: 'textfield'
        },
         renderer: function(v, cellValues, rec){
             return 'Country: US <br>State: '+rec.get('state') + '<br>     Zone: ' + rec.get('zone')+ '<br> County: ' + rec.get('county');
        } 

    },{
        text: 'Notes',
        flex: 1,
        sortable: true,
        dataIndex: 'notes',
        field: {
            xtype: 'textfield'
        }
    }
    ]    

});


var scheduleTplMarkup = [
    'Game Name: <a href="" target="_blank">{name}</a><br/>',
    'Animal Name: {animal_name}<br/>',
    'Start Date : {start_date}<br/>',
    'End Date : {end_date}<br/>',
    'State: {state}<br/>',
    'Zone : {zone}<br/>',
    'Notes : {zone}<br/>',
    'county: {zone}<br/><br/><br/>'
];
var scheduleTpl = Ext.create('Ext.Template', scheduleTplMarkup);



// update panel body on selection change
scGrid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {

    if (selectedRecord.length) {
        var detailPanel = Ext.getCmp('detailPanel');
        detailPanel.update(scheduleTpl.apply(selectedRecord[0].data));
    }
});
///detail panel///
Ext.define('mscheduleDetail', {
extend:'Ext.Panel', 
alias:'widget.mscheduleDetail',
id:'mscheduleDetail',
     frame: true,
    title: 'Game List Detail',
    anchor:'100% 100%',
     width: 580,
    height: 400,
  layout: 'anchor',
    items: [scGrid , {
            id: 'detailPanel',
            region: 'center',
            bodyPadding: 7,
            bodyStyle: "background: #ffffff;",
            html: 'Please select a game to see additional details.'
    }]
});

// 以下では、上記のウィジェット「mscheduleDetail」を使用しています

                      {
           region:'west',
           id:'westdiv',
           maxWidth:120,
           margin: '0 5 5 5',
           layout:'anchor',
           minWidth:100,

           defaults: {align:'stretch',anchor: '100%'},


        items:[{
              xtype:'button',
              text:'schedule page',
              margin:'15 2 2 2',
              handler:function(){

                   Ext.getCmp('center').removeAll();
               Ext.getCmp('center').add({xtype:'mscheduleDetail'} );
                   Ext.getCmp('center').doLayout();
                   scheduleStore.load();


              }
             },{
              xtype:'button',
              text:'Profile?',
              margin:'15 2 2 2',
              handler:function(){

                   Ext.getCmp('center').removeAll();
                   Ext.getCmp('center').doLayout();
                   Ext.getCmp('center').add(
                   {xtype:'UserProfile'}  // ,                           {xtype:'scheduleveiw'}
                   );
                   Ext.getCmp('center').doLayout();
                  // scheduleStore.load();
                  // Ext.getCmp('UserProfile').getView().refresh();
                  //this.callParent(arguments);

              }
             }
          ]



          }