PDA

View Full Version : issue with generated html



howHardCanItBe
6 Sep 2011, 12:44 PM
I have a very simplistic list with a toolbar at the bottom that has a cancel button. When the HTML is generated all of these controls have a additional div wrapped around it which is causing my listener to fail if anything that is not text within the item is clicked. Looking for answers I only saw reference to some undocumented config option called delegate which did not work.

here is the list:


var emailList = new Ext.List({
store: emailStore,
itemTpl: new Ext.XTemplate("<div data-email='{Email}'>{Email}</div>")
});


the toolbar:


var cancelBar = new Ext.Toolbar({
dock: 'bottom',
items: [{ xtype: 'spacer' },
{ html: '<div id="cancel" class="x-button x-button-normal">Cancel</div>' },
{xtype: 'spacer'}]


});


The panel they are loaded in:


var emailPopup = new Ext.Panel({
id: 'emailPopup',
modal: true,
centered: true,
scroll: 'vertical',
width: Ext.is.Phone ? 260 : 400,
height: Ext.is.Phone ? 220 : 400,
floating: true,
items: [emailList],
dockedItems: [cancelBar],
listeners: { el: { tap: { fn: this.handle_popup_click, scope: this}, delegate: 'div' } }
});
emailPopup.show();


and here is a example of the HTML that is generated


<div class="x-list-item-body"><div data-email="otherpersonB@zxcv.com">otherpersonB@zxcv.com</div></div>


if I happen to click whitespace that is within the item nothing will happen because in the case of the items data-email does not exist and in the case of the cancel button the id will not match.

dj
6 Sep 2011, 2:01 PM
try


var emailPopup = new Ext.Panel({
id: 'emailPopup',
modal: true,
centered: true,
scroll: 'vertical',
width: Ext.is.Phone ? 260 : 400,
height: Ext.is.Phone ? 220 : 400,
floating: true,
items: [emailList],
dockedItems: [cancelBar],
listeners: { el: { tap: { fn: this.handle_popup_click, scope: this, delegate: 'div'} } }
});
emailPopup.show();


delegate is documented, have a look at the addListener method of Ext.Element: http://dev.sencha.com/deploy/touch/docs/source/Element.html#method-Ext.Element-addListener

BTW: this is the ExtJS 4 Help Forum – not the Sencha Touch Help Forum

howHardCanItBe
7 Sep 2011, 7:11 AM
thanks for the response and link, when I searched on http://dev.sencha.com/deploy/touch/docs/ nothing came up for it. sorry for posting in the wrong area. If a mod reads this please move it. I tried the altered code and it did not help, now that I know what delegate does I understand why.

When I click on the text portion of my item in the list my function receives:



<div data-email="lastpersonC@jklh.com">lastpersonC@jklh.com</div>


This is what I need because I can access data-email. When I click on the whitespace for the item the function receives :



<div class="x-list-item-body"><div data-mail="lastpersonC@jklh.com">lastpersonC@jklh.com</div></div>


this is a problem because when I try to get the data-email attribute it is undefined. any suggestions on how I can access the data-email in this scenario?

dj
7 Sep 2011, 12:32 PM
add a class to the itemTpl of the emailList:


var emailList = new Ext.List({
store: emailStore,
itemTpl: new Ext.XTemplate("<div class="email" data-email='{Email}'>{Email}</div>")
});


... and then you can alter the delegate selector to only match div's with this class:


var emailPopup = new Ext.Panel({
id: 'emailPopup',
modal: true,
centered: true,
scroll: 'vertical',
width: Ext.is.Phone ? 260 : 400,
height: Ext.is.Phone ? 220 : 400,
floating: true,
items: [emailList],
dockedItems: [cancelBar],
listeners: { el: { tap: { fn: this.handle_popup_click, scope: this, delegate: 'div.email'} } }
});
emailPopup.show();