Results 1 to 3 of 3

Thread: How to create a list with mix of content & Links?

  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    49
    Answers
    1

    Default How to create a list with mix of content & Links?

    Hi,
    I am generating a list with different variables and it includes one link (on clikc phonecall).
    1. on link click it should go to phone call
    2. on itemtap it should go to next view.

    issue: when ever i click on link it's connecting to phone call and at the same time view also changing... may be itemtap also getting fired... How to avoid it?

    here is my code,
    Code:
    {
    	xtype: 'list',
    	cls: 'nestedmenuleft',
    	layout : 'fit',
    	useToolbar : false,
    	flex: 1,
    	emptyText : 'No Outlets found.',
    	id: 'promotionOutletlist1',									
    	itemId: 'promoOutletlist1',
    	scrollable: {
    		direction: 'vertical'										
    	},
    	store:'PromotionNewStore',
    	itemTpl: '<div class="trxleft toppadding promolistbg">{OUTLET_NAME}</div><div class="trxleft bottompadding promolistbg">{OUTLET_ADDRESS}</div><div class="trxleft bottompadding promolistbg">{OUTLET_CITY}</div><div class="trxleft bottompadding promolistbg">{OUTLET_STATE}</div><div class="trxleft bottompadding promolistbg">{OUTLET_POSTCODE}</div><div class="trxleft bottompadding promolistbg">{OUTLET_EMAIL}</div><div class="trxleft bottompadding promolistbg">{OUTLET_NOTE}</div><div class="trxleft bottompadding promolistbg">Open Time : {OPEN_TIME}</div><div class="trxleft bottompadding promolistbg">Close Time : {CLOSE_TIME}</div><div class="trxleft bottompadding  image-call-promotions number-padding"><a href="#" name=tel:{CONTACT_NO}</a>{CONTACT_NO}</div>'
    								}
    output will come like this,
    My Outllet
    KL, Malaysia
    6754211
    my addresss
    opentime:
    closetime:
    +619864521

    help me.

  2. #2
    Sencha Premium Member u25771's Avatar
    Join Date
    Sep 2012
    Location
    Switzerland :)
    Posts
    253
    Answers
    27

    Default

    You can handle it like this:


    1. Add a class to you <a>-tag:
    HTML Code:
    <div class="trxleft bottompadding  image-call-promotions number-padding">
        <a class="phoneLink" href="#" name=tel:{CONTACT_NO}>{CONTACT_NO}</a>
    </div>
    2. Check in the itemtap event which class was tapped:
    Code:
    if (e.target.className == 'phoneLink') {
        // PHONELINK CLICKED
    } else {
        // SOMETHING ELSE THAN PHONELINK CLICKED
    }
    It's the same idea as in my actioncolumn for the Sencha Grid (check my blog for more information)
    Mark thread as answered if your problem could be solved and leave a vote for helpful answers

    For more help check out my new blog: http://abitofcoding.blogspot.com

    T
    o get in contact with me just send me a message on Google+

  3. #3
    Sencha User
    Join Date
    Nov 2013
    Posts
    49
    Answers
    1

    Default HI

    it's very useful one.

    Just i tried one another alternative

    Code:
    items: [
    		{
    			xtype: 'list',
    cls: 'nestedmenuleft',
    layout : 'fit',
    useToolbar : false,
    flex: 1,
    emptyText : 'No Outlets found.',
    /*id: 'promotionOutletlist',									
    itemId: 'promoOutletlist',*/
    scrollable: {
    	direction: 'vertical'										
    },
    store:'PromotionNewStore',
    itemTpl:'<div class="listview_list"><ul class="testdata1"><li>{OUTLET_ADDRESS}</li><li>{OUTLET_NAME}</li><li>{OUTLET_STATE}</li><li>{OUTLET_POSTCODE}</li><li>{OUTLET_NOTE}</li><li>{OUTLET_EMAIL}</li><li>Open Time : {OPEN_TIME}</li><li>Close Time : {CLOSE_TIME}</li></ul><ul class="testdata2" style="background:red;"><li><a href="tel:{CONTACT_NO}" name=tel:{CONTACT_NO}>{CONTACT_NO}</a></li></ul></div>',
    	}		
    ],
     listeners: [
    							             {
    							            	 fn: 'onSaveTap',
    							            	 element: 'element',
    							                 delegate: 'ul.testdata1',
    							                 event: 'tap',
    							                 scope: this
    							             },
    							             {
    							                 element: 'element',
    							                 delegate: 'ul.testdata2',
    							                 event: 'tap',
    							                 fn: function() {
    							                     console.log('Two!');
    							                 }
    							             }
    							         ],
    Now my onSaveTap function written in controller. when ever i deployed application it's not calling at all. Not showing any log also. second tap log is working fine.

    How i can make the function work in view from controller.

    Advance Thanks.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •