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

[anilvardhan.p]

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,

{
	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.

[u25771]

You can handle it like this:


1. Add a class to you <a>-tag:

<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:

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)

[anilvardhan.p]

it's very useful one.

Just i tried one another alternative

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.