View Full Version : View and records

20 Jan 2012, 9:05 AM
Hi! My app have many list views and detail view for each view.

Is there a solution for delete/destroy view? I don't want make app slow and I worry about app performance.

Suppose this:

I show items list
I select an item and show detail page... i scroll down in detail page
I select another item of list ... and I show view in position of last scroll (at the end of detail page)

So I'm thinking that I've to do something for destroy objects or views?? When I return to list??

Can I've performance problem if I show view scrolled in old position?


20 Jan 2012, 9:23 AM
To remove an item from a container, you use the remove method on the container. when you want to go back, you could just use setActiveItem within a card layout container.

20 Jan 2012, 9:39 AM

And if I've this problem (posted before) that means that I've views/items open that I've to remove??
This can be cause of performance problems?

20 Jan 2012, 9:42 AM
If you leave a lot of things rendered to the DOM, performance will take a hit. Good rule of thumb is if you can't see it or your aren't animating to it... it doesn't need to be rendered.

20 Jan 2012, 10:01 AM
But if I've detail page ... and I'll use this page for show detail of other items

Do I've to remove this view every time??

For example, I've a list of items, I've to remove this view every time when changes page or not??


20 Jan 2012, 11:06 AM
Proper way is yes. You don't have to destroy the view, just unrender it really.

container.remove(component, false)

The false is telling it to not destroy the component, just remove it from the DOM. In your code that handles the list tap and switches to the detail view you need to check to see if the component is already an item of the container. If not, create it...

handleListItemTap : function(list, index) {
var store = list.getStore(),
rec = store.getAt(index),
container = list.up('container'),
component = container.down('panel'); //the ComponentQuery should be better for your app

if (!component) {
component = {
xtype : 'panel',
items : [.....]


Of course you should modify this to suit your needs but this is how you can switch to the component, check to see if it is an item, if not create a config object. setActiveItem will then switch to that component first checking to see if it is already an item. If it is, switch to it. If not, create the component and then switch to it.

20 Jan 2012, 11:21 AM
Thanks for detailed info