1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    4
    Vote Rating
    0
    dhaze is on a distinguished road

      0  

    Default Answered: OnItemTap List not firing - no MVC examples found. Help?

    Answered: OnItemTap List not firing - no MVC examples found. Help?


    Hi, I've been working on my first Sencha app as for a school project and have most of my functions behaving but I have an information list that I would like to have display an overlay panel with details when tapped that is being troublesome. Most of the bits of code I've found around the web use the old Sencha format. I've been able to get what I thought was a 'workable' formula but the list is not triggering. Can someone who knows what they are doing please take a look and help me figure out what I'm doing wrong?

    - Del

    View
    Code:
    Ext.define('TESTApp.view.InfoList', {
        extend: 'Ext.List',
        xtype: 'infolist',
        requires: ['TESTApp.store.Infos'],
        
        config: {
            title: 'Information',
            itemTpl: '{Department}',
            store: 'Infos',
            onItemDisclosure: true
        }
    });
    Store
    Code:
    Ext.define('TESTApp.store.Infos', {
        extend: 'Ext.data.Store',
        
        config: {
            model: 'TESTApp.model.Info',
            data: [
                { Department: "Biz",             Phone: "123",     Email: "biz@domain.com"},
                { Department: "Walk",     Phone: "123",     Email: "walk@domain.com"},
                { Department: "Lost",         Phone: "123",     Email: "lost@domain.com"},
                { Department: "Rol",             Phone: "123",     Email: "rol@domain.com"},
                { Department: "Records",             Phone: "123",     Email: "records@domain.com"}
            ]
        }
    });
    Model
    Code:
    Ext.define('TESTApp.model.Info', {
        extend: 'Ext.data.Model',
        
        config: {
            fields: ['Department', 'Phone', 'Email']
        }
    });
    Attempt at a Controller
    Code:
    Ext.define('TESTApp.controller.Info', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                info: 'infolist',
            }
        },
            
            listeners: {
                  info:function(data,index,item,e){
                    var Department =     data.getstore().getAt(index);
                    var Phone =         data.getstore().getAt(index);
                    var Email =         data.getstore().getAt(index);
                    this.overlay = new Ext.Panel({
                        modal:true,
                        centered:true,
                        floating:true,
                        width: 250,
                        height:250,
                        styleHtmlContent:true,
                        dockedItems:[{xtype:'toolbar', title:department}],
                        dock:'top',
                        html:'<div style="margin-bottom:10px;"><b>Phone: </b>' + phone + "</div><div><b>Email: </b><br/>" + email + "</div>"
                    });
    
    
                    this.overlay.show('pop')
               }
           }
    });
    Current infolist view attached
    Attached Images

  2. The issue is with your controller. Try the syntax below. The control section takes the reference that you set up in the refs section and binds the disclose event from the reference to a hander defined in the controller. Also, you don't need to build up an HTML string for the content. You can use the tpl config on any component to bind it to data.

    DetailView.js
    Code:
    Ext.define('TESTApp.view.DetailView', {
        extend: 'Ext.Panel',
        xtype: 'detailview',
        config: {
            modal: true,
            centered: true,
            floating: true,
            hideOnMaskTap: true,
            width: 250,
            height: 250,        
            layout: {
                type: 'fit'
            },
            items: [
                { 
                    xtype: 'toolbar',
                    docked: 'top'
                },
                {
                    xtype: 'panel',
                    type: 'detailPanel',
                    styleHtmlContent: true,
                    tpl: new Ext.XTemplate('<div style="margin-bottom:10px;"><b>Phone: </b>{Phone}</div><div><b>Email: </b><br/>{Email}</div>')
                }
            ]
        },
        applyData: function (record) {
            this.down('toolbar').setTitle(record.Department);
            
            this.down('panel[type="detailPanel"]').setData(record);
        }
    });
    InfoListController.js
    Code:
    Ext.define('TESTApp.controller.InfoListController', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                info: 'infolist'
            },
            control: {
                info: {
                    disclose: 'onItemDisclose'
                }
            }
        },
        
        onItemDisclose: function (list, record, target, index, e, eOptions) {
            var overlay = Ext.create('TESTApp.view.DetailView', {
                data: record.getData()
            });
    
    
            Ext.Viewport.add(overlay);
            overlay.show();
        }
    });

  3. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Vote Rating
    0
    Answers
    7
    dshookowsky is an unknown quantity at this point

      1  

    Default


    The issue is with your controller. Try the syntax below. The control section takes the reference that you set up in the refs section and binds the disclose event from the reference to a hander defined in the controller. Also, you don't need to build up an HTML string for the content. You can use the tpl config on any component to bind it to data.

    DetailView.js
    Code:
    Ext.define('TESTApp.view.DetailView', {
        extend: 'Ext.Panel',
        xtype: 'detailview',
        config: {
            modal: true,
            centered: true,
            floating: true,
            hideOnMaskTap: true,
            width: 250,
            height: 250,        
            layout: {
                type: 'fit'
            },
            items: [
                { 
                    xtype: 'toolbar',
                    docked: 'top'
                },
                {
                    xtype: 'panel',
                    type: 'detailPanel',
                    styleHtmlContent: true,
                    tpl: new Ext.XTemplate('<div style="margin-bottom:10px;"><b>Phone: </b>{Phone}</div><div><b>Email: </b><br/>{Email}</div>')
                }
            ]
        },
        applyData: function (record) {
            this.down('toolbar').setTitle(record.Department);
            
            this.down('panel[type="detailPanel"]').setData(record);
        }
    });
    InfoListController.js
    Code:
    Ext.define('TESTApp.controller.InfoListController', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                info: 'infolist'
            },
            control: {
                info: {
                    disclose: 'onItemDisclose'
                }
            }
        },
        
        onItemDisclose: function (list, record, target, index, e, eOptions) {
            var overlay = Ext.create('TESTApp.view.DetailView', {
                data: record.getData()
            });
    
    
            Ext.Viewport.add(overlay);
            overlay.show();
        }
    });
    Last edited by dshookowsky; 26 May 2013 at 7:44 AM. Reason: Removed old comment

  4. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    4
    Vote Rating
    0
    dhaze is on a distinguished road

      0  

    Default


    Thanks dshookowsky. Gave the code a try and it works exactly like I wanted it to! You guys (forum) are awesome.

    Mucho Gracias!
    Last edited by dhaze; 26 May 2013 at 8:21 PM. Reason: not tested correctly

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Vote Rating
    0
    Answers
    7
    dshookowsky is an unknown quantity at this point

      0  

    Default


    I randomly changed the class name of the controller

    Check your controllers in the app.js. Make sure that you have (at least)
    Code:
    	controllers: [
            'InfoListController'
        ],

Thread Participants: 1

Tags for this Thread