PDA

View Full Version : NestedList Setting Leaf Title



supermonchi
22 Mar 2011, 9:41 PM
How can I set the title of a leaf card in a nested list?

This is what I got so far:
http://www.blessdigital.com.au/dev/apps/expense_logger/

Say if you click on Food and then Groceries, I want the leaf card title to say Groceries, not Expenses.

Thanks in advance.

supermonchi
22 Mar 2011, 10:20 PM
Found a suggestion on this thread:
http://www.sencha.com/forum/showthread.php?126970-Changing-title-on-nestedList&highlight=leaf+title

but I'm still not getting it, as the way I implement it is slightly different.

Here's my code:


ExpenseLogger.views.Viewport = Ext.extend(Ext.NestedList, {
fullscreen: true,
title: 'Expenses',
displayField: 'text',
store: ExpenseLogger.categories_store,
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,
detailCard = new Ext.Panel({
scroll: 'vertical',
styleHtmlContent: true,
tpl: ["<h2>{text}</h2>"],
listeners: {
activate: function() {
ExpenseLogger.views.Viewport.toolbar.setTitle(item.attributes.record.get('text'));
}
}
});
detailCard.update(itemData);
this.backButton.setText(parentData.text);
return detailCard;
},
}
);

I get this error:


Uncaught TypeError: Cannot call method 'setTitle' of undefined

What's the right way to reference the NestedList object in this case?

I also tried this


ExpenseLogger.views.Viewport = Ext.extend(Ext.NestedList, {
fullscreen: true,
title: 'Expenses',
displayField: 'text',
store: ExpenseLogger.categories_store,
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,
detailCard = new Ext.Panel({
scroll: 'vertical',
styleHtmlContent: true,
tpl: ["<h2>{text}</h2>"],
});

detailCard.update(itemData);
this.toolbar.setTitle(itemData.text);
this.backButton.setText(parentData.text);
return detailCard;
},
}
);
No error but does nothing.

Any suggestions?

emadow
23 Mar 2011, 12:14 PM
in your getDetailCard function, try returning a panel instead of creating a panel in a variable and then updating it's parent. the activate listener is probably having trouble in this non-standard case.

so,


return new Ext.Panel({ ... });

instead of


detailCard = new Ext.Panel({...});
detailCard.update(itemData);

let me know if you have any luck.

supermonchi
23 Mar 2011, 2:39 PM
Thanks emadow for the tip, I appreciate your help.

I tried your suggestion but I'm still unsure how to tell the parent panel to update its title. Additionally, now I would also need to tell the parent panel to update the Back button text. Strange that the way I did it previously managed to update the Back button but not the Toolbar title.

This is what I have now:

getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data;
return new Ext.Panel({
styleHtmlContent: true,
tpl: ["<h2>{text}</h2>"],
style: "background-color: #fee;",
listeners: {
activate: function() {
// how to tell the parent panel to update its title?
this.update(itemData); // this updates the leaf panel contents
}
}
});
I have left the "this.update(itemData)" line so that it updates the leaf panel contents according to the chosen path. Without it the panel is blank.

Any ideas?

emadow
23 Mar 2011, 3:01 PM
Are you sure this toolbar isn't invoked from another panel? Are you positive this is the NestedList toolbar?

emadow
23 Mar 2011, 3:05 PM
You could also give your toolbar an id and try to update it via Ext.getCmp, so:


ExpenseLogger.views.Viewport = Ext.extend(Ext.NestedList, {
fullscreen: true,
title: 'Expenses',
toolbar: {
id:'itemToolbar'
}......

and then in your getDetailCard function:


Ext.getCmp("itemToolbar").setText(item.attributes.record.get('text'));

Good luck

supermonchi
23 Mar 2011, 3:53 PM
Hi emadow,

I have not created any toolbars manually, so I assume that the toolbar comes with the nested list.

Your suggestion to use id sounds interesting, I'll give that a try.
Would giving the parent panel and id in order to update its title work too?

Sorry I'm a complete beginner at this. I've only spent about 2-3 weeks with sencha and given my inexperience with Javascript, this has been quite a steep learning curve. But I am trying and I really appreciate your help.

emadow
23 Mar 2011, 3:57 PM
Yeah you could give the parent an id too, but try assigning it to the toolbar like in the demo code I posted.

Sencha is daunting at first, but you'll get the hang of it; it's verrrrry intuitive.

supermonchi
23 Mar 2011, 5:30 PM
Hi emadow,

Finally, it works!
http://www.blessdigital.com.au/dev/apps/expense_logger/

The leaf card titles can change now, however there is a split second delay. Is there another way to work around this, or achieve the same result without using the listener method?

I have also managed to get the Back button to update using the same approach. I tried using the toolbar id like you suggested but it didn't seem to work for the Back button, so I added an id for the NestedList itself and it seems to work.

Can you think of a better way to do this?

This is my code now:

ExpenseLogger.views.Viewport = Ext.extend(Ext.NestedList, {
fullscreen: true,
id: 'nestedListPanel',
title: 'Expenses',
toolbar: {
id:'itemToolbar'
},
updateTitleText: true,
useTitleAsBackText: true,
store: ExpenseLogger.categories_store,
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data;
return new Ext.Panel({
styleHtmlContent: true,
tpl: ["<h2>{text}</h2>"],
listeners: {
activate: function() {
Ext.getCmp('itemToolbar').setTitle(itemData.text);
Ext.getCmp('nestedListPanel').backButton.setText(parentData.text);
this.update(itemData);
}
}
});
},
}
);Another question, how come setting these alone won't work?

updateTitleText: true
useTitleAsBackText: trueI only just came across these attributes and I would have thought from the API description that these settings should do the job i.e. without using the listener approach.

Thanks again for your help.

I'm glad you're at a stage where you find Sencha intuitive, someone has to help noobs like me! :) Btw out of curiosity, how did you learn it? Did you just work through code examples or do you know of helpful books, screencasts, etc?

emadow
23 Mar 2011, 5:45 PM
Glad you got it to work.

I've had the same problems you did and this seems to be only way to easily do this. I, too, dislike the setText update lag, and ask anyone else out there if there is a better method.

zigiless
25 Jul 2011, 2:33 PM
There's actually a much simpler, undocumented method:
Here's the change you need to make to the getDetailCard function:



getDetailCard:function(item, parent){
...
new Ext.Panel({
recordNode: item
});

...
}


Setting the "recordNode" property on the panel to the actual record, fixes the title problem.
I figured this out by looking at the code.
This should really be documented somewhere (Maybe I missed it?)