PDA

View Full Version : NestedList Back button



simondavies
19 Oct 2011, 3:39 AM
Rather than text etc I woudl like to use a left arrow image btu I am having issues doing this, is there a way i Can do this.

I can add the image dirrectly into the 'backText (http://docs.sencha.com/touch/1-1/#%21/api/Ext.NestedList-cfg-backText)' setting as backText (http://docs.sencha.com/touch/1-1/#%21/api/Ext.NestedList-cfg-backText): '<img src="" />', ect but the image goes to s set size whether the image is small or large and looks odd in the button

Ideally i woudl like to ue the following image, that i am using on other panels ect
{iconCls: 'arrow_left', iconMask: true, id: 'backBtn'.....

Thanks

AndreaCammarata
19 Oct 2011, 4:46 AM
Hi simondavies,
take a look at this thread.

http://www.sencha.com/forum/showthread.php?150694-Possible-to-change-back-button-of-NestedList&p=659690

Hope this helps.

simondavies
19 Oct 2011, 6:54 AM
Thanks for this, I have added the little bit of listener code, but I do not see the backbutton, its as if its remvoed it but will not re-add it.

My code is below:


App.views.listFourPage = Ext.extend(Ext.NestedList, {
id:'listFourPage',
scroll: 'vertical',
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
displayField: 'page',
onItemDisclosure:true,
componentCls: 'x-toolbar-dark',
toolbar: {
componentCls: 'x-toolbar-dark',
items: [{xtype: 'spacer'},{iconCls: 'home', iconMask: true, id: 'homeBtn'}]
},
backText: '',
useTitleAsBackText: false,
listeners: {
afterrender: function(){
//Remove the default button
this.toolbar.remove(this.backButton);
//Create the custom button
this.backButton = new Ext.Button({
//ui: 'plain',
iconMask: true,
iconCls: 'arrow_left',
scope: this,
handler: this.onBackTap
});
//Add the custom button
this.toolbar.add(this.backButton);
},
scope: App.views.listFourPage
},
store: App.views.listFourStore,
updateTitleText:false,
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,
detailCard = new Ext.Panel({
id: 'thdetailpanel',
scroll: 'vertical',
styleHtmlContent: true,
tpl: App.views.listFourPageTpl,
layout: 'card',
style: 'background: #fff',
});
detailCard.update(itemData);
return detailCard;
},
getItemTextTpl: function() {
var tplConstructor = '{title}' +
'<div class="list-subtext">' +
'{subtext}' +
'</div>'
return tplConstructor;
}
});

Ext.reg('listFourPage', App.views.listFourPage);

Nope this helps

simondavies
19 Oct 2011, 7:03 AM
As I want this on all my nested lists on this project I opened up the sencha touch js file and placed my backbutton setting within here and it seemed to have worked.

Thanks