Search code examples
listcontrollersencha-touch-2

controller control sencha touch 2 doesnt work


My controller seems that it doesnt work : Controller:

 Ext.define('MyApp2.controller.Details',{
extend : 'Ext.app.Controller',

config: {
    refs:{
         NewsContainer: 'NewsContainer'

    },
    control:{
        'NewsContainer home list':{
            itemtap: function(){
                console.log("item");
            }
        }

    }

}


});

Home :

 Ext.define('MyApp2.view.Home', {
extend: 'Ext.Panel',
xtype: 'home',
requires: [
    'Ext.tab.Panel',
    'Ext.dataview.List',
    'MyApp2.view.NewsContainer'

],
config: {
    title: 'Home',
    IconCls:'home',
    styleHtmlCls:'details',
    styleHtmlcontent:'true',
    scrollable:true,
    layout:'fit',
    items: [
        {
                    xtype: "list",
                    store: "NewsStore",
                    itemTpl: new Ext.XTemplate (
                                                    '<div>',
                                                    '<img src="{enclosure}" />',
                                                    '<h1>{title}</h1>',
                                                    '</div>'
                                                ),
                   itemCls:'news-entries'                                 

                  }
             ]
}
 });

NewsContainer:

 Ext.define('MyApp2.view.NewsContainer', {
extend: 'Ext.NavigationView',
xtype: 'NewsContainer',

config: {
    autoDestroy: false,
            title: 'Home',
            IconCls:'Home',

        items: [
            {
                xtype:'home' 
            }
        ]
}
 });

and here is my app.js:

 Ext.application({
name: 'MyApp2',

requires: [
    'Ext.MessageBox'

],
controller:['Details'],
models:['MyApp2.model.News'],

views: [
    'Main','Home','News','NewsContainer','Details'
],

stores:['NewsStore'],

icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
},

isIconPrecomposed: true,

startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
},

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('MyApp2.view.Main'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}
  });

Can u tell me please what's wrong with my code ?there is no error in the console , nothing's happened when i tap :(


Solution

  • The problem is, that the controller doesn't find the reference to the list. There is no error message, because the itemtap event from the list is not catched.

    I think this controller code is going to work:

    Ext.define('MyApp2.controller.Details',{
      extend : 'Ext.app.Controller',
      config: {
          refs:{
             homeList: 'home list'
          },
          control:{
             homeList : {
                itemtap : function(list, index, item, record) {
                    console.log("item");
                }
             }
          }
      }
    });