Sencha Blog: Cannot read property getCount of undefined

dimanche 28 décembre 2014

Cannot read property 'getCount' of undefined

i'm receiving this error when trying to display a Panel with one list.

Cannot read property 'getCount' of undefined

The app is failing at this line in sencha-touch-debug.js (v1.0.1):

Code:


var layoutCollection = this.layoutOnShow,
            ln = layoutCollection.getCount(),

Here are my source files.

/dl1.html:

Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <link href="touch1/resources/css/sencha-touch-debug.css" rel="stylesheet" type="text/css" />
        <script src="touch1/sencha-touch-debug.js" type="text/javascript"></script>
        <script type="text/javascript" src="app/model/UserProfile.js"></script>
        <script type="text/javascript" src="app/model/Result.js"></script>
        <script type="text/javascript" src="app/model/Device.js"></script>


        <script type="text/javascript" src="app/DataStores.js"></script>
        <script type="text/javascript" src="app/Controller.js"></script>
        <script type="text/javascript" src="app/Service.js"></script>

        <script type="text/javascript" src="app/UserProfilePage.js"></script>

        <script type="text/javascript" src="app/Viewport.js"></script>
        <script type="text/javascript" src="app/app1.js"></script>

        <script type="text/javascript">
try {
            startApp();
} catch(e) {
  console.log(e.message);
  console.log(e.linenumber);
}
        </script>
    </head>

    <body></body>
</html>

app/app1.js :

Code:


function startApp() {
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {

            gUserID='';
            gTokenUser='';
            gDeviceId='FADECED';

            mobile.views.Viewport = new mobile.views.Viewport();

            var result = Ext.ModelMgr.create(
                { Action: 'loadUserProfile' },
                'mobile.models.Result'
            );
            result.set('ErrorContainer','errorSection');
            result.set('ErrorComponent','errorText');

            Ext.dispatch({
                controller: mobile.controllers.Controller,
                action: result.get('Action'),
                animation: {type:'slide', direction:'left'},
                model:result
            });
        }
    });
}

app/UserProfilePage.js:

Code:


Ext.ns("mobile.views");

var devicesTpl = new Ext.XTemplate(
  '<tpl for=".">',
  '<div class="deviceInfo">',
'{OS} {OSVersion} {Model} {DeviceName} {DeviceId}',
   '</div>',
  '</tpl>'
);

var deviceList = new Ext.List({
    id: 'deviceList'
    ,tpl: '<tpl for="."><div class="deviceInfo">{OS} {OSVersion} {Model} {DeviceName} {DeviceId}</div></tpl>',
    itemTpl: '{OS} {OSVersion} {Model} {DeviceName} {DeviceId}',
    store: new Ext.data.Store({
      model:'mobile.models.Device',
      autoLoad: true,
      proxy: {
         type: 'ajax',
         url: 'app/DevicesData.json',
         reader: {
            type: 'json',
            root: 'Devices'
         }
      }
   }),
   itemSelector:'div.deviceInfo',
   scroll:true
});

mobile.views.UserProfilePage = Ext.extend(Ext.Panel,{
    id:'userProfilePanel',
    items:[ deviceList ]
});

Ext.reg('mobile.views.UserProfilePage',mobile.views.UserProfilePage);

app/DevicesData.json:

Code:


{
  "Devices":[
    {
      "OS":"iPhone OS",
      "OSVersion":"8.1",
      "Model":"iPhone Simulator",
      "DeviceName":"abcdef1234",
      "DeviceId":"abcdef1234"
    },
    {
      "OS":"iPhone OS",
      "OSVersion":"8.1",
      "Model":"iPhone Simulator",
      "DeviceName":"abcdef2345",
      "DeviceId":"abcdef2345"
    }
  ]
}

any help is appreciated. Thank you,

Cannot read property 'getCount' of undefined