1. #1
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Vote Rating
    4
    bastard is on a distinguished road

      2  

    Default onTap for a label in Architect

    onTap for a label in Architect


    How do I add an onTap listener for a Ext.Label component in Architect for Sencha Touch 2?

  2. #2
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Vote Rating
    4
    bastard is on a distinguished road

      1  

    Default


    I am still trying to figure this out. In the Sencha Architect 2 example below, I am trying to figure how to add a onTap listener to my HTML of the Ext.Label when a user Taps "click here"(I want to change cards if a user taps "click here". Obviously this is an output of code view. Although I don't have a clue how to add an onTap listener here.

    Code:
               {
                    xtype: 'container',
                    id: 'SetupLoginContainer',
                    layout: {
                        type: 'fit'
                    },
                    items: [
                        {
                            xtype: 'formpanel',
                            id: 'SetupLoginFormPanel',
                            itemId: 'myformpanel',
                            ui: '',
                            scrollable: 'vertical',
                            items: [
                                {
                                    xtype: 'spacer',
                                    height: 10,
                                    width: 291
                                },
                                {
                                    xtype: 'toolbar',
                                    docked: 'top',
                                    title: 'Login',
                                    items: [
                                        {
                                            xtype: 'button',
                                            handler: function(button, event) {
                                                //Ext.getCmp('SetupContainer').animateActiveItem(Ext.getCmp('SetupFirstScreen'),{type: 'slide', direction: 'left'});
                                            },
                                            docked: 'left',
                                            id: 'SetupLoginBackButton',
                                            ui: 'back',
                                            text: 'back'
                                        },
                                        {
                                            xtype: 'button',
                                            docked: 'right',
                                            ui: 'confirm-small',
                                            text: 'login'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'spacer',
                                    height: 10
                                },
                                {
                                    xtype: 'fieldset',
                                    title: 'Login using your account',
                                    items: [
                                        {
                                            xtype: 'textfield',
                                            id: 'loginEmailAddress',
                                            label: 'Email',
                                            labelWidth: '40%',
                                            required: true
                                        },
                                        {
                                            xtype: 'textfield',
                                            id: 'loginPassword',
                                            label: 'Password',
                                            labelWidth: '40%',
                                            required: true
                                        }
                                    ]
                                },
                                {
                                    xtype: 'button',
                                    ui: 'confirm',
                                    text: 'login'
                                },
                                {
                                    xtype: 'spacer',
                                    height: 50
                                },
                                {
                                    xtype: 'label',
                                    html: 'forgot password? <a href="#">click here</a>',
                                    id: 'ForgotPasswordClickHereLabel',
                                    itemId: 'mylabel'
                                }
                            ]
                        }
                    ]
                },

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Location
    Karachi, Pakistan
    Posts
    9
    Vote Rating
    0
    ali.abbas is on a distinguished road

      0  

    Default


    I'm having the same problem kindly respond, Anyone from sencha team.

  4. #4
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    522
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      1  

    Default


    There are several ways to achieve this, one of the easiest is to use a button with ui: 'plain'.

    I recently added a tap listener to a gridbutton created for touch....

    This code bubbles up a tap event on a label. Throw it in the init of your top-level class. Change the controlquery as needed. The event raised is captured by a listener within my gridbutton control container then acted on by one of my controller actions.....

    Code:
    this.down('#textLabel').element.on({scope: this,     tap : function(e, t) {
    
    
            this.fireEvent('gridbuttontap', this.getItemId());
            //console.log(this.getItemId());
        }
    } );
    Hope it helps,
    John
    I love being a dad (5 & 7), flying airplanes (KBED) and writing code (spaghetti).
    BostonMerlin aka John Bond aka JB
    See U @ SenchaCon '13

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Location
    Karachi, Pakistan
    Posts
    9
    Vote Rating
    0
    ali.abbas is on a distinguished road

      0  

    Default


    Button trick works great, but i don't think it's good way to do that thing. I tried your second approach but didn't succeeded. I added your code in app.js lauch method. That's main entry point of my application.

    Code:
    /*
     * File: app.js
     *
     * This file was generated by Sencha Architect version 2.2.0.
     * http://www.sencha.com/products/architect/
     *
     * This file requires use of the Sencha Touch 2.1.x library, under independent license.
     * License of Sencha Architect does not include license for Sencha Touch 2.1.x. For more
     * details see http://www.sencha.com/license or contact license@sencha.com.
     *
     * This file will be auto-generated each and everytime you save your project.
     *
     * Do NOT hand edit this file.
     */
    
    
    //@require @packageOverrides
    Ext.Loader.setConfig({
    
    
    });
    
    
    Ext.application({
        models: [
            'User'
        ],
        views: [
            'MainPanel',
            'LoginFormPanel',
            'EditFormPanel',
            'SignupFormPanel',
            'EmailFormPanel'
        ],
        controllers: [
            'MainController'
        ],
        name: 'StatusApp',
    
    
        launch: function() {
            StatusApp.globals = {
                mainStatusId: 1,
                subStatusId: 1,
                statusOptionId: 1,
                mainStatusLabel: "",
                subStatusLabel: "",
                statusOptionLabel: "",
                isLoggedIn:false,
                baseImagePath: 'images/'
    
    
            };
    
    
            this.down('#noteText').element.on({scope: this,     tap : function(e, t) {
                this.fireEvent('gridbuttontap', this.getItemId());
                alert(this.getItemId());
            }
        } );
        Ext.create('StatusApp.view.MainPanel', {fullscreen: true});
        }
    
    
    });
    But it gives error on console: Object has no method "down".

    Kindly let me know if i'm doing anything wrong, not worked much on sencha touch.

    Thanks,
    Ali Abbas

  6. #6
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    522
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    You should put this in the init event of the view that contains the label you want to tap on...
    I love being a dad (5 & 7), flying airplanes (KBED) and writing code (spaghetti).
    BostonMerlin aka John Bond aka JB
    See U @ SenchaCon '13

  7. #7
    Sencha User
    Join Date
    Apr 2013
    Location
    Karachi, Pakistan
    Posts
    9
    Vote Rating
    0
    ali.abbas is on a distinguished road

      0  

    Default


    Code:
    /*
     * File: app/view/MainPanel.js
     *
     * This file was generated by Sencha Architect version 2.2.0.
     * http://www.sencha.com/products/architect/
     *
     * This file requires use of the Sencha Touch 2.1.x library, under independent license.
     * License of Sencha Architect does not include license for Sencha Touch 2.1.x. For more
     * details see http://www.sencha.com/license or contact license@sencha.com.
     *
     * This file will be auto-generated each and everytime you save your project.
     *
     * Do NOT hand edit this file.
     */
    
    
    Ext.define('StatusApp.view.MainPanel', {
        extend: 'Ext.Panel',
    
    
        config: {
            hidden: true,
            id: 'mainPanel',
            ui: '',
            scrollable: true,
            items: [
                {
                    xtype: 'titlebar',
                    docked: 'top',
                    ui: 'light',
                    title: 'Status App'
                },
                {
                    xtype: 'panel',
                    docked: 'top',
                    id: 'profilePanel',
                    margin: '5 0 0 0',
                    ui: '',
                    layout: {
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'label',
                            docked: 'top',
                            height: 26,
                            html: 'Welcome: Mr Jason',
                            id: 'welcomeLabel',
                            minHeight: 20,
                            minWidth: 400
                        },
                        {
                            xtype: 'image',
                            disabled: false,
                            height: 30,
                            id: 'companyLogo',
                            style: 'float:left',
                            width: 30,
                            src: 'images/RaaweeLogo.png'
                        },
                        {
                            xtype: 'label',
                            height: 20,
                            html: 'Raawee',
                            id: 'companyName',
                            margin: '5 0 5 0'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    docked: 'top',
                    id: 'callAndMsgPanel',
                    margin: '5 0 0 0',
                    layout: {
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'button',
                            docked: 'right',
                            id: 'emailButton',
                            ui: 'confirm-round',
                            width: '48%',
                            text: 'New Message'
                        },
                        {
                            xtype: 'button',
                            docked: 'left',
                            html: '<a href=\'tel:12345\' style="color:white;text-decoration:none;">Call Now</a>',
                            id: 'callButton',
                            ui: 'confirm-round',
                            width: '48%'
                        }
                    ]
                },
                {
                    xtype: 'carousel',
                    centered: false,
                    height: 201,
                    id: 'statusCarousel',
                    itemId: 'statusCarousel',
                    margin: '5 0 0 0',
                    items: [
                        {
                            xtype: 'container',
                            id: 'container_1',
                            items: [
                                {
                                    xtype: 'image',
                                    centered: false,
                                    height: 115,
                                    id: 'status_1',
                                    left: '',
                                    width: 114,
                                    mode: 'img',
                                    src: 'images/Available.png'
                                },
                                {
                                    xtype: 'label',
                                    height: 21,
                                    html: 'Available',
                                    id: 'mainStatus_1',
                                    margin: '0 0 0 5'
                                },
                                {
                                    xtype: 'label',
                                    height: 21,
                                    html: 'In Office',
                                    id: 'subStatus_1',
                                    margin: '0 0 0 5'
                                },
                                {
                                    xtype: 'label',
                                    height: 21,
                                    html: 'All Day',
                                    id: 'statusOption_1',
                                    margin: '0 0 0 5'
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            id: 'container_2',
                            items: [
                                {
                                    xtype: 'image',
                                    centered: false,
                                    height: 115,
                                    id: 'status_2',
                                    left: '',
                                    width: 114,
                                    mode: 'img',
                                    src: 'images/Busy.png'
                                },
                                {
                                    xtype: 'label',
                                    height: 21,
                                    html: 'Busy',
                                    id: 'mainStatus_2',
                                    margin: '0 0 0 5'
                                },
                                {
                                    xtype: 'label',
                                    height: 21,
                                    html: 'Out of Office',
                                    id: 'subStatus_2',
                                    margin: '0 0 0 5'
                                },
                                {
                                    xtype: 'label',
                                    height: 21,
                                    html: 'VM Only',
                                    id: 'statusOption_2',
                                    margin: '0 0 0 5'
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            id: 'container_3',
                            items: [
                                {
                                    xtype: 'image',
                                    centered: false,
                                    height: 115,
                                    id: 'status_3',
                                    left: '',
                                    width: 114,
                                    mode: 'img',
                                    src: 'images/Custom.png'
                                },
                                {
                                    xtype: 'label',
                                    height: 21,
                                    html: 'Custom',
                                    id: 'mainStatus_3',
                                    margin: '0 0 0 5'
                                },
                                {
                                    xtype: 'label',
                                    height: 21,
                                    html: 'Status 1',
                                    id: 'subStatus_3',
                                    margin: '0 0 0 5'
                                },
                                {
                                    xtype: 'label',
                                    height: 21,
                                    html: 'Option 1',
                                    id: 'statusOption_3',
                                    margin: '0 0 0 5'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'picker',
                    hidden: true,
                    id: 'status_options_picker',
                    useTitles: true
                },
                {
                    xtype: 'label',
                    html: 'Call me on client\'s phone number  Call me on client\'s phone number',
                    id: 'noteLabel'
                },
                {
                    xtype: 'selectfield',
                    id: 'noteSelector',
                    label: 'Notes',
                    options: [
                        {
                            text: 'First Option',
                            value: 'first'
                        },
                        {
                            text: 'Second Option',
                            value: 'second'
                        },
                        {
                            text: 'Third Option',
                            value: 'third'
                        },
                        {
                            text: 'Tony',
                            value: 5
                        },
                        {
                            text: 'Angela',
                            value: 6
                        },
                        {
                            text: 'Samantha',
                            value: 7
                        },
                        {
                            text: 'Jonathan',
                            value: 8
                        },
                        {
                            text: 'Mona',
                            value: 9
                        }
                    ]
                },
                {
                    xtype: 'textareafield',
                    disabled: true,
                    id: 'noteText',
                    placeHolder: 'Enter Optional Note'
                },
                {
                    xtype: 'button',
                    style: 'text-decoration:none;',
                    ui: 'plain'
                }
            ]
        },
    
    
        initialize: function() {
            this.callParent();
            this.down('#noteLabel').element.on({scope: this,     tap : function(e, t) {
                this.fireEvent('gridbuttontap', this.getItemId());
                alert(this.getItemId());
            }
        } );
        }
    
    
    });
    Sorry that i pasted the whole js file, but i just wanted that you should have a clear picture. Now i don't how understand how do i add this event in my controller. I'm using sencha architect 2.1. I usually add ref in controller and then add controller action on particular event.

    Code:
    Ext.define('StatusApp.controller.MainController', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            views: [
                'LoginFormPanel',
                'MainPanel'
            ],
    
    
            refs: {
                loginButton: '#loginButton',
                loginForm: '#loginForm',
                statusCarousel: '#statusCarousel',
                statusOptionPicker: '#status_options_picker',
                editFormButton: '#editFormButton',
                signupButton: '#signupButton',
                signupSubmit: '#signupSubmit',
                signupForm: '#signupForm',
                noteText: '#noteText',
                emailButton: '#emailButton',
                sendEmailButton: '#sendEmailButton',
                cancelEmailButton: '#cancelEmailButton'
            },
    
    
            control: {
                "loginButton": {
                    tap: 'submitLoginForm'
                },
                "statusCarousel": {
                    activeitemchange: 'onCarouselActiveItemChange'
                },
                "image": {
                    tap: 'onImageTap'
                },
                "statusOptionPicker": {
                    change: 'onPickerChange'
                },
                "textfield": {
                    blur: 'onTextfieldBlur'
                },
                "editFormButton": {
                    tap: 'onEditFormButtonTap'
                },
                "signupButton": {
                    tap: 'onSignupButtonTap'
                },
                "signupSubmit": {
                    tap: 'onSignupSubmitButtonTap'
                },
                "signupForm": {
                    exception: 'onSignupFormError',
                    submit: 'onSignupFormSubmit'
                },
                "noteText": {
                    action: 'onTextareafieldAction',
                    blur: 'onTextareafieldBlur',
                    focus: 'onTextareafieldFocus'
                },
                "emailButton": {
                    tap: 'onEmailButtonTap'
                },
                "sendEmailButton": {
                    tap: 'onSendEmailButtonTap'
                },
                "cancelEmailButton": {
                    tap: 'onCancelEmailButtonTap'
                }
            }
        },
    
    
        submitLoginForm: function(button, e, eOpts) {
    
    
            var userName = Ext.getCmp('userName').getValue();
            var password = Ext.getCmp('password').getValue();
    
    
            Ext.Ajax.request({
                method:'POST',
                url: '/StatusApp/login',
                params: {
                    userName: userName,
                    password: password
                },
                success: function(xhr) {        
                    var response = Ext.JSON.decode(xhr.responseText);
                    if(response && response.status == "success"){
                        var user = response.responseBean[0];
                        Ext.getCmp('loginForm').hide();
                        Ext.create('StatusApp.view.MainPanel', {fullscreen: true});            
                        Ext.getCmp('mainPanel').show();
                        Ext.getCmp('welcomeLabel').setHtml('Welcome, ' + user.name);
                        Ext.getCmp('companyName').setHtml(user.company.name);
                        Ext.getCmp('companyLogo').setSrc(StatusApp.globals.baseImagePath + user.company.logo);
                        Ext.getCmp('callButton').setHtml("<a href=\'tel:" + user.company.phoneNumber + "\' style=\"color:white;text-decoration:none;\">Call Now</a>");
    
    
                        var curStatus = user.currentStatus;
                        var mainStatus = curStatus.subStatus.mainStatus;
                        StatusApp.globals.mainStatusId = mainStatus.id;
                        StatusApp.globals.subStatusId = curStatus.subStatus.id;
                        StatusApp.globals.statusOptionId = curStatus.statusOptions.id;
    
    
                        StatusApp.globals.mainStatusLabel = mainStatus.label;
                        StatusApp.globals.subStatusLabel = curStatus.subStatus.label;
                        StatusApp.globals.statusOptionLabel = curStatus.statusOptions.label;
    
    
                        Ext.getCmp('statusCarousel').setActiveItem(Ext.getCmp('container_'+StatusApp.globals.mainStatusId));
    
    
                        Ext.getCmp('mainStatus_' + StatusApp.globals.mainStatusId).setHtml(StatusApp.globals.mainStatusLabel);
                        Ext.getCmp('subStatus_' + StatusApp.globals.mainStatusId).setHtml(StatusApp.globals.subStatusLabel);
                        Ext.getCmp('statusOption_' + StatusApp.globals.mainStatusId).setHtml(StatusApp.globals.statusOptionLabel);
    
    
                    }
                }
            });
        }
    });
    I add all functionality using Sencha Architect, and it generates the js files for me. I don't want to explicitly edit javascript files, so kindly suggest a way through that Sencha Architect tool. Thanks for bearing with me.

    Thanks,
    Ali Abbas

  8. #8
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    522
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    Think about it this way....

    Since the Ext.label control does not expose a tap event we need to intercept the tap event of the underlying label element. When your 'MainPanel' view initializes, we're grabbing a reference to the label's inner element and telling the framework to call a function when the label.element is tapped. Once tapped, we turn around and raise a custom event 'gridbuttontap' that our controller action can listen for (since it cant listen for an Ext.label tap directly).

    Obviously, raising a 'gridbuttontap' event created for my gridbutton project doesnt make much sense for your app so you'll want to change that to something that makes sense (i.e. 'noteLabelTap'). In addition, you probably don't want to pass up to the controller the labels itemId so you can remove that from the fireEvent call.

    In your controller action set controlQuery to MainPanel, targetType container and name to 'noteLabelTap'. You might need to tweak controlQuery to match your xtype as i'm not looking at your code example at the moment.

    Play around with this and go from there. Hope that helps
    John
    I love being a dad (5 & 7), flying airplanes (KBED) and writing code (spaghetti).
    BostonMerlin aka John Bond aka JB
    See U @ SenchaCon '13

  9. #9
    Sencha User
    Join Date
    Dec 2010
    Posts
    74
    Vote Rating
    1
    Johnbran is on a distinguished road

      1  

    Default


    Hello,
    What you want to do is easy in Architect. Add the event listener painted. In the event code add...

    Code:
    element.on('click', function() {
    
        alert('hello');
    
    
    });

  10. #10
    Sencha User
    Join Date
    Nov 2013
    Location
    India
    Posts
    8
    Vote Rating
    0
    megm is on a distinguished road

      0  

    Default


    I have a similar issue. I want to implement the click functionality for a label in the controller. This doesnt work:'
    Code:
    #createAccountLink':{ 
                   click:'doCreateAccount' 
               }
    doCreateAccount: function(){ 
      alert("It Works");
    }
    Isn't there a way for keeping both separate? Now, if I place the following in the view, it works:
    Code:
    listeners:{ 
         afterrender:function(){ 
          this.el.on('click',function(){       alert("It Works"); }); 
         } 
        }