PDA

View Full Version : Delete or Remove



Kurt001
21 Mar 2011, 3:09 AM
hi there,

I read on the blog that it is wise to remove items no longer visible on screen (eg. remove a card after sliding to the next card).

Then I watched the video on keeping the DOM as small as possible and there it is said to delete and rerender items.

Now I am confused how to continue.

What happens to - lets say a list - if I remove it and what if I destroy it.
Can I simply readd the list using the .add() after deleting it or do I have to completely rebuild it?

Can you give me advise which command to use in which scenario?

Best Kurt

mitchellsimoens
21 Mar 2011, 4:43 AM
When you remove a component, the destroy method gets called. And if your store isn't destroyed, "completely" rebuilding the list doesn't take much at all.

Kurt001
21 Mar 2011, 6:07 AM
Hmmmm, not satisfied yet ;)

I build a panel, a list and a geo map.
Inserting the map as an item to the panel and removing it:

panel.remove(mapPanel,true);

True = it seems to be destroyed
False = its still there and even showing on top of my panel

After removing (using true) I try to insert the map back into the panel, but I have no success in doing so.

removing my list from the panel and adding it again as an item works great.

So what am I doing wrong with the map?
What am I doing right with the list?

Does the list get rebuild?

Best Kurt

mitchellsimoens
21 Mar 2011, 6:15 AM
That boolean flag will override the autoDestroy config option (which is true by default). If you specify it as false, the component won't be destroyed but will be removed from it's parent. For this, it's no good because the DOM elements are still there, it just isn't being managed. Where is the savings from that?

For me, I use the activate and deactivate events a lot. I remove components on the deactivate and add them in activate. I use CardLayout a lot too ;) When I want to readd a List, the Store I keep alive so all I have to do is recreate an instance of the List. All the filtering or sorting or whatever is done on the Store so it goes back to where it was. Only thing that isn't done is the scroll position but I manage that my own way. After the transition animation, there is only 1 card displayed. During animation, 2 cards are there but only 1 has child items so therefor my animations have also been great, even on older Android/iOS devices.

Kurt001
21 Mar 2011, 6:39 AM
But how do I revive my map.

So far I did not find any way to show it after I removed the map.
how do I 'reshow' the map?

P.S.: How do you know the height of a single item in a list?

Best Kurt

mitchellsimoens
21 Mar 2011, 6:44 AM
What I would do is before removing the map, gather information such as the center. According to the maps api (http://code.google.com/apis/maps/documentation/javascript/reference.html), there is a method called getCenter and when you recreate it, check for that and use that as your center. If you have any POI made, you will need to handle that. A javascript object of these things will save you more than if the browser is painting everything even when not in view.

Problem when you are creating resolution independent items is the height can be different. All I do is get the first element and get the height of that item. I use overflow: hidden in my tpl to keep the items the same height, IMHO this keeps the List looking better than if I let things wrap.

agentyikes
21 Mar 2011, 6:58 AM
What I would do is before removing the map, gather information such as the center. According to the maps api (http://code.google.com/apis/maps/documentation/javascript/reference.html), there is a method called getCenter and when you recreate it, check for that and use that as your center. If you have any POI made, you will need to handle that. A javascript object of these things will save you more than if the browser is painting everything even when not in view.

Problem when you are creating resolution independent items is the height can be different. All I do is get the first element and get the height of that item. I use overflow: hidden in my tpl to keep the items the same height, IMHO this keeps the List looking better than if I let things wrap.

Could you plese help by jotting down some code of how to setup the store, the list, the events?

Kurt001
21 Mar 2011, 7:03 AM
Center of Map: map.mapOptions.center.Ba (or Da)

But how do I recreate a new map out of my old one?
If I add it again to my panel, I can tell that it is there, but wont show up visually.


About the list. How do I get the height of the first element?
the long version to get it would be:
panel.items.items[0].all.elements[0].children[0].clientHeight
Is there a shorter way?

Kurt001
21 Mar 2011, 7:39 AM
Deleted being a double post

Kurt001
21 Mar 2011, 7:40 AM
Please keep in mind, this is part of my tests, so that some values do not make a lot of sense.


var panel;
var details;
var list;

Ext.regApplication({
name: 'Target Around',
tabletStartupScreen: 'resources/img/tablet_startup.png',
phoneStartupScreen: 'resources/img/phone_startup.jpg',
icon: 'resources/img/icons/icon.png',
glossOnIcon: false,
launch: function() {


//Model
Ext.regModel('ListItem1', {
fields: ['text']
});

/**
* Liste 1 Allgemein
*/
store = new Ext.data.JsonStore({
model : 'ListItem1',
data: [
{text: '<div class="listMainText">Test 1<br><br><br>Test continue</div>'},
{text: '<div class="listMainText">Test 2</div>'},
{text: '<div class="listMainText">Test 3</div>'}
]
});
list = {
xtype: 'list',
title: 'Contacts',
listeners: {
itemtap: function(funcList, index, item) {
details.html = item.childNodes[0].innerHTML;
if (panel.items.length<2){
mySetCard(details);
}
}
},
itemTpl : '{text}',
store: store
};
details = {
xtype: 'panel',
dockedItems: {
title: 'Details',
dock: 'top',
items:
{
xtype:'button',
text: 'Back',
ui: 'back',
handler: function() {
if (panel.items.length<2){
mySetCard(list);
}
}
}
}
};
panel = new Ext.Panel({
fullscreen: true,
cardSwitchAnimation: {type: 'slide', duration: 1200, cover: false, reveal: false, scaleOnExit: false},
title:'MainPanel',
layout: 'card',
items:
[list]
});
panel.on('cardswitch',
function(thisPanel, newCard, oldCard, myBool) {
if (oldCard) {
this.remove(oldCard, true);
}
}, panel);
mySetCard = function(list){
panel.add(list);
panel.setActiveItem(1);
panel.doComponentLayout();
};
}
});

Kurt001
21 Mar 2011, 7:49 AM
Still I would like to know how to redraw the geo map after removing it from a panel.

Best Kurt

mitchellsimoens
21 Mar 2011, 8:05 AM
About the list. How do I get the height of the first element?
the long version to get it would be:
panel.items.items[0].all.elements[0].children[0].clientHeight
Is there a shorter way?


var node = list.getNode(0),
nodeEl = Ext.get(node),
nodeHeight = nodeEl.getHeight();

mitchellsimoens
21 Mar 2011, 8:20 AM
Removing and adding the map with remembering the center quick demo:


var mapOptions = {};

var centerHandler = function() {
var cmp = panel.getComponent(0),
map = cmp.map,
center = map.getCenter();

return center;
}

var removeHandler = function() {
mapOptions.center = centerHandler();

panel.removeAll();
}

var addHandler = function() {
var center = mapOptions.center,
latlng = new window.google.maps.LatLng(center.Ba, center.Da),
cmp = {
xtype : "map",
mapOptions : {
center: latlng
}
};

panel.add(cmp);
panel.doLayout();
}

var panel = new Ext.Panel({
fullscreen : true,
dockedItems : {
xtype : "toolbar",
dock : "top",
items : [
{ text : "Remove", ui : "decline", handler : removeHandler },
{ text : "Add", ui : "confirm", handler : addHandler }
]
},
items : [
{
xtype : "map",
useCurrentLocation : true
}
]
});